gpt4 book ai didi

javascript - Babel 7 React 组件的意外标记

转载 作者:行者123 更新时间:2023-12-03 14:25:07 25 4
gpt4 key购买 nike

我正在从 v6 升级到 Babel v7,当我构建项目时,出现以下错误:

语法错误:src\app\layout\components\FooterToolbar.js:意外的标记

Unexpected token <

我正在使用以下 .babelrc 配置

{
"presets": [
["@babel/preset-env", { "useBuiltIns": "usage", "debug": true }],
"@babel/preset-typescript",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-transform-runtime"
]
}

最后这是我的 webpack 配置。我首先将 pollyfills 放在条目中,然后将 index.js 文件放在条目中,然后将 babel-loader 作为转译器

entry: ["@babel/polyfill", paths.appIndexJs],
// Process JS with Babel.
{
test: /\.(js|jsx|mjs|ts|tsx)$/,
exclude: /node_modules/,
include: paths.appSrc,
use: [{ loader: 'babel-loader' }],
},

有什么建议可以解决这个问题吗?非常感谢

编辑:我在这个项目中使用 typescript 。这是 tsconfig.json

{
"compilerOptions": {
"target": "esnext",
"moduleResolution": "node",
"esModuleInterop": true,
"isolatedModules": true,
"strict": true,
"noEmit": true,
"allowJs": true,
"resolveJsonModule": true,
"jsx": "react"
},
"include": [
"src"
]
}

最佳答案

通过更新 webpack、它的插件并在 webpack 配置中添加预设和插件,最终让它开始工作

// Process JS with Babel.
{
test: /\.(js|jsx|mjs|ts|tsx)$/,
exclude: /node_modules/,
include: paths.appSrc,
use: [{
loader: 'babel-loader',
options: {
presets: [
["@babel/preset-env", { modules: "commonjs" }],
"@babel/preset-typescript",
"@babel/preset-react"
],
plugins: [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-transform-runtime"
]
}
}],
},

感谢您的回答,希望这对其他人有用

关于javascript - Babel 7 React 组件的意外标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55497745/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com