(Webpack) Uncaught TypeError: Swal.mixin is not a function

Question

我正在使用 webpack 和 webpack-dev-server 来运行我的 React 应用程序。出于某种原因，sweetalert2 包的 require 语句不起作用，当应用程序运行s.

时我得到一个 TypeError

这是原始代码，在 webpack 之前：

const Swal = require('sweetalert2');
const alertToast = Swal.mixin({
  toast            : false
});

以及我在尝试追查问题时在浏览器中看到的“after-webpack”代码：

var Swal = __webpack_require__(/*! sweetalert2 */ "./node_modules/sweetalert2/src/sweetalert2.js");
var alertToast = Swal.mixin({
  toast: false
});

为什么 webpack 在解析此模块时遇到问题？

这是我的 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'
};

我的.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" ]
}

还有我的文件结构

源码
容器
- 仪表板
  - 脚本
    - script_where_sweetalert2_imported
index.js
webpack.config.js
package.json

我正在运行ning webpack-dev-server --mode=development

启动我的应用程序

Answer 1

我通过更改解决了这个问题：

const Swal = require('sweetalert2') 到 import Swal from 'sweetalert2';

(Webpack) Uncaught TypeError: Swal.mixin is not a function

(Webpack) Uncaught TypeError: Swal.mixin is not a function

javascript

node.js

webpack

sweetalert2