[英]Webpack Uncaught ReferenceError: babelHelpers is not defined
im developing a react application.我正在开发一个反应应用程序。 For Routing i use react-router-dom and typesafe-react-router.
对于路由,我使用 react-router-dom 和 typesafe-react-router。 My project is setup with webpack 4 and babel.
我的项目是用 webpack 4 和 babel 设置的。 To use the typesafe router i defined my routes.
为了使用类型安全路由器,我定义了我的路线。
routes.ts路线.ts
import { route } from 'typesafe-react-router';
export enum RouteNames {
HOME = 'HOME',
ABOUT = 'ABOUT'
}
export const Routes = {
[RouteNames.HOME]: route(''),
[RouteNames.ABOUT]: route('about')
};
the routes are also used in other files like the App.tsx路由也用于其他文件,如 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>
during the compilation everything is fine, but i get runtime errors:编译期间一切正常,但出现运行时错误:
routes.ts:8 Uncaught ReferenceError: babelHelpers is not defined
at Module../src/pages/routes.ts (routes.ts:8)
at __webpack_require__ (bootstrap:726)
at fn (bootstrap:100)
at Module../src/pages/index.ts (index.ts:1)
at __webpack_require__ (bootstrap:726)
at fn (bootstrap:100)
at Module../src/app/App.tsx (App.tsx:1)
at __webpack_require__ (bootstrap:726)
at fn (bootstrap:100)
at Module../src/bootstrap/index.tsx (index.tsx:1)
here is my.babelrc file:这是 my.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"
]
}
and here is my webpack.config.js这是我的 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'
})
]
};
i think mybee the issue is with the babel compiler having problems with the exported const enums.我认为 mybee 问题出在 babel 编译器对导出的 const 枚举有问题。 Is there a way to get this language feature of typescript working with babel?
有没有办法让 typescript 的这种语言特性与 babel 一起工作?
Remove the @babel/plugin-external-helpers
and use @babel/plugin-transform-runtime
to load the helpers for you.删除
@babel/plugin-external-helpers
并使用@babel/plugin-transform-runtime
为您加载助手。 The former plugin expects you to provide the helpers, which, for what I see, you're not.前一个插件希望您提供帮助程序,据我所知,您不是。
It looks like you're using @babel/plugin-external-helpers
.看起来您正在使用
@babel/plugin-external-helpers
。 It'll prevent Babel from adding the required helper functions at the top of each file.它会阻止 Babel 在每个文件的顶部添加所需的辅助函数。
You can read more about the plugin in the Babel docs .您可以在 Babel 文档 中阅读有关该插件的更多信息。
To solve your issue, I'd either replace the plugin with @babel/plugin-transform-runtime
or install the required helpers manually.为了解决您的问题,我要么用
@babel/plugin-transform-runtime
替换插件,要么手动安装所需的帮助程序。
Also, it is worth checking related issues on GitHub:此外,值得检查 GitHub 上的相关问题:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.