我在使用 Node 17.7.1 构建 Node.js React 组件时遇到错误。我怀疑这是由于 babel 没有在生产模式下转译源文件，因此 '<' character is encountered by the minifier in production mode. This however works with
mode=development我对 node.js 和 webpack 非常陌生，很可能我在这里遗漏了一些东西。请指教。
谢谢
npm run build -- --mode production --env customoutdir=.\testit"
> [email protected] build
> webpack --config webpack.prod.config.js "--mode" "production" "--env" "customoutdir=.\\testit"
customoutdir: .\\testit
assets by status 202 KiB [cached] 11 assets
orphan modules 244 KiB [orphan] 24 modules
runtime modules 939 bytes 4 modules
cacheable modules 385 KiB
modules by path ./node_modules/ 141 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.75 KiB 6 modules
modules by path ./node_modules/react/ 6.48 KiB 2 modules
modules by path ./node_modules/react-dom/ 119 KiB 2 modules
modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 2.33 KiB 2 modules
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/ 245 KiB
./src/index.js + 23 modules 244 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/App.css 638 bytes [built] [code generated]
ERROR in src/index.js
src/index.js from Terser plugin
Unexpected token: operator (<) [src/index.js:7,2]
at js_error (c:\myproject\node_modules\terser\dist\bundle.min.js:550:11)
at croak (c:\myproject\node_modules\terser\dist\bundle.min.js:1274:9)
at token_error (c:\myproject\node_modules\terser\dist\bundle.min.js:1282:9)
at unexpected (c:\myproject\node_modules\terser\dist\bundle.min.js:1288:9)
at expr_atom (c:\myproject\node_modules\terser\dist\bundle.min.js:2525:9)
at maybe_unary (c:\myproject\node_modules\terser\dist\bundle.min.js:3310:19)
at expr_ops (c:\myproject\node_modules\terser\dist\bundle.min.js:3361:24)
at maybe_conditional (c:\myproject\node_modules\terser\dist\bundle.min.js:3366:20)
at maybe_assign (c:\myproject\node_modules\terser\dist\bundle.min.js:3443:20)
at expression (c:\myproject\node_modules\terser\dist\bundle.min.js:3468:24)
ERROR in src/App.js
src/App.js from Terser plugin
Unexpected token: operator (<) [src/App.js:69,11]
at js_error (c:\myproject\node_modules\terser\dist\bundle.min.js:550:11)
at croak (c:\myproject\node_modules\terser\dist\bundle.min.js:1274:9)
at token_error (c:\myproject\node_modules\terser\dist\bundle.min.js:1282:9)
at unexpected (c:\myproject\node_modules\terser\dist\bundle.min.js:1288:9)
at expr_atom (c:\myproject\node_modules\terser\dist\bundle.min.js:2525:9)
at maybe_unary (c:\myproject\node_modules\terser\dist\bundle.min.js:3310:19)
at expr_ops (c:\myproject\node_modules\terser\dist\bundle.min.js:3361:24)
at maybe_conditional (c:\myproject\node_modules\terser\dist\bundle.min.js:3366:20)
at maybe_assign (c:\myproject\node_modules\terser\dist\bundle.min.js:3443:20)
at expression (c:\myproject\node_modules\terser\dist\bundle.min.js:3468:24)
webpack 5.70.0 compiled with 2 errors in 4429 ms
我的 package.json 看起来像这样：
{
"name": "myproject",
"version": "0.0.1",
"private": true,
"dependencies": {
"@babel/cli": "^7.17.6",
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/plugin-proposal-decorators": "^7.17.2",
"@babel/plugin-transform-runtime": "^7.17.0",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"babel-plugin-inline-json-import": "^0.3.2",
"copy-webpack-plugin": "^10.2.4",
"mobx": "^6.4.2",
"mobx-react": "^7.3.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"webpack": "5.70.0",
"webpack-cli": "^4.9.2"
},
"devDependencies": {
"@babel/core": "^7.17.5",
"babel-loader": "^8.2.3"
},
"scripts": {
"start": "react-scripts start",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build": "webpack --config webpack.prod.config.js",
"build-watch": "webpack --config webpack.prod.config.js --watch"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
我的 webpack.prod.config.js 看起来像这样：
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = (env) => {
console.log('customoutdir:', env.customoutdir);
return {
entry: './src/index.js',
mode: "development",
output: {
path: path.resolve(__dirname, env.customoutdir),
filename: 'index.js',
},
module: {
rules: [
{
test: /\.m?js$/,
include: path.resolve(__dirname, 'src'),
exclude: /node_modules|.html/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-react']
]
}
}
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(gif|svg|jpg|png)$/,
loader: "file-loader",
}
]
},
resolve: {
extensions: [".js", ".jsx"]
},
plugins: [
new CopyPlugin({patterns: [
{ from: 'public/index.html', to: 'index.html' },
{ from: '.debug', to: '.debug', toType: 'file' },
{ from: 'src', to: 'src' },
]}),
],
}
};
我的 Index.js 看起来像这样：
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import App from './App';
ReactDOM.render(
**// this is the offending line in the error log**
<Provider>
<App />
</Provider>
, document.getElementById('root')
);
我的 App.js 看起来像这样：
import React from "react";
import './App.css';
class App extends React.Component {
componentDidMount() {
// blah
}
// blah
render() {
**// this is the offending line in the error log**
return <div className="centerDiv">
<p>My project landing page...</p>
<progress />
</div>
}
}
export default App;
https://stackoverflow.com/users/4410674/nick-bailey在对问题的评论中建议的是正确的，使用.jsx
解决了这个问题。