无效的合并操作员 webpack/bundle 问题

我一直在尝试解决我得到的这个错误。据我所知,这是无效合并运算符(??)的问题。我在网上关注了各种文档,但我遇到了同样的问题。关于如何更新我的构建器以使其没有此问题的任何想法?

https://babeljs.io/docs/en/babel-plugin-syntax-nullish-coalescing-operator

错误

 Uncaught Error: Module parse failed: Unexpected token (129:61)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   const transformOuterRef = React.useRef(null);
|   const transformInnerRef = React.useRef(null);
>   const target = (portal == null ? void 0 : portal.current) ?? gl.domElement.parentNode;
|   React.useEffect(() => {
|     if (group.current) {
    at eval (webpack:///./node_modules/@react-three/drei/web/Html.js?:1)
    at Object../node_modules/@react-three/drei/web/Html.js (bundle.js:2069)
    at __webpack_require__ (bundle.js:793)
    at fn (bundle.js:101)
    at eval (webpack:///./node_modules/@react-three/drei/index.js?:2)
    at Module../node_modules/@react-three/drei/index.js (bundle.js:1986)
    at __webpack_require__ (bundle.js:793)
    at fn (bundle.js:101)
    at Module.eval (webpack:///./src/components/3d/Model.js?:5)
    at eval (webpack:///./src/components/3d/Model.js?:169)
client:48 [WDS] Hot Module Replacement enabled.
client:52 [WDS] Live Reloading enabled.
client:150 [WDS] Errors while compiling. Reload prevented.
errors @ client:150
client:159 ./node_modules/@react-three/drei/core/softShadows.js 11:40
Module parse failed: Unexpected token (11:40)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   rings = 11
| } = {}) => `#define LIGHT_WORLD_SIZE ${size}
> #define LIGHT_FRUSTUM_WIDTH ${frustrum ?? frustum}
| #define LIGHT_SIZE_UV (LIGHT_WORLD_SIZE / LIGHT_FRUSTUM_WIDTH)
| #define NEAR_PLANE ${near}

package.json

"dependencies": {
        "@react-three/drei": "^5.1.2",
        "@react-three/fiber": "^6.1.5",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-three-fiber": "^4.2.21",
        "three": "^0.128.0"
    },
    "devDependencies": {
        "@babel/core": "^7.11.6",
        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.2",
        "@babel/preset-env": "^7.11.5",
        "@babel/preset-react": "^7.10.4",
        "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
        "babel-loader": "^8.1.0",
        "css-loader": "^4.3.0",
        "dei": "^0.1.0",
        "html-webpack-plugin": "^4.4.1",
        "react-refresh": "^0.8.3",
        "style-loader": "^1.2.1",
        "webpack": "^4.44.1",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.0"
    },
    "scripts": {
        "build": "webpack --mode production",
        "start": "webpack-dev-server --mode development",
        "test": "echo "Error: no test specified" && exit 1"

网络包

const path = require('path');
const htmlWebpack = require('html-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    devServer: {
        port: 3000,
        host: '0.0.0.0',
        disableHostCheck: true,
        useLocalIp: true,
        open: true,
        hot: true,
    },
    mode: isDevelopment ? 'development' : 'production',
    module: {
        rules: [
            {
                test: /.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: require.resolve('babel-loader'),
                    options: {
                        plugins: [
                            isDevelopment &&
                                require.resolve('react-refresh/babel') &&
                                '@babel/plugin-syntax-nullish-coalescing-operator',
                        ].filter(Boolean),
                    },
                },
            },
            {
                test: /.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    plugins: [
        new htmlWebpack({
            template: './src/index.html',
        }),
        isDevelopment && new ReactRefreshWebpackPlugin(),
    ].filter(Boolean),
};
stack overflow nullish coalescing operator webpack/bundler issues
原文答案

答案:

作者头像

发生这种情况是因为必须告诉 Babel 转译器如何转译一些较新的 JS 功能。 Nullish coalescing opeartor 就在其中。

所以让你的项目的 Babel config 看起来如下:

module.exports = {
    plugins: [
        ['@babel/plugin-proposal-nullish-coalescing-operator'],
        ['@babel/plugin-proposal-optional-chaining']
    ]
}

第二个, optional chaining ,也是新的,更有用并且会导致相同的 Webpack 错误。所以我把它包括在这里。