如何解决模块构建失败来自 ./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');
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.
{
"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 举报,一经查实,本站将立刻删除。