SweetAlert2 打字稿 Webpack 构建错误

Question

我不知道为什么在运行默认的"webpack"命令时收到错误。如果我删除">SweetAlert2"，我可以很好地编译我的打字稿。任何帮助和新鲜的眼睛都非常感谢。

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

1. npm install sweetalert2
2. 将键入引用添加到我的打字稿文件
3. 从甜蜜警报2导入SWAL2
4. 在jQuery ready语句中的打字稿文件顶部调用"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:httpMarketing-GitNewAmericanPortal_v2NewAmericanPortal_v2node_moduleswebpacklibNormalModule.js:303:18)
at C:httpMarketing-GitNewAmericanPortal_v2NewAmericanPortal_v2node_modulesloader-runnerlibLoaderRunner.js:370:3
at iterateNormalLoaders (C:httpMarketing-GitNewAmericanPortal_v2NewAmericanPortal_v2node_modulesloader-runnerlibLoaderRunner.js:211:10)
at iterateNormalLoaders (C:httpMarketing-GitNewAmericanPortal_v2NewAmericanPortal_v2node_modulesloader-runnerlibLoaderRunner.js:218:10)
at C:httpMarketing-GitNewAmericanPortal_v2NewAmericanPortal_v2node_modulesloader-runnerlibLoaderRunner.js:233:3
at context.callback (C:httpMarketing-GitNewAmericanPortal_v2NewAmericanPortal_v2node_modulesloader-runnerlibLoaderRunner.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'
});
});

Answer 1

我能够在节点 14 上安装它并且它起作用了。您可能只需要更新节点版本。