尝试按照官方手册实现一个模块,我得到这个错误消息:

Uncaught ReferenceError:未定义exports 在app.js: 2

但在我的代码中,我从未使用过名称exports。

我该如何解决这个问题?


文件

app.ts

let a = 2;
let b:number = 3;

import Person = require ('./mods/module-1');

模块- 1. t

 export class Person {
  constructor(){
    console.log('Person Class');
  }
}
export default Person;

tsconfig.json

{
   "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": true,
        "outDir": "scripts/"
    },
    "exclude": [
        "node_modules"
    ]
}

当前回答

试试@iFreilicht上面建议的方法。如果在你安装了webpack之后没有工作,你可能只是从网上的某个地方复制了一个webpack配置,并在那里配置了你想要输出支持CommonJS的错误。确保在webpack.config.js中不是这样:

module.exports = {
  mode: process.env.NODE_ENV || "development",
  entry: { 
    index: "./src/js/index.ts"
  },
  ...
  ...
  output: {
    libraryTarget: 'commonjs',         <==== DELETE THIS LINE
    path: path.join(__dirname, 'build'),
    filename: "[name].bundle.js"
  }
};

其他回答

我也犯了同样的错误。在我的例子中,这是因为我们在我们的TypeScript AngularJS项目中有一个老式的import语句,像这样:

import { IAttributes, IScope } from "angular";

它被编译成这样的JavaScript:

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

这在以前是需要的,因为我们在代码中使用了IAttributes,否则TypeScript不知道该用它做什么。 但是在删除import语句并将IAttributes转换为ng之后。IAttributes这两行JavaScript代码消失了——错误消息也消失了。

没有直接回答这个问题,但是没有stackoverflow线程提到这种情况,我花了一段时间来调试,所以在这里添加它,以防将来它可以帮助别人。

我有错误“导出未定义”来自导入的NPM模块。改变我的typescript配置没有任何作用,因为我无法控制导入的第三方代码。问题是该包的导入语法无效。例如,我已经导入了“@mui/material/TextField/TextField”,但正确的导入应该是“@mui/material/TextField”。

我在切换到“Node 16 + ESM + strict”tsconfig.json后不久就遇到了这个错误。

我认为ESM的改变是造成这种情况的原因。

我必须对文件进行等分,以找出根本原因:

exports.webhookTaskProcessor = functions.firestore
  .document("items/{itemId}/tasks/{taskId}")
  .onCreate((_change, context) => {
    processItemTasks(context.params.itemId);
  });

这就解决了问题:

export const webhookTaskProcessor = functions.firestore
  .document("items/{itemId}/tasks/{taskId}")
  .onCreate((_change, context) => {
    processItemTasks(context.params.itemId);
  });

如果错误信息更有用一点,那就太棒了。我希望这条面包屑对你有用。

注意:这可能不适用于OP的答案,但我得到了这个错误,这就是我解决它的方式。

所以我面临的问题是,当我从一个特定的CDN检索一个'js'库时,我得到了这个错误。

我做的唯一错误的事情是从CDN的cjs目录导入,就像这样: https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.0/dist/cjs/popper.min.js

注意到dist/cjs部分了吗?这就是问题所在。

在我的例子中,我回到CDN (jsdelivr)并导航到umd文件夹。我可以找到另一组popper.min.js,这是要导入的正确文件: https://cdn.jsdelivr.net/npm/@popperjs core@2.4.0 / dist / / popper.min.js umd格式。

由于ES5/ES2009不支持客户端/浏览器上的模块(导入/导出/要求),你必须使用库,它将模块捆绑到一个文件中,可以通过<script>标记包含,例如

Browserify Webpack

看看这个答案。