Reactjs 网页包未捕获引用错误：未定义babelHelpers

我正在开发一个react应用程序。对于路由，我使用react路由器dom和类型安全react路由器。我的项目是与网页4和巴贝尔设置。为了使用typesafe路由器，我定义了我的路由

路线

import { route } from 'typesafe-react-router';

export enum RouteNames {
  HOME = 'HOME',
  ABOUT = 'ABOUT'
}

export const Routes = {
  [RouteNames.HOME]: route(''),
  [RouteNames.ABOUT]: route('about')
};

路由也用于其他文件，如App.tsx

    <div className="AppContainer">
      <Router>
        <h1>My React App</h1>
        <img src={logo} />
        <div className="NavLink">
          <Link to={Routes[RouteNames.HOME].create({})}>Home</Link>
          {' | '}
          <Link to={Routes[RouteNames.ABOUT].create({})}>About</Link>
        </div>

        <Switch>
          <Route
            path={Routes[RouteNames.HOME].template()}
            exact
            component={HomePage}
          />
          <Route
            path={Routes[RouteNames.ABOUT].template()}
            component={AboutPage}
          />
          <Route component={NotFoundPage} />
        </Switch>
      </Router>
    </div>

这是我的.babelrc文件：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-external-helpers",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

这是我的webpack.config.js

const path = require('path');
const { CheckerPlugin } = require('awesome-typescript-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/bootstrap/index.tsx',
  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.less']
  },
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.min.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|tsx|ts)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'less-loader',
            options: {
              javascriptEnabled: true
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|gif|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CheckerPlugin(),
    new HtmlWebpackPlugin({
      template: './src/bootstrap/index.html'
    })
  ]
};

---

我认为mybee的问题在于babel编译器在导出的常量枚举方面存在问题。有没有办法让typescript的这种语言功能与babel一起工作？

删除

@babel/plugin外部帮助程序

，并使用

@babel/plugin transform runtime

为您加载帮助程序。前一个插件希望您提供帮助，但据我所知，您没有提供帮助。

看起来您正在使用

@babel/plugin外部帮助程序。这将阻止Babel在每个文件的顶部添加所需的助手函数

你可以

为了解决您的问题，我要么用
@babel/plugintransformruntime
替换插件，要么手动安装所需的帮助程序

此外，值得检查GitHub上的相关问题：




出于好奇，
似乎是WebPACK配置问题：您是否考虑过使用<代码>创建反应APP >代码>来不去担心它？
const path = require('path');
const { CheckerPlugin } = require('awesome-typescript-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/bootstrap/index.tsx',
  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.less']
  },
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.min.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|tsx|ts)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'less-loader',
            options: {
              javascriptEnabled: true
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|gif|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CheckerPlugin(),
    new HtmlWebpackPlugin({
      template: './src/bootstrap/index.html'
    })
  ]
};