时间戳

首页 > 解决方案 > typescript 和 sweetalert2 未捕获的 ReferenceError：未定义导出

javascript - typescript 和 sweetalert2 未捕获的 ReferenceError：未定义导出

问题描述

开始了一个全新的 .net core 2.0 项目来开始学习，我选择使用和学习 typescript。我一直在关注位于此处的指南：打字稿指南

这可以编译并正常工作。

然后我想使用我过去使用过的 sweetalert2，我按照这些说明sweetalert2

我在 ts 文件中创建了一个简单的 helloWorld()

import swal from 'sweetalert2'

function swalHelloWorld() {
    swal('hello world!');
}

它也在我的 www 文件夹的 js 文件中编译

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var sweetalert2_1 = require("sweetalert2");
function swalHelloWorld() {
    sweetalert2_1.default('hello world!');
}

并包含在 _layout 页面中

现在当我运行我的项目时，我得到以下错误

未捕获的 ReferenceError：未在 app.js:2（匿名）@ app.js:2 处定义导出

第2行如下

Object.defineProperty(exports, "__esModule", { value: true });

我尝试按照此处的指南进行更正，但这没有帮助

我的 tsconfig.json 是

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "sourceMap": true,
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node"
  },
  "files": [
    "./scripts/app.ts"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
  "compileOnSave": true
}

我不确定如何解决这个问题

网络包配置

var path = require('path');

module.exports = {
    entry: {
        site: [
            './Scripts/app.ts']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'wwwroot/dist/')
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    }
};

git repo：https ://github.com/iamthebarnsley/TSExample

标签： javascripttypescriptwebpackasp.net-core-2.0

解决方案

It looks like your HTML page is still referencing app.js. If you wanted to follow the guide you linked, the HTML page should instead reference the bundle.js file produced by Webpack.

Round 2

If you want to call swalHelloWorld from your HTML with <input id="swalalert" type="button" value="swal alert" onclick="swalHelloWorld();" />, then you need to define swalHelloWorld globally:

import swal from 'sweetalert2'

function swalHelloWorld() {
    swal('hello from sweet alert');
}
(<any>window).swalHelloWorld = swalHelloWorld;

Without this, Webpack is being clever and realizing there is no way to call swalHelloWorld (since it is not exported from the module either) and omitting it from the output. When I make this change and also replace build/app.js with dist/bundle.js in the HTML as previously discussed, the alert is working for me.

Update, 2018-09-30

I learned about a cleaner solution: add the library option to the Webpack configuration as shown here with a name of your choice (for example, swalHelloWorld), and that will define a global variable named swalHelloWorld representing the entire entry-point module. Then if you export a function from the module:

import swal from 'sweetalert2'

export function swalHelloWorld() {
    swal('hello from sweet alert');
}

the HTML will be able to call it as swalHelloWorld.swalHelloWorld(...) or similar.

推荐阅读