Webpack“找不到模块”对于“模块”：“esnext”

Question

我的“main.ts”模块中有一个包含此内容的 webpack 项目：

import {Elm} from "./MainModule";

它失败了：

TS2307: Cannot find module './MainModule'.

但是当我将“tsconfig.json”从

"module": "esnext"

切换到

"module": "commonjs"

时，它就可以工作了。

但是，我需要

"esnext"

才能进行代码分割。

想法？

Answer 1

我遇到了同样的问题，将

"moduleResolution": "node",

添加到

tsconfig.json

似乎已经解决了它。

更多信息请参见：https://www.typescriptlang.org/docs/handbook/module-resolution.html

Answer 2

当您在

type

文件中将

package.json

设置为“模块”时，您将在项目中启用 ESM 模块。

{
  "type": "module"
}

但这意味着 Node 对如何定位导入文件（模块解析）有严格要求。它需要所有导入语句的文件扩展名。如果您想导入打字稿（.ts）文件，请执行以下操作

import blah from './blah.ts'; // Wrong

您将收到错误，因为 typescript 在编译此文件时会不方便地从此导入语句中删除 .ts 扩展名。它将顺利编译，但在运行时会失败，因为节点需要该文件扩展名。如果您省略扩展名并执行以下操作：

import blah from './blah'; // Wrong

Typescript 会关闭扩展并编译它，但节点会在运行时再次抱怨。事实证明，您只需导入扩展名为 .js 的 .ts 文件，Typescript 就会对其进行编译并保留扩展名。

import blah from './blah.js'; // Correct

还可以尝试将

module

和

moduleResolution

设置为“Node16”

"compilerOptions": {
  "module": "Node16",
  "moduleResolution": "Node16",
  ...
}