I'm trying to use some OOP JS in my vue project, i made a very basic class but when trying to make a new object I get the following error:

client.js?06a0:103 TypeError: _assets_js_Product_js__WEBPACK_IMPORTED_MODULE_0__.Product is not a constructor

The class looks like this:

export default class Product {
  name;
  steps;
  model;
  control;
  montage;
  etage;
  dimensions;

  constructor(name) {
    this.name = name;
  }
}

In my component I import the class like this:

import { Product } from '~/assets/js/Product.js'

And then i try to create the object like this:

const product = new Product('markiezen');

I don't understand what i'm doing wrong here i've done OOP in Java but not in Javascript before but for what i've read so for this should work but it doesn't what am i missing?

CodePudding user response：

When exporting a default from a module, the import name should not be wrapped in curly braces {}. Instead, just import like so:

import Product from '~/assets/js/Product.js'

Alternatively, you can remove the default from the export default class Product line.