我一直在尝试解决这个错误。从我可以告诉它的问题与空合并操作符(??)。我已经遵循了各种在线文档,但我得到了同样的问题。有什么想法如何更新我的建设者没有这个问题?
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),
};
1条答案
按热度按时间r6l8ljro1#
发生这种情况是因为Babel transpiler必须被告知如何转换一些较新的JS特性。Nullish coalescing opeartor就是其中之一。
因此,请将项目的Babel config设置为如下所示:
第二个,optional chaining,也是新的,甚至更有用,并导致同样的Webpack错误。