Webpack's imported module does not have a constructor function

Question

Webpack's imported module does not have a constructor function

I have developed a compact JS module that I plan to transform into an npm package, although at the moment it is only available on GitHub. This module has been built using ES6 and SCSS, making use of webpack and babel for transpilation.

To conduct its testing, I set up a separate project with a similar configuration (utilizing webpack and babel). Following the npm installation of my module, when attempting to import it into my index.js file, Chrome Developer Tools throws the following error: (where x stands for the name of my module)

index.js:11 Uncaught TypeError: x__WEBPACK_IMPORTED_MODULE_1___default.a is not a constructor
    at eval (index.js:11)
    at Object../src/index.js (main.js:368)
    at __webpack_require__ (main.js:20)
    at eval (webpack:///multi_(:8081/webpack)-dev-server/client?:2:18)
    at Object.0 (main.js:390)
    at __webpack_require__ (main.js:20)
    at main.js:69
    at main.js:72

Despite going through numerous responses and attempting various solutions, the issue remains unresolved. The setup for my module is outlined below.

.babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["ie >= 11"]
      }
    }]
  ],
  "plugins": [
    "transform-es2015-modules-commonjs",
    "transform-class-properties"
  ]
}

webpack.common.js

const path = require('path')
...

webpack.prod.js

const merge = require('webpack-merge')
...

package.json

