[英](Webpack) Uncaught TypeError: Swal.mixin is not a function
I am using webpack
and webpack-dev-server
to run my react app.我正在使用
webpack
和webpack-dev-server
来运行我的反应应用程序。 For some reason the require statement for the sweetalert2
package isn't working, and I get a TypeError when the application runs.由于某种原因,
sweetalert2
package 的 require 语句不起作用,并且在应用程序运行时出现 TypeError。
Here is the original code, before webpack:这是 webpack 之前的原始代码:
const Swal = require('sweetalert2');
const alertToast = Swal.mixin({
toast : false
});
And the "after-webpack" code I can see in the browser when I try to chase the issue:当我尝试解决问题时,我可以在浏览器中看到“after-webpack”代码:
var Swal = __webpack_require__(/*! sweetalert2 */ "./node_modules/sweetalert2/src/sweetalert2.js");
var alertToast = Swal.mixin({
toast: false
});
Why is webpack having an issue resolving this module?为什么 webpack 在解决此模块时遇到问题?
Here is my webpack config:这是我的 webpack 配置:
const HtmlWebPackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
// Config directories
const SRC_DIR = path.resolve(__dirname, 'src');
const OUTPUT_DIR = path.resolve(__dirname, 'build');
// Any directories you will be adding code/files into, need to be
// added to this array so webpack will pick them up
const defaultInclude = [SRC_DIR];
module.exports = {
context: __dirname,
entry : `${SRC_DIR}/index.js`,
output : {
path : OUTPUT_DIR,
publicPath: '/',
filename : 'bundle.js',
pathinfo : true
},
resolve: {
alias: {
src: path.join(__dirname, 'src')
}
},
devServer: {
historyApiFallback: true
},
module: {
rules: [
{
test: /\.(s*)css$/,
use : [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test : /\.js$/,
exclude: /node_modules(?!(\/|\\)js-utils)/,
loader : 'babel-loader'
},
{
test : /\.jsx$/,
exclude: /node_modules(?!(\/|\\)js-utils)/,
loader : 'babel-loader'
},
{
test : /\.(jpe?g|png|gif|JPG|webp)$/,
use : [{ loader: 'file-loader?name=img/[name]__[hash:base64:5].[ext]' }],
include: defaultInclude
},
{
test : /\.(eot|svg|ttf|woff|woff2)$/,
use : [{ loader: 'file-loader?name=font/[name]__[hash:base64:5].[ext]' }],
include: defaultInclude
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: path.resolve(__dirname, 'public/index.html'),
filename: 'index.html'
}),
new CopyWebpackPlugin([
{ from: 'public' }
])
],
target: 'node'
};
My.babelrc我的.babelrc
{
"presets": [
[
"@babel/preset-env", {
"modules": false,
"targets": {
"browsers": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Safari versions",
"last 2 iOS versions",
"last 1 Android version",
"last 1 ChromeAndroid version",
"ie 11"
]
}
}
],
"@babel/preset-react"
],
"plugins": [ "@babel/plugin-proposal-class-properties" ]
}
And my file structure还有我的文件结构
And I am starting my app by running webpack-dev-server --mode=development
我通过运行
webpack-dev-server --mode=development
来启动我的应用程序
I fixed the issue by changing:我通过更改解决了这个问题:
const Swal = require('sweetalert2')
to import Swal from 'sweetalert2';
const Swal = require('sweetalert2')
import Swal from 'sweetalert2';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.