如何解决React 和 Webpack:“未捕获的 ReferenceError:需要未定义”
我正在尝试将我的 Webpack (5.42.0) webpack.config.js
从使用 require() (Commonjs) 重写为使用 import from (ESM) .但是每当我尝试加载我的页面时,我都会得到:
Uncaught ReferenceError: require is not defined
at Module../some/path/file.js (login.bundle.js:10731)
at Module.options.factory (react refresh:6)
at __webpack_require__ (bootstrap:24)
at fn (hot module replacement:61)
at Module../some/path/util.js (login.bundle.js:10564)
at Module.options.factory (react refresh:6)
at __webpack_require__ (bootstrap:24)
at fn (hot module replacement:61)
at Module../some/path/module/Module.jsx (OtherFile.jsx:37)
at Module.options.factory (react refresh:6)
我无法弄清楚导致此错误的原因。 Webpack 设置中有很多活动部分,但我猜测 require
未添加到包中的原因可能是因为 Babel 配置问题?
我正在使用热模块替换、各种插件(Terser 等)。下面添加了 package.json
和 webpack.config.js
的摘录。我认为包括所有相关行:
// package.json excerpt:
{
"type": "module","scripts": {
"build": "webpack --config webpack.config.js"
},}
// webpack.config.js excerpt:
import path from 'path';
import webpack from 'webpack';
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import TerserPlugin from 'terser-webpack-plugin';
const config = () => {
return {
module: {
rules: [
{
test: /\.(js|jsx)$/,loader: 'babel-loader',options: {
presets: ['@babel/env','@babel/react'],plugins: ['react-refresh/babel'],},resolve: {
fullySpecified: false,}
},],entry: {
main: [
`webpack-dev-server/client?http://localhost:3500/`,'./app/App.jsx',output: {
filename: '[name]/[name].bundle.js',path: path.resolve(__dirname,'backend/path/bundles'),publicPath: 'http://localhost:3500/',// …etc…
};
};
解决方法
这是否回答了您的问题:How can I use ES6 in webpack.config.js??
长话短说,webpack.config.js 是用 Node 解析的,它默认不支持 es6。不过,您可以将配置文件重命名为 webpack.config.babel.js
。
话虽如此,在这样的文件中使用导入语法并不重要,require
对我来说看起来不错。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。