Babel 7 React组件的意外令牌 [英] Babel 7 Unexpected token for React component

问题描述

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

I'm upgrading to Babel v7 from v6 and when I build the project I get the following error:

语法错误:src \ app \ layout \ components \ FooterToolbar.js:意外令牌

Syntax error: src\app\layout\components\FooterToolbar.js: Unexpected token

我正在使用以下.babelrc配置

I'm using the following .babelrc configuration

{
  "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放入transpiler

And finally this is my webpack config. I put the pollyfills first and then the index.js file in the entry and the babel-loader as transpiler

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' }],
},

是否有解决此问题的建议?非常感谢

Any advice to solve this issue? Thanks a lot

我在这个项目中使用打字稿.这是tsconfig.json

I'm using typescript in this project. This is the 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配置内添加预设和插件使它正常工作

Finally got it to work by updating webpack, its plugins and adding the presets and plugins inside the webpack configuration

// 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"
      ]
    }
  }],
},

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

Thanks for your answers, hopefully this is useful for someone else

这篇关于Babel 7 React组件的意外令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！