webpack：请求的模块没有提供名为

Question

I am trying to build a js file (which is dependent on node modules) to be used in the browser.我正在尝试构建一个要在浏览器中使用的 js 文件（依赖于节点模块）。 For that, I am using webpack to build it and use the output in a HTML page.为此，我使用 webpack 来构建它并在 HTML 页面中使用 output。

However, in the HTML page, I am getting the following error:但是，在 HTML 页面中，出现以下错误：

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.我使用 webpack 将上述文件转换为 BasicEditor.js。

I then use this file in my HTML page, which is giving me an error:然后我在我的 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>

Here is the package.json这是 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 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'),
  },
};

Answer 1

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.你必须告诉 Webpack 你正在构建一个库，因为 Webpack 积极地删除未使用的死代码。 Additionally, you have to override the defaults to get it to build to ESM.此外，您必须覆盖默认值才能将其构建为 ESM。 (This is why Rollup became so popular for module bundling.) （这就是为什么 Rollup 在模块捆绑方面变得如此流行。）

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.另外，您的 HTML 有./lib但您的配置有./dist — 我认为那是漂移，而不是真正的错误，因为您的错误消息会有所不同。

webpack：请求的模块没有提供名为

问题描述

1 个解决方案

解决方案1
1 已采纳 2023-01-17 04:47:09

webpack：请求的模块没有提供名为

问题描述

1 个解决方案

解决方案1 1 已采纳 2023-01-17 04:47:09

解决方案1
1 已采纳 2023-01-17 04:47:09