通过 webpack 构建服务端渲染，在启动的失败报错 @root-entry-name: default; SyntaxError: Invalid or unexpected token

mac 环境

antd 4.24.7

react 项目同构改造

package.json

"name": "ssr-react-demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/core": "^7.21.8",
"@babel/preset-env": "^7.21.5",
"@babel/preset-react": "^7.18.6",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
"antd": "^4.24.7",
"babel-cli": "^6.26.0",
"babel-loader": "^9.1.2",
"babel-plugin-import": "^1.13.6",
"copy-webpack-plugin": "^11.0.0",
"cross-env": "^7.0.3",
"css-loader": "^6.7.3",
"dotenv-cli": "^7.2.1",
"file-loader": "^6.2.0",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.5.1",
"isomorphic-style-loader": "^5.3.2",
"js-beautify": "^1.14.7",
"koa": "^2.14.2",
"koa-html-minifier": "^3.0.0",
"koa-nunjucks-2": "^3.0.2",
"koa-router": "^12.0.0",
"koa-static": "^5.0.0",
"less": "^3.5.1",
"less-loader": "^6.0.0",
"lodash": "^4.17.21",
"mini-css-extract-plugin": "^2.7.5",
"moment": "^2.29.4",
"pretty-format": "^29.5.0",
"react": "^18.2.0",
"react-app-rewired": "^2.2.1",
"react-dom": "^18.2.0",
"react-redux": "^6.0.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "^5.0.1",
"redux": "^4.0.1",
"redux-thunk": "^2.4.2",
"style-loader": "^3.3.2",
"url-loader": "^4.1.1",
"web-vitals": "^2.1.0",
"webpack": "^5.82.1",
"webpack-cli": "^5.1.1",
"webpack-dev-server": "^4.15.0",
"webpack-encoding-plugin": "^0.3.1",
"webpack-manifest-plugin": "^5.0.0",
"webpack-node-externals": "^3.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"webpack": "cross-env NODE_ENV=production webpack --env prod --progress",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
  "react-app",
  "react-app/jest"
]
},
"browserslist": {
"production": [
  ">0.2%",
  "not dead",
  "not op_mini all"
],
"development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
]
}
}

webpack.config.js


const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const nodeExternals = require('webpack-node-externals');
const {WebpackManifestPlugin} = require('webpack-manifest-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const resolve = { alias: { actions: path.join(__dirname, './src/actions') }, extensions: ['.js', '.jsx'] }

const serverConfig = { target: 'node', entry: './src/server/index.js', resolve, output: { path: path.resolve(__dirname, './dist/server'), filename: '[name].js', libraryTarget: 'commonjs' }, mode: process.env.NODE_ENV, externals: [nodeExternals()], module: { rules: [ { test: /.(jsx|js)?$/, exclude: /node_modules/, use: { loader: 'babel-loader', } }, { test: /.css$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', } ] }, { test: /.less$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', }, { loader: 'less-loader', options: { lessOptions: { javascriptEnabled: true, // 开启 JS 支持 modifyVars: { 'root-entry-name': 'default' } } } } ] }, { test: /.(png|jpeg|jpg|gif|svg)?$/, loader: 'url-loader', options: { limit: 8000, outputPath: '../client', publicPath: '/' } } ] }, };

//客户端 const clientConfig = { entry: './src/client/index.js', output: { filename: '[name].js', path: path.resolve(__dirname, './dist/client'), }, mode: process.env.NODE_ENV, resolve, module: { rules: [ { test: /.(jsx|js)?$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /.css$/, use: [ { loader: MiniCssExtractPlugin.loader, // 代替 style-loader，把css代码单独抽取出来，起到优化作用 }, { loader: 'css-loader', } ], }, { test: /.less$/, use: [ { loader: MiniCssExtractPlugin.loader, // 代替 style-loader，把css代码单独抽取出来，起到优化作用 }, 'css-loader', { loader: 'less-loader', options: { lessOptions: { javascriptEnabled: true, // 开启 JS 支持 modifyVars: { 'root-entry-name': 'default' } } } }, ], }, { test: /.(png|jpeg|jpg|gif|svg)?$/, loader: 'url-loader', options: { limit: 8000, outputPath: '.', publicPath: '/' } } ] },

plugins: [
    // 提取样式，生成单独文件
    new MiniCssExtractPlugin({
        filename: `[name].css`,
        chunkFilename: `[name].chunk.css`
    }),
    new WebpackManifestPlugin({
        fileName: 'manifest.json',
        publicPath: '/'
    }),
    new CopyWebpackPlugin({
        patterns: [
            {from: './src/component/home/template', to: '.'}, // 将public文件夹下的内容复制到输出目录。
        ],
    }),
]

};


3. 通过 node 启动服务报错

/Users/xxx/src/koa-react-ssr-render/node_modules/antd/lib/style/default.less:2 @root-entry-name: default; ^

SyntaxError: Invalid or unexpected token at Object.compileFunction (node:vm:353:18) at wrapSafe (node:internal/modules/cjs/loader:1040:15) at Module._compile (node:internal/modules/cjs/loader:1076:27) at Module._extensions..js (node:internal/modules/cjs/loader:1166:10) at Module.load (node:internal/modules/cjs/loader:988:32) at Module._load (node:internal/modules/cjs/loader:834:12) at Module.require (node:internal/modules/cjs/loader:1012:19) at require (node:internal/modules/cjs/helpers:102:18) at Object. (/Users/xxx/src/koa-react-ssr-render/node_modules/antd/lib/button/style/index.js:3:1) at Module._compile (node:internal/modules/cjs/loader:1112:14) at Module._extensions..js (node:internal/modules/cjs/loader:1166:10) at Module.load (node:internal/modules/cjs/loader:988:32) at Module._load (node:internal/modules/cjs/loader:834:12) at Module.require (node:internal/modules/cjs/loader:1012:19) at require (node:internal/modules/cjs/helpers:102:18) at Object. (/Users/xxx/src/koa-react-ssr-render/app/build/page1.js:1:2171)



是打包成了 js 文件中采用了 `require("antd/lib/message/style")` 方式，在加载 js 文件的时候出现了报错。该怎么进行处理，求个解决方案。

ant-design / ant-design

通过 webpack 构建服务端渲染，在启动的失败报错 @root-entry-name: default; SyntaxError: Invalid or unexpected token #42461