Webpack - TypeError: $ не является функцией - PullRequest
Новая
       69

Webpack - TypeError: $ не является функцией

3 голосов
/ 25 марта 2020

Я новичок в вебпаке и создаю реактивное приложение, используя вебпак. Я получаю эту ошибку при компиляции TypeError: $ is not a function.

enter image description here

Я не использую jquery, но мои модули узлов включают некоторые сторонние библиотеки.

Мне удалось найти только одну статью по этой проблеме, но она связана с jquery. Webpack - $ не является функцией

Что-то не так с моей конфигурацией 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, но я точно не знаю. Любая помощь приветствуется.

Спасибо

1 Ответ

0 голосов
/ 15 апреля 2020

В настоящее время я использую это в качестве обходного пути к polyfill, поскольку свойство useBuiltIns не работает для меня.

Установлены следующие пакеты: babel-polyfill, es6-обещание, whatwg-fetch

npm i babel-polyfill

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

В webpack.config. js внесены эти изменения

  1. Требуется обещание es6 сверху require("es6-promise").polyfill();
  2. Добавьте whatwg-fetch и babel-polyfill к свойству entry в конфигурации следующим образом:
    entry: ["whatwg-fetch", "babel-polyfill", "./src/index.js"]
...