因此,在构建用于生产的代码时,webpack出现了问题(此错误仅在为prod进行构建时附加,而在将webpack与devServer一起使用时不会附加)。
这是错误:
vendors.js:21 Uncaught TypeError: Super expression must either be null or a function, not undefined
(例如,在使用http-server
启动构建的项目后,此错误出现在浏览器的控制台中)
我不认为此错误是由于我的webpack配置所致,因为我在许多其他项目中都使用了此配置,并且从未遇到过问题。
但是我留给你(以防万一):
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const host = 'localhost';
const port = 3000;
const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
mode: 'development',
resolve: {
alias: {
src: path.resolve(__dirname, 'src/')
}
},
// Inputs
entry: {
app: [
// Styles
'./src/styles/index.sass',
// JS
'./src/index.js'
]
},
// Outputs
output: {
filename: 'app.js',
chunkFilename: 'vendors.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
optimization: {
splitChunks: {
chunks: 'all'
},
minimizer: [
new TerserPlugin(),
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: false
}),
new OptimizeCSSAssetsPlugin({})
]
},
// Modules
module: {
rules: [
// JS
{
test: /\.js$/,
exclude: /node_modules|src\/modules/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
]
},
// CSS / SASS / SCSS
{
test: /\.(sa|sc|c)ss$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')],
sourceMap: true
}
},
// SASS
'sass-loader'
]
},
// Inages
{
test: /\.(png|svg|jpg|gif|eot|woff|woff2|ttf)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'assets/'
}
}
]
}
]
},
devServer: {
overlay: true,
stats: 'minimal',
progress: true,
inline: true,
open: true,
historyApiFallback: true,
host: host,
port: port
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
]
};
我确实认为(但我可能错了),问题出在我的依赖项上(可能是多个包之间的冲突):
{
"name": "react-modele",
"private": false,
"version": "1.0.0",
"license": "MIT",
"devDependencies": {
"@babel/core": "*",
"@babel/plugin-proposal-class-properties": "*",
"@babel/plugin-proposal-object-rest-spread": "*",
"@babel/preset-env": "*",
"@babel/preset-react": "*",
"@babel/preset-typescript": "^7.3.3",
"@types/react": "^16.8.17",
"@types/source-map": "0.5.2",
"@typescript-eslint/eslint-plugin": "^1.7.0",
"@typescript-eslint/parser": "^1.7.0",
"autoprefixer": "*",
"babel-eslint": "*",
"babel-loader": "*",
"chai": "*",
"css-loader": "*",
"enzyme": "*",
"enzyme-adapter-react-16": "*",
"eslint": "*",
"eslint-config-airbnb": "*",
"eslint-config-prettier": "*",
"eslint-import-resolver-webpack": "*",
"eslint-plugin-import": "*",
"eslint-plugin-jsx-a11y": "*",
"eslint-plugin-prettier": "*",
"eslint-plugin-react": "*",
"file-loader": "^3.0.1",
"html-webpack-plugin": "*",
"ignore-styles": "*",
"jsdom": "*",
"mini-css-extract-plugin": "*",
"mocha": "*",
"node-sass": "*",
"optimize-css-assets-webpack-plugin": "*",
"postcss": "*",
"postcss-loader": "*",
"prettier": "*",
"sass-loader": "*",
"style-loader": "*",
"tslint": "^5.16.0",
"tslint-config-prettier": "^1.18.0",
"tslint-react": "^4.0.0",
"uglifyjs-webpack-plugin": "*",
"webpack": "^4.31.0",
"webpack-cli": "*",
"webpack-dev-server": "*"
},
"scripts": {
"test": "NODE_PATH=./ mocha --require babel-core/register --require tests/.setup.js tests/**/*.test.js",
"start": "webpack-dev-server",
"clean": "rm -rf dist",
"clean:all": "rm -rf dist node_modules",
"build:dev": "NODE_ENV=development webpack",
"build:dev:win": "set NODE_ENV=development && webpack",
"build:prod": "NODE_ENV=production webpack --mode production",
"build:prod:win": "set NODE_ENV=production && webpack --mode production",
},
"dependencies": {
"@babel/polyfill": "*",
"axios": "*",
"classnames": "*",
"http-server": "^0.11.1",
"prop-types": "*",
"react": "16.7.0-alpha.2",
"react-burger-menu": "^2.6.10",
"react-dom": "16.7.0-alpha.2",
"react-icons": "^3.6.1",
"react-image-puzzle": "^0.1.1",
"react-redux": "*",
"react-responsive": "^6.1.2",
"react-router-dom": "^5.0.0",
"redux": "*",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.86.0",
"slugify": "^1.3.4",
"url-loader": "^1.1.2"
}
}
是的,在我的webpack配置中有一些打字稿依赖关系,但没有任何支持。这是因为我在此项目中部分使用了打字稿,但问题并非出自这里。我删除了webpack配置和项目中的所有ts集成,问题仍然存在。
我正在使用yarn,因此我尝试删除了yarn.lock文件,但没有帮助。
此错误并非来自我的代码。我只测试了其中带有h1
的一个组件,但不能解决问题。