(Webpack) Uncaught TypeError: Swal.mixin не является функцией - PullRequest
Новая
       29

(Webpack) Uncaught TypeError: Swal.mixin не является функцией

0 голосов
/ 02 августа 2020

Я использую webpack и webpack-dev-server для запуска моего приложения реакции. По какой-то причине оператор require для пакета sweetalert2 не работает, и я получаю 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'
};

My .babelr c

{
   "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" ]
}

И моя файловая структура

  • sr c
  • контейнеры
    • Панель инструментов
      • скрипты
        • script_where_sweetalert2_imported
  • index. js
  • webpack.config. js
  • пакет. json

И я запускаю свое приложение, запустив webpack-dev-server --mode=development

1 Ответ

0 голосов
/ 02 августа 2020

Я исправил проблему, изменив:

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

...