模块构建失败来自 ./node_modules/babel-loader/lib/index.js：无法读取 null 的属性“绑定”

问题描述

我正在为 phaser3 设置开发环境，并使用 webpack 对其进行了配置。现在，当我尝试从 index.js 文件中的其他文件导入模块时，出现 Module build Failed (from ./node_modules/babel-loader/lib/index.js) 错误。如果我在不导入任何内容的情况下运行代码，一切正常。这是来自两个不同文件的代码：

src/scenes/简单场景

const SimpleSceneModule = (() => {
  const showMessage = (msg) => {
    const element = document.createElement('div');
    element.innerHTML = msg;
    document.body.appendChild(element);
  }


    return { showMessage };
})();

export default SimpleSceneModule;

src/index.js

import 'phaser';
import SimpleSceneModule from './scenes/simple-scene'

SimpleSceneModule.showMessage('Hello World');

运行上面的代码在 webpack cli 上给我一个错误：

ERROR in ./src/scenes/simple-scene.js
Module build Failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: C:\Users\Rumbie\DropBox\Programming closet\microverse projects\phaser-game\src\scenes\simple-scene.js: Cannot read property 'bindings' of null
    at Scope.moveBindingTo (C:\Users\Rumbie\DropBox\Programming closet\microverse projects\phaser-game\node_modules\@babel\traverse\lib\scope\index.js:934:13)
    at Blockscoping.updateScopeInfo (C:\Users\Rumbie\DropBox\Programming closet\microverse projects\phaser-game\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:364:17)
    at Blockscoping.run (C:\Users\Rumbie\DropBox\Programming closet\microverse projects\phaser-game\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:330:12)
    at PluginPass.BlockStatementSwitchStatementProgram (C:\Users\Rumbie\DropBox\Programming closet\microverse projects\phaser-game\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:70:24)
    at newFn (C:\Users\Rumbie\DropBox\Programming closet\microverse projects\phaser-game\node_modules\@babel\traverse\lib\visitors.js:175:21)
    at NodePath._call (C:\Users\Rumbie\DropBox\Programming closet\microverse projects\phaser-game\node_modules\@babel\traverse\lib\path\context.js:55:20)
    at NodePath.call (C:\Users\Rumbie\DropBox\Programming closet\microverse projects\phaser-game\node_modules\@babel\traverse\lib\path\context.js:42:17)
    at NodePath.visit (C:\Users\Rumbie\DropBox\Programming closet\microverse projects\phaser-game\node_modules\@babel\traverse\lib\path\context.js:92:31)
    at TraversalContext.visitQueue (C:\Users\Rumbie\DropBox\Programming closet\microverse projects\phaser-game\node_modules\@babel\traverse\lib\context.js:115:16)
    at TraversalContext.visitSingle (C:\Users\Rumbie\DropBox\Programming closet\microverse projects\phaser-game\node_modules\@babel\traverse\lib\context.js:84:19)
 @ ./src/index.js 5:19-51

webpack 5.15.0 compiled with 1 error in 77 ms
i ｢wdm｣: Failed to compile.

这是我在 package.json 文件中的内容：

{
  "name": "phaser-game","version": "1.0.0","description": "Phaser capstone project","scripts": {
    "dev": "webpack --mode development","build": "webpack --mode production","start": "webpack serve --mode development --open"
  },"repository": {
    "type": "","url": ""
  },"author": "","license": "ISC","bugs": {
    "url": ""
  },"homepage": "","devDependencies": {
    "babel-core": "^6.26.3","babel-eslint": "10.1.x","babel-loader": "^8.2.2","babel-preset-env": "^1.7.0","copy-webpack-plugin": "^7.0.0","eslint": "6.8.x","eslint-config-airbnb-base": "14.1.x","eslint-plugin-import": "2.20.x","stylelint": "13.3.x","stylelint-config-standard": "20.0.x","stylelint-csstree-validator": "^1.9.0","stylelint-scss": "3.17.x","webpack": "^5.14.0","webpack-cli": "^4.3.1","webpack-dev-server": "^3.11.2"
  },"dependencies": {
    "phaser": "^3.52.0"
  }
}

我以这种方式配置了 webpack.config.js 文件：

const path = require('path');
const copyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/index.js',},output: {
    path: path.resolve(__dirname,'build'),filename: 'app.bundle.js',module: {
    rules: [
      {
        test: /\.js$/,include: path.resolve(__dirname,'src/'),use: {
          loader: 'babel-loader',options: {
            presets: ['env'],],devServer: {
    contentBase: path.resolve(__dirname,plugins: [
    new copyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname,'index.html'),to: path.resolve(__dirname,}),new webpack.DefinePlugin({
      'typeof CANVAS_RENDERER': JSON.stringify(true),'typeof WEBGL_RENDERER': JSON.stringify(true),})
  ],};

如果我在一个文件中运行整个代码，例如 src/index.js 一切正常，当我尝试导出和导入文件时会弹出错误，如果有人能帮助我，我将不胜感激。提前致谢:)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ecmascript-6 es6-modules game-development javascript webpack-4