空合并运算符webpack/捆绑器问题

3pmvbmvn  于 2022-11-13  发布在  Webpack
关注(0)|答案(1)|浏览(165)

我一直在尝试解决这个错误。从我可以告诉它的问题与空合并操作符(??)。我已经遵循了各种在线文档,但我得到了同样的问题。有什么想法如何更新我的建设者没有这个问题?
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

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

r6l8ljro1#

发生这种情况是因为Babel transpiler必须被告知如何转换一些较新的JS特性。Nullish coalescing opeartor就是其中之一。
因此,请将项目的Babel config设置为如下所示:

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

第二个,optional chaining,也是新的,甚至更有用,并导致同样的Webpack错误。

相关问题