webpack - nullish 合并运算符 webpack/bundler 问题

Question

我一直在尝试解决遇到的这个错误。据我所知，这是空合并运算符(??)的问题。我在网上关注了各种文档，但遇到了同样的问题。关于如何更新我的构建器以避免出现此问题有什么想法吗？

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"
        }

webpack 配置

    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),
    };

Answer 1

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

因此，将您的项目设为 Babel config如下所示:

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

第二个，optional chaining ，也是新的，甚至更有用，并且导致相同的 Webpack 错误。所以我把它放在这里。