reactjs - Webpack - 类型错误 : $ is not a function

Question

我是 webpack 的新手，我正在使用 webpack 创建一个 React 应用程序。我在编译 TypeError: $ is not a function 时收到此错误。

我没有使用 jquery，但我的节点模块包含一些第三方库。

我只能找到一篇与此问题相关的文章，但它与 jquery 相关。 Webpack - $ is not a function

我的 webpack 和 babel 配置有什么问题吗:

webpack.config.js

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = (env) => {
	console.log("WEBPACK ENV: ", env);

	const isDevMode = env !== "production";

	let config = {
		entry: ["./src/index.js"],
		output: {
			path: path.resolve(__dirname, "dist"),
			filename: "[name].[contenthash].js"
		},
		resolve: {
			extensions: [".js", ".jsx"]
		},
		plugins: [
			new CleanWebpackPlugin(),
			new FaviconsWebpackPlugin("./src/logo.png"),
			new HtmlWebpackPlugin({
				template: "./src/index.html",
				minify: {
					collapseInlineTagWhitespace: true,
					collapseWhitespace: true,
					removeComments: true,
					removeRedundantAttributes: true
				}
			}),
			new MiniCssExtractPlugin({
				filename: "[name].[contenthash].css"
			})
		],
		module: {
			rules: [
				{
					test: /\.scss$/,
					use: ["css-loader", "sass-loader"]
				},
				{
					test: /\.jsx?$/,
					exclude: /node_modules\/(?!(sdk1|sdk2)\/).*/,
					use: ["babel-loader"]
				},
				{
					test: /\.(ac3|gif|jpe?g|m4a|mp3|ogg|png|svg|otf)$/,
					loader: "file-loader",
					options: {
						outputPath: "./assets"
					}
				}
			]
		},
		optimization: {
			minimize: true,
			minimizer: [new OptimizeCssAssetsPlugin(), new TerserPlugin()],
			splitChunks: {
				cacheGroups: {
					vendors: {
						test: /[\\/]node_modules[\\/]/,
						name: "vendors",
						chunks: "all"
					}
				}
			}
		}
	};

	// Mode
	config.mode = isDevMode ? "development" : "production";

	// Dev Tools
	config.devtool = isDevMode ? "inline-source-map" : false;

	// Plugins
	if (!isDevMode) {
		config.plugins.push(new BundleAnalyzerPlugin({ analyzerPort: 8181 }));
	}

	// Dev Server
	if (isDevMode) {
		config.devServer = {};
		config.devServer.disableHostCheck = true;
	}

	return config;
};

babel.config.js

module.exports = {
	plugins: [
		"@babel/plugin-syntax-dynamic-import",
		"@babel/plugin-transform-object-assign",
		[
			require.resolve("babel-plugin-module-resolver"),
			{
				root: ["./src/"],
				alias: {
					js: "./src/js",
					scss: "./src/scss",
					components: "./src/js/components",
					containers: "./src/js/containers",
					phaser_path: "./src/js/phaser",
					services: "./src/js/services",
					constants: "./src/js/constants"
				}
			}
		]
	],
	presets: [
		[
			"@babel/preset-env",
			{
				useBuiltIns: "usage",
				corejs: 3,
				modules: false,
				debug: true,
				targets: {
					browsers: [">0.25%", "ie >= 11"]
				}
			}
		],
		[
			"@babel/preset-react",
			{
				development: true
			}
		]
	]
};

我认为它与 html-webpack-plugin 有关，但我不确定。如有任何帮助，我们将不胜感激。

谢谢

Answer 1

我目前正在使用它作为 polyfill 的解决方法，因为 useBuiltIns 属性对我不起作用。

安装了以下软件包:babel-polyfill、es6-promise、whatwg-fetch

npm 我 babel-polyfill

npm i --save-dev es6-promise Whatwg-fetch

在 webpack.config.js 中做了这些更改

1. 要求 es6-promise 位于顶部 require("es6-promise").polyfill();
2. 将 whatwg-fetch 和 babel-polyfill 添加到配置中的 entry 属性，如下所示
   条目:[“whatwg-fetch”，“babel-polyfill”，“./src/index.js”]