[英]Webpack Uncaught ReferenceError: babelHelpers is not defined
我正在開發一個反應應用程序。 對於路由,我使用 react-router-dom 和 typesafe-react-router。 我的項目是用 webpack 4 和 babel 設置的。 為了使用類型安全路由器,我定義了我的路線。
路線.ts
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>
編譯期間一切正常,但出現運行時錯誤:
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)
這是 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"
]
}
這是我的 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 編譯器對導出的 const 枚舉有問題。 有沒有辦法讓 typescript 的這種語言特性與 babel 一起工作?
刪除@babel/plugin-external-helpers
並使用@babel/plugin-transform-runtime
為您加載助手。 前一個插件希望您提供幫助程序,據我所知,您不是。
看起來您正在使用@babel/plugin-external-helpers
。 它會阻止 Babel 在每個文件的頂部添加所需的輔助函數。
為了解決您的問題,我要么用@babel/plugin-transform-runtime
替換插件,要么手動安裝所需的幫助程序。
此外,值得檢查 GitHub 上的相關問題:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.