webpack: The requested module does not provide an export named-CodePudding

I am trying to build a js file (which is dependent on node modules) to be used in the browser. For that, I am using webpack to build it and use the output in a HTML page.

However, in the HTML page, I am getting the following error:

Uncaught SyntaxError: The requested module './lib/BasicEditor.js' does not provide an export named 'BasicEditor'

Here is my source file:

import {Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

export class BasicEditor extends Editor {
    constructor(element, content){
        super({element:element, content:content, extensions:[StarterKit]})
    }
}

I use webpack to convert the above file to BasicEditor.js.

I then use this file in my HTML page, which is giving me an error:

<!DOCTYPE html>
<html>
    
     <body>
        <h1>Hello world!</h1>
        <h2>Tip: Check your console</h2>

        <div id="secondElement"></div>

<button id="btnOutput">Output</button>
        
    </body>
    <!-- <script src="lib/BasicEditor.js" type="module"  ></script> -->
    <script type="module" >
       import {BasicEditor}  from './lib/BasicEditor.js';
        var editor ;
        document.addEventListener("DOMContentLoaded", () => {
            console.log("Document Ready!");

        var ele = document.getElementById('secondElement');
        console.log('element', ele );
        editor = new BasicEditor(
            ele,
           '<h1>Hello World from Second !</h1>'
        );
        console.log('editor', editor );
        });
    </script>
</html>

Here is the package.json

{
  "name": "lib-webpack-v2",
  "version": "1.0.0",
  "description": "",
  "private": true,
  
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.20.12",
    "@babel/preset-env": "^7.20.2",
    "@tiptap/core": "^2.0.0-beta.209",
    "@tiptap/starter-kit": "^2.0.0-beta.209",
    "babel-loader": "^9.1.2",
    "path": "^0.12.7"
  },
  "devDependencies": {
    "expose-loader": "^4.0.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/BasicEditor.js',
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,  
        exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }},
  },  ],},
  output: {
    filename: 'BasicEditor.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

CodePudding user response：

Okay, this took a bit of digging, but...

const path = require('path')

module.exports = {
  entry: './src/BasicEditor.js',
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }]
  },
  // this needs to be added to build a library target as ESM
  experiments: {
    outputModule: true
  },
  output: {
    // and also this — which requires the previous block
    libraryTarget: 'module',
    filename: 'BasicEditor.js',
    path: path.resolve(__dirname, 'dist')
  }
}

You have to tell Webpack you're building as a library, because Webpack aggressively removes unused dead code. Additionally, you have to override the defaults to get it to build to ESM. (This is why Rollup became so popular for module bundling.)

Also your HTML has ./lib but your config has ./dist — I assumed that was drift, not a real error, since your error message would've been different.