javascript - SweetAlert2 Typescript Webpack 构建错误

Question

当我运行默认的“webpack”命令时，我无法弄清楚为什么会收到错误消息。如果我删除“ SweetAlert2 ”，我就可以很好地编译我的打字稿。非常感谢任何帮助和新鲜的眼睛。

这些是我一直在运行以接收编译错误的步骤。

1. npm 安装 sweetalert2
2. 将类型引用添加到我的打字稿文件
3. 从 sweetalert2 导入 swal
4. 在 jQuery 就绪语句中，在我的打字稿文件顶部调用“swal”函数
5. 运行“webpack”命令

然后我在命令窗口中收到以下错误

ERROR in ./node_modules/sweetalert2/dist/sweetalert2.all.js
Module build failed: Error: Final loader (./node_modules/awesome-typescript-loader/dist/entry.js) didn't return a Buffer or String
    at runLoaders (C:\http\Marketing-Git\NewAmericanPortal_v2\NewAmericanPortal_v2\node_modules\webpack\lib\NormalModule.js:303:18)
    at C:\http\Marketing-Git\NewAmericanPortal_v2\NewAmericanPortal_v2\node_modules\loader-runner\lib\LoaderRunner.js:370:3
    at iterateNormalLoaders (C:\http\Marketing-Git\NewAmericanPortal_v2\NewAmericanPortal_v2\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
    at iterateNormalLoaders (C:\http\Marketing-Git\NewAmericanPortal_v2\NewAmericanPortal_v2\node_modules\loader-runner\lib\LoaderRunner.js:218:10)
    at C:\http\Marketing-Git\NewAmericanPortal_v2\NewAmericanPortal_v2\node_modules\loader-runner\lib\LoaderRunner.js:233:3
    at context.callback (C:\http\Marketing-Git\NewAmericanPortal_v2\NewAmericanPortal_v2\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at <anonymous>
    at runMicrotasksCallback (internal/process/next_tick.js:121:5)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./Scripts/search.ts 6:20-42

包.json

    {
  "name": "new-american-portal",
  "version": "1.0.0",
  "description": "this project will replace the new american marketing project to better serve collateral to our customers.",
  "main": "scripts/entry.ts",
  "scripts": {
    "build": "webpack",
    "build-prod": "webpack --mode=production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "http://tfs01:8080/tfs/Marketing-Git/MarketingServices/_git/NewAmericanPortal"
  },
  "keywords": [
    "new",
    "american",
    "portal",
    "new",
    "american",
    "materials"
  ],
  "author": "Jason Spence",
  "license": "ISC",
  "dependencies": {
    "@types/bootstrap": "^4.1.2",
    "@types/file-saver": "^1.3.0",
    "@types/jquery": "^3.3.1",
    "@types/jqueryui": "^1.12.2",
    "@types/slick-carousel": "^1.6.32",
    "bootstrap": "^4.1.1",
    "expose-loader": "^0.7.5",
    "file-saver": "^1.3.8",
    "jquery": "^3.3.1",
    "npm": "^6.4.0",
    "popper.js": "^1.14.3",
    "slick-carousel": "^1.8.1",
    "sweetalert2": "^7.26.12"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^5.0.0",
    "babel-preset-env": "^1.7.0",
    "case-sensitive-paths-webpack-plugin": "^2.1.2",
    "path": "^0.12.7",
    "source-map-loader": "^0.2.3",
    "typescript": "^2.8.3",
    "uglifyjs-webpack-plugin": "^1.3.0",
    "webpack": "^4.8.3",
    "webpack-cli": "^3.1.0"
  }
}

webpack.config

const webpack = require('webpack');
const path = require('path');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');


module.exports = {
    mode: 'development',
    entry: {
        collateral: __dirname + '/Scripts/collateral.ts',
        commonfunc: __dirname + '/Scripts/common-functions.ts',
        home: __dirname + '/Scripts/home.ts',
        myprofile: __dirname + '/Scripts/my-profile.ts',
        search: __dirname + '/Scripts/search.ts',
        favorite: __dirname + '/Scripts/favorite.ts'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'Scripts')
    },
    plugins: [
        new CaseSensitivePathsPlugin({ debug: true })
    ],
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    module: {
        rules: [
            { test: /\.(t|j)sx?$/, use: { loader: 'awesome-typescript-loader' } },
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin()
        ]
    }
}

搜索.ts

// Refs to external libs
/// <reference path ="../node_modules/@types/jquery/index.d.ts" />
/// <reference path ="../node_modules/sweetalert2/sweetalert2.d.ts" />

import swal from 'sweetalert2';
import { UtilityFunctionsService } from './src/services/utliity-functions.services';
import { UserActionService } from './src/services/user-action.services';

import { SearchFilterObject } from './src/models/search-filter.interface';

$(function () {

    swal({
        title: 'Error!',
        text: 'Do you want to continue',
        type: 'error',
        confirmButtonText: 'Cool'
    });

});

标签： javascriptasp.net-mvctypescriptwebpack

Answer 1

我能够在节点 14 上安装它并且它工作正常。您可能只需要更新您的节点版本。