Webpack打包后浏览器报错：模块未提供BasicEditor导出

出现错误：

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

源文件（src/BasicEditor.js） #

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]})
    }
}

HTML页面代码 #

<!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>

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'),
  },
};

解决方案 #

核心问题 #

Webpack默认打包输出的是CommonJS格式，而你在HTML中用type="module"导入，两者模块格式不兼容，导致无法识别导出的BasicEditor。

修复步骤 #

1. 修改Webpack配置，输出ES模块格式
   更新webpack.config.js的output配置，指定输出为ES模块：

   output: {
     filename: 'BasicEditor.js',
     path: path.resolve(__dirname, 'dist'),
     library: {
       type: 'module',
     },
     environment: {
       module: true,
     },
   }
   

   你的Webpack版本（5.75.0）已支持ES模块输出，无需升级。

2. 修正HTML导入路径
   Webpack打包后的文件默认输出到dist目录，但你的HTML中导入的是./lib/BasicEditor.js，二选一调整：

   • 要么把Webpack的output.path改成path.resolve(__dirname, 'lib')
   • 要么把HTML中的导入路径改成./dist/BasicEditor.js

3. 检查package.json配置
   确保package.json中没有设置"type": "commonjs"，当前配置无此问题，可跳过。

修改后重新执行Webpack打包，即可在HTML中正常导入并使用BasicEditor类。

内容的提问来源于stack exchange，提问作者Tushar