0

I am trying to set up webpack in our javascript project and we want to write new javascript es6 classes, bundle them via webpack and then reuse the packages. I set up a simple example where i define a TestClass, which gets picked up and bundled by webpack, which i then use to import it in a second javascript file.

TestClass.js:

class TestClass { 

    constructor() {
      console.log("constructor called");
    }

}

export default TestClass;

init.js:

import TestClass from "./TestClass.js";

webpack.config.js:

const path = require('path');

module.exports = {
    mode: 'development',
    watch: true,
    entry: './init.js',
    output: {
    filename: 'main.js',
    path: path.resolve(__dirname, '../WebContent/scripts/dist')
  }
};

snippet from generated main.js:

/***/ "./TestClass.js":
/*!**********************!*\
  !*** ./TestClass.js ***!
  \**********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nclass TestClass {\n  constructor() {\n    console.log(\"constructor called\");\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TestClass);\n\n//# sourceURL=webpack://test/./TestClass.js?");

test.js (where i want to use the TestClass):

import TestClass from './scripts/dist/main.js';

const test = new TestClass();

test.html:

<!DOCTYPE html>
<html>
<head>
    <script type="module" src="test.js"></script>
</head>
<body>
</body>
</html>

The webpack process seems to work fine but when executing test.js in my webapp i get the error

Uncaught SyntaxError SyntaxError: The requested module './scripts/dist/main.js' does not provide an export named 'default'

However when i import TestClass directly from TestClass.js it works like expected, so it cannot be problem about the class itself. Searching tutorials or asking chat gpt didn't bring my anywhere. Why does this not work?

Improve this question
3
  • Does this help? The requested module '' does not provide an export named 'default'
    – isherwood
    Commented Jul 10 at 15:20
  • Just to clarify, are you bundling TestClass.js and init.js into a new, "down-piled"-to-ES5 file named main.js, and then trying to ES6-import TestClass from the ES5 result into test.js?
    – RotundChinchilla
    Commented Jul 10 at 15:46
  • Sry, i corrected my post: i want to reuse TestClass.js but not in a es5 environment. I don't know webpack very well but does it automatically convert my classes into es5 javascript?
    – flixe
    Commented Jul 10 at 15:54

1 Answer 1

Reset to default
0

Ok i solved my problem with the following:

webpack.config.js:

const path = require('path')

module.exports = {
  mode: 'development',
  watch: true,
    output: {
    filename: 'main.js',
    path: path.resolve(__dirname, '../WebContent/scripts/dist'),
    library: {
      name: "main",
      type: "umd"
    }
    },
    devtool: false
};

index.js (automatically taken as entry for webpack):

import TestClass from "./TestClass.js";
const api = {};

api.TestClass = TestClass;

export { api };

I can then consume the api like this in my es5 environment (with package main beeing imported):

new main.api.TestClass()

Not the most ideal solution but it does the job. The solution was to use umd for the output library type in webpack.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.