为什么任何导入都会修复 --隔离模块错误



在一个创建-反应-应用程序打字稿项目中,我试图写这个只是为了快速测试一些东西:

// experiment.test.ts
it('experiment', () => {
console.log('test');
});

但它给了我以下错误,it下面有一个红色的波浪线:

当提供"--隔离模块"标志时,所有文件都必须是模块。

但是,如果我将文件更改为以下内容,那么显然一切都很好(当然,未使用的导入除外):

// experiment.test.ts
import { Component} from 'react'; // literally anything, don't even have to use it
it('test', () => {
console.log('test');
});

为什么?这是怎么回事?--isolatedModules实际上意味着什么/做什么?

Typescript 将没有导入/导出的文件视为旧脚本文件。由于此类文件不是模块,因此它们已合并到全局命名空间中的任何定义。isolatedModules禁止此类文件。

将任何导入或导出添加到文件都会使其成为模块,并且错误将消失。

此外,export {}是一种在不导入任何内容的情况下使文件成为模块的便捷方法。

正确的方法是告诉 TypeScript 你想要什么。如果您不想isolatedModulestest目录中创建tsconfig.json并添加:

{
"extends": "../tsconfig.json",
"compilerOptions": {
"isolatedModules": false
},
}

"isolatedModules": true添加到配置中,然后通过添加空export {}来作弊 TypeScript 检查器对我来说闻起来很糟糕的代码。

尽管您从该"错误文件"导出内容,但仍然有错误?

  1. Check if you don't export same name that you already export in another file(冲突)
  2. After your fix try to stop and start your npm/yarn runner(我经历过即使在硬重新加载页面后也无法自行恢复,尤其是当您在其他地方遇到另一个错误时)

如果您不想添加不必要的

export {}

到处都是,不想破坏其他文件的编译器选项。

如果您有单独的tests/目录,则可以扩展根目录tsconfig文件,并在tests/目录中创建一个新目录。

然后添加以下内容:

{
"extends": "../tsconfig.json",
"compilerOptions": {
"isolatedModules": false
},
}

这将仅关闭测试文件的isolatedModules标志。重新启动代码编辑器以同步更改。

让我们尝试检查隔离的模块。当我检查谷歌时,没有直接的背景。

这基本上意味着你允许Typescript单独编译模块。

但它来自 Typescript,与 Typescript 更喜欢模块而不是命名空间有关。

模块

还依赖于模块加载器(例如 CommonJs/Require.js)或支持ES模块的运行时。模块 提供更好的代码重用、更强的隔离和更好的工具 支持捆绑。

来源 1

使用创建-反应-应用程序打字稿项目, 您应该已经安装了TypeScript和TS-jest(或者create-react-app应该根据您是否弹出应用程序来处理依赖项)。

ts-jest也有一些关于它的信息:

默认情况下,ts-jest 在上下文中使用 TypeScript 编译器 项目(您的),具有完整的类型检查和功能。但它也可以 用于分别编译每个文件,TypeScript 称之为 "隔离模块"。这就是隔离模块选项(它 默认为 false)确实如此。

来源 2

使用export命令后,您将从要导出的内容中创建模块。

如果您使用的是 ts-jest,则可以添加这些设置而不会影响您的其他模块,创建-反应-应用程序将包含这些模块。

"ts-jest": {
"isolatedModules": false
}

并查看 ts-jest 页面(第二个来源)以获取利弊。

就我而言,添加export {};是不够的。

我在webpack.config.ts文件中遇到了此错误。错误消息如下所示:

'webpack.config.ts' 不能在 '--isolatedModules' 下编译,因为它被认为是一个全局脚本文件。添加一个导入、导出或空的"export {}"语句以使其成为模块.ts(1208)

当我添加export {};时,我得到了另一个错误:

语法错误:意外的令牌"导出" at Object.compileFunction (node:vm:352:18)...

我尝试从以下位置更改tsconfig.json模块选项:

{
"compilerOptions": {
"module": "EsNext",
"isolatedModules": true
},

自:

{
"compilerOptions": {
"module": "CommonJS",
"isolatedModules": true
},

,因为webpack.config.ts具有像module.export ={}这样的 commonjs 语法。不幸的是,它也不起作用。我发现没有向项目添加类型定义,所以我运行:

npm install --save-dev ts-node @types/node @types/webpack

一切都很好。由于export {};,该文件被识别为模块。

当然,使用export {};使文件成为模块只是一种解决方法,而不是解决方案。我可以

  • 将 webpack.config 文件扩展名更改为 .js 而不是 .ts,并保持 commonJS 模块格式
  • 更改为 ES 模块格式的导入/导出语句并使用 .mjs 文件扩展名,因为自引入版本 13.2.0 以来,Node.js 对 ES 模块有稳定的支持。然而,这会引发更改commonJS语法的其他问题。 我可以用作 webpack 配置的 es-modules 吗?
  • 保留 .ts 文件扩展名,遵循 webpack 配置指南的打字稿并使用 ES 模块 链接

我选择了第三个选项,并且必须添加import 'webpack-dev-server';以避免类型错误。我的配置从这里更改:

export {};
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = (env) => {...}

对此:

import * as path from 'path';
import * as webpack from 'webpack';
import 'webpack-dev-server';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const config = (env: { [x: string]: any; }): webpack.Configuration => {...}
export default config;

这是因为您尚未导入要测试的函数。完成此操作后,错误将消失。接受的答案解释了原因。

只是做怎么样.eslintignore添加需要从 eslint 忽略的文件夹,以便没有错误 --隔离模块错误由任何导入修复 你可以测试你的逻辑

解决问题,请参阅文章https://blog.csdn.net/qingfeng812/article/details/120510673

{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": false,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}

最新更新