我正在编译 webpack 5.25.0，在 6734 毫秒内有 7 个警告版本7.167.0，而v8.10.1我得到 1513，它们都是一样的，类似这样，而不是createElement会有另一个反应函数，比如useEffectv8，捆绑需要 5 分钟在开发模式下，虽然使用 v7 需要 10 秒。
在“react”中找不到导出“createElement”（导入为“React”）
这是webpack配置
webpack.common.ts
import path from "path";
import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
import { CleanWebpackPlugin } from "clean-webpack-plugin";
import HtmlWebpackPlugin from "html-webpack-plugin";
const isDevelopment = process.env.NODE_ENV !== "production";
const config = {
target: "web",
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"],
modules: ["node_modules", "."],
alias: {
src: path.resolve(__dirname, "./src"),
// webpack was unable to understand the instance import
// and export, so we have explicitly tell it which comes
// from the node_modules
axios: path.resolve(__dirname, "./node_modules/axios"),
},
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html"),
}),
new ForkTsCheckerWebpackPlugin(),
new CleanWebpackPlugin(),
],
module: {
rules: [
{
// Include ts, tsx, js, and jsx files.
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
// ... other options
plugins: [
// ... other plugins
isDevelopment && require.resolve("react-refresh/babel"),
].filter(Boolean),
},
},
{
test: /\.svg($|\?)/,
use: [
{
loader: "file-loader",
options: {
limit: 65000,
mimetype: "image/svg+xml",
name: "[name].[ext]",
},
},
],
},
{
test: /\.(png|jpg|gif)($|\?)/,
loader: "url-loader",
options: {
limit: 8192,
},
},
{
test: /\.(sa|sc|c)ss$/,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
],
},
};
module.exports = config;
webpack.dev.ts
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
import merge from "webpack-merge";
// @ts-ignore
import common from "./webpack.common";
const config = {
mode: "development",
output: {
publicPath: "/",
},
entry: ["./src/index"],
target: "web",
devtool: "eval-cheap-module-source-map",
plugins: [new ReactRefreshWebpackPlugin()],
devServer: {
clientLogLevel: "error",
port: 4444,
stats: "minimal",
hot: true,
historyApiFallback: true,
},
};
module.exports = merge(common, config);
包装.json
"dependencies": {
"@babel/core": "^7.13.10",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-transform-typescript": "^7.13.0",
"@babel/preset-env": "^7.13.10",
"@babel/preset-react": "^7.12.13",
"@babel/preset-typescript": "^7.13.0",
"@fluentui/react": "^7.167.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"@reduxjs/toolkit": "^1.5.1",
"@testing-library/react-hooks": "^5.1.1",
"@types/jest": "^26.0.20",
"@types/react": "^17.0.3",
"@types/react-dom": "^17.0.2",
"@types/react-redux": "^7.1.16",
"@types/react-router-dom": "^5.1.7",
"@types/redux-logger": "^3.0.8",
"@types/styled-components": "^5.1.9",
"@types/uglifyjs-webpack-plugin": "^1.1.1",
"@types/webpack-bundle-analyzer": "^4.4.0",
"@types/webpack-manifest-plugin": "^3.0.4",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.1.2",
"cypress": "^6.6.0",
"file-loader": "^6.2.0",
"fork-ts-checker-webpack-plugin": "^6.1.1",
"html-webpack-plugin": "^5.3.1",
"jest": "^26.6.3",
"lodash-es": "^4.17.21",
"normalize.css": "^8.0.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.3",
"react-refresh": "^0.9.0",
"react-router-dom": "^5.2.0",
"react-spring": "^9.0.0",
"redux-logger": "^3.0.6",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"styled-components": "^5.2.1",
"ts-node": "^9.1.1",
"type-fest": "^0.21.3",
"typescript": "^4.2.3",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^4.1.1",
"webpack": "^5.25.0",
"webpack-bundle-analyzer": "^4.4.0",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2",
"webpack-manifest-plugin": "^3.1.0",
"webpack-merge": "^5.7.3"
},
至少在 v7 中它正在处理警告，而 v8 也存在 webpack 导出错误。
到目前为止我尝试过的
- 删除 tsconfig，因此它可以使用默认配置。
- 允许合成默认导入
- 移除反应热加载器
- 检查了具有相同版本的 CodeSand 框，一切都在那里工作，所以配置可能有问题。
- 降级到 React 16
样品在这里