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

Question

我正在使用webpack和webpack-dev-server來運行我的反應應用程序。 由於某種原因， sweetalert2 package 的 require 語句不起作用，並且在應用程序運行時出現 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

我通過運行webpack-dev-server --mode=development來啟動我的應用程序

Answer 1

我通過更改解決了這個問題：

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