导入别名'theme'的循环定义

Question

我正在尝试扩展第三方私有 npm 模块的主题。该项目编译成功，但我不断收到打字稿错误

Circular definition of import alias 'externalTheme'

以下是我如何扩展主题。这是完美的工作方式，它结合使用我的主题和外部主题

import { externalTheme, ExternalThemeInterface } from 'external-npm-repo...'

import { colors, ColorsTypes } from './colors'

export const MyTheme: MyThemeInterface = {
    ...theme,
    colors,
}

export interface MyThemeInterface extends ExternalThemeInterface {
    colors: ColorsTypes
}

我收到的错误是引用 externalTheme 导入的循环依赖，我不确定这到底意味着什么，并且在研究时没有找到任何明确的引用。

这些是我的打字稿设置

        "allowJs": true,
        "alwaysStrict": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "lib": ["dom", "es2017"],
        "module": "esnext",
        "moduleResolution": "node",
        "noEmit": true,
        "noFallthroughCasesInSwitch": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "strict": true,
        "target": "esnext"

Answer 1

此错误的另一个原因是从与当前文件同名的依赖项导入时

示例：

// local/file/express.ts
import * as express from 'express'

要解决此问题，请将本地文件“express.ts”重命名为“another-name.ts”

Answer 2

当两个或多个模块相互引用时，就会发生循环依赖（也称为循环依赖）。

这可以直接参考

(A -> B -> A):

或间接

(A -> B -> C -> A):

。

创建一个文件

webpack.config.js

并尝试将

circular-dependency-plugin

添加到您的 webpack 配置中 https://www.npmjs.com/package/circular-dependency-plugin。这应该显示代码中的循环依赖关系。

你的代码看起来像这种类型

(A -> B -> A):

所以， 对于更简单的模式，例如 A -> B -> A，可能需要

refactoring

。也许可以将 B 中的模块移至 A。或者，可以将必要的代码提取到 A 和 B 都引用的 C 中。如果两个模块执行类似的行为，它们也可以组合成一个模块。