{
  "name": "my-module-name",
  "version": "1.0.0-beta.1",
...

Any guidance or assistance would be highly valued. Should additional information be required, please do not hesitate to reach out.

javascript npm webpack babeljs es6-modules

Answer 1

Answer №1

If you're not the creator of the library and are encountering difficulties while using another library, you might come across an error message similar to this:

TypeError: [LIBRARY_NAME]__WEBPACK_IMPORTED_MODULE_3__ is not a constructor

If this scenario sounds familiar, it's possible that you're importing the library incorrectly within your code (potentially due to issues with default exports). Take a moment to review the documentation provided by the library for accurate usage instructions.

The solution could be as straightforward as making this adjustment:

import Foo from 'some-library/Foo';

to this instead:

import { Foo } from 'some-library';

Answer 2

If you're not the creator of the library and are encountering difficulties while using another library, you might come across an error message similar to this:

TypeError: [LIBRARY_NAME]__WEBPACK_IMPORTED_MODULE_3__ is not a constructor

If this scenario sounds familiar, it's possible that you're importing the library incorrectly within your code (potentially due to issues with default exports). Take a moment to review the documentation provided by the library for accurate usage instructions.

The solution could be as straightforward as making this adjustment:

import Foo from 'some-library/Foo';

to this instead:

import { Foo } from 'some-library';

Answer 3

Answer №2

The reason it's not functioning properly is due to the absence of libraryTarget and library properties. These properties inform webpack on the module format you want to create, such as commonjs (module.exports) or es (export).

A suggested solution would be:

...
  output: {
    path: path.join(__dirname, 'dist'),
    filename: path.join('[name]', 'index.js'),
    library: "my-library",
    libraryTarget: "umd" // exposes and determines when to utilize module.exports or exports.
  },
...

Answer 4

The reason it's not functioning properly is due to the absence of libraryTarget and library properties. These properties inform webpack on the module format you want to create, such as commonjs (module.exports) or es (export).

A suggested solution would be:

...
  output: {
    path: path.join(__dirname, 'dist'),
    filename: path.join('[name]', 'index.js'),
    library: "my-library",
    libraryTarget: "umd" // exposes and determines when to utilize module.exports or exports.
  },
...

Answer 5

Answer №3

In addition to specifying the libraryTarget, it might also be necessary to relocate the export in the JavaScript file to the default position.

function MyClassName() {
  ...
}

export default MyClassName;

Subsequently, in the webpack configuration, you will need to define the library type as umd ...

(Please note that I am utilizing the newer library.type instead of the older libraryTarget. You can refer to https://webpack.js.org/configuration/output/#outputlibrarytarget for more information).

 const path = require('path');
 
 module.exports = {
    mode: "production",
    entry: '../wherever/MyClassName.js',
    
    output: {
        library: {
          name: "MyClassName",
          type: "umd",  // see https://webpack.js.org/configuration/output/#outputlibrarytype
          export: "default",  // see https://github.com/webpack/webpack/issues/8480
        },
        filename: 'MyClassName.min.js',
        path: path.resolve(__dirname, '../wherever/target/')
    },
    optimization: {
        minimize: true
    }
 };

By using the export default, the class becomes accessible in JavaScript as if the file was directly included, for example,

<script type="text/javascript" src="MyClassName.min.js"></script>
<script type="text/javascript">
<!--

var myInstance = new MyClassName();

// -->
</script>

Disclaimer: Despite the original question being three years old, I decided to provide this answer based on my recent experience with the "is not a constructor" issue. It took me hours of searching before discovering the solution involving default. And amazingly, this wasn't the first time I had to search for it :D

Answer 6

In addition to specifying the libraryTarget, it might also be necessary to relocate the export in the JavaScript file to the default position.

function MyClassName() {
  ...
}

export default MyClassName;

Subsequently, in the webpack configuration, you will need to define the library type as umd ...

(Please note that I am utilizing the newer library.type instead of the older libraryTarget. You can refer to https://webpack.js.org/configuration/output/#outputlibrarytarget for more information).

 const path = require('path');
 
 module.exports = {
    mode: "production",
    entry: '../wherever/MyClassName.js',
    
    output: {
        library: {
          name: "MyClassName",
          type: "umd",  // see https://webpack.js.org/configuration/output/#outputlibrarytype
          export: "default",  // see https://github.com/webpack/webpack/issues/8480
        },
        filename: 'MyClassName.min.js',
        path: path.resolve(__dirname, '../wherever/target/')
    },
    optimization: {
        minimize: true
    }
 };

By using the export default, the class becomes accessible in JavaScript as if the file was directly included, for example,

<script type="text/javascript" src="MyClassName.min.js"></script>
<script type="text/javascript">
<!--

var myInstance = new MyClassName();

// -->
</script>

Disclaimer: Despite the original question being three years old, I decided to provide this answer based on my recent experience with the "is not a constructor" issue. It took me hours of searching before discovering the solution involving default. And amazingly, this wasn't the first time I had to search for it :D

Answer 7

Answer №4

Refer to David Calhoun's response, in case you encounter this issue with a third-party framework, you might be attempting to bring in a CommonJS module as an ECMAScript module. The workaround suggested is to utilize the `require` function instead of `import`, for example, replacing

import { Foo } from 'bar'

with

const Foo = require('bar')

(There may be a more graceful solution for this problem, but this method was effective for me.)

Answer 8

Refer to David Calhoun's response, in case you encounter this issue with a third-party framework, you might be attempting to bring in a CommonJS module as an ECMAScript module. The workaround suggested is to utilize the `require` function instead of `import`, for example, replacing

import { Foo } from 'bar'

with

const Foo = require('bar')

(There may be a more graceful solution for this problem, but this method was effective for me.)

Answer 9

Answer №5

If you are using webpack 5 and babel 7 combination

"webpack": "5.73.0",
"@babel/core": "7.4.4",
"@babel/preset-env": "7.4.4",
"babel-loader": "8.0.5",

AND wish to implement class instead of function, here's what worked for me:

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}

export default Person;

In my situation, I did not need a .babelrc file

Answer 10

If you are using webpack 5 and babel 7 combination

"webpack": "5.73.0",
"@babel/core": "7.4.4",
"@babel/preset-env": "7.4.4",
"babel-loader": "8.0.5",

AND wish to implement class instead of function, here's what worked for me:

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}

export default Person;

In my situation, I did not need a .babelrc file

Answer 11

Answer №6

The issue I encountered was within my React project when attempting to utilize the native Error constructor in JavaScript, specifically with the statement throw new Error("something").

After examining my code, it became apparent that a component named Error was present and imported into the same file as the built-in JS Error constructor. This collision of names between the component and the native constructor resulted in the error that was described.

Answer 12

The issue I encountered was within my React project when attempting to utilize the native Error constructor in JavaScript, specifically with the statement throw new Error("something").

After examining my code, it became apparent that a component named Error was present and imported into the same file as the built-in JS Error constructor. This collision of names between the component and the native constructor resulted in the error that was described.

Answer 13

Answer №7

In my experience, the problem was caused by a cache issue. I resolved it by clearing out cookies and cached data, then closing and reopening the browser. This solution worked for me.

Answer 14

In my experience, the problem was caused by a cache issue. I resolved it by clearing out cookies and cached data, then closing and reopening the browser. This solution worked for me.

Answer 15

Answer №8

Summary

Ensure correct importing by using index files efficiently.

Detailed Explanation

In my case, the issue stemmed from incorrect imports via index files. I had several directories each with their own index.ts files that exported all files within said directory. These index files were all gathered and re-exported through a main index.ts file to allow for centralized importing.

src/
├── index.ts
├── module1/
│   ├── index.ts
│   ├── file1.ts
│   └── file2.ts
└── module2/
    ├── index.ts
    ├── file3.ts
    └── file4.ts

One of the imports in file4.ts looked like this:

import { file1Class, file2Class, file3Class } from "src";

I later realized it needed to be split into two separate imports as follows:

import { file1Class, file2Class } from "src/module1";
import { file3Class } from "src/module2";

Answer 16

Summary

Ensure correct importing by using index files efficiently.

Detailed Explanation

In my case, the issue stemmed from incorrect imports via index files. I had several directories each with their own index.ts files that exported all files within said directory. These index files were all gathered and re-exported through a main index.ts file to allow for centralized importing.

src/
├── index.ts
├── module1/
│   ├── index.ts
│   ├── file1.ts
│   └── file2.ts
└── module2/
    ├── index.ts
    ├── file3.ts
    └── file4.ts

One of the imports in file4.ts looked like this:

import { file1Class, file2Class, file3Class } from "src";

I later realized it needed to be split into two separate imports as follows:

import { file1Class, file2Class } from "src/module1";
import { file3Class } from "src/module2";

Answer 17

Answer №9

I found the solution that worked for me using

const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity');

This may be useful for anyone attempting SRI in a React application.

Answer 18

I found the solution that worked for me using

const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity');

This may be useful for anyone attempting SRI in a React application.

Webpack's imported module does not have a constructor function

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Summary

Detailed Explanation

Answer №9

Similar questions

Concealing my menu with overflow-x: hidden on the body is not an option

What is the best way to retrieve the value of a text box in VUEjs using its unique identifier?

challenges encountered with the clearTimeout() method in vue.js

Ways to modify the default text in a dropdown menu?

Using flags to translate text on Google should not result in being redirected to another website

Can you explain the significance of syntax in sample code (typescript, react)?

What could be the reason why modules are not showing up in the `npm list -g --depth=0`

Using Vue Composition API to invoke a child component's method that employs a render function

Regular expressions to eliminate leading zeros from a string, excluding those that are part of decimals

Having trouble switching states in React

Adding choices to enhance dual List styling

Identify the opening of the console for the background page of a Chrome

Exploring the usage of promises with data in VueJS async components

What's the best way to use the like query in Mongoose?

React Native error: encountering the error message "undefined is not an object '_this3.props.navigation()'"

Create a sinusoidal wave and stream it through the web browser

Enhance event handling in Google Maps JS API v3 by setting priorities on event listeners

Encountering an error during ng build -prod with Angular 9, as the css-loader module cannot be located

Getting the click event object data from a dynamically created button with jQuery or JavaScript

The `command prompt` does not acknowledge Ionic