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}

包.json

 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}

网页包配置

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

Answer 1

发生这种情况是因为 Babel 转译器必须被告知如何转译一些较新的 JS 功能。空合并运算符就是其中之一。

因此，让你的项目的Babel 配置如下所示：

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

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