Babel 7 React组件的意外令牌

时间:2019-04-03 14:34:52

标签: javascript reactjs typescript webpack babeljs

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

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

Unexpected token <

我正在使用以下.babelrc配置

getNumberOfUnreadEmails() {
   return this.getUnreadEmails().value.length();
}

最后这是我的webpack配置。我首先将pollyfills放在条目中,然后将index.js文件放在条目中,并将babel-loader放入transpiler

{
  "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"
  ]
}
entry: ["@babel/polyfill", paths.appIndexJs],

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

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

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

1 个答案:

答案 0 :(得分:0)

最后通过更新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"
      ]
    }
  }],
},

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

相关问题