导入别名“主题”的循环定义答案

【问题标题】：Circular definition of import alias 'theme'导入别名“主题”的循环定义
【发布时间】：2021-09-11 12:35:11
【问题描述】：

我正在尝试扩展第三方私有 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 导入引用循环依赖，我不确定这到底是什么意思，并且在研究时没有找到任何明确的参考。

这些是我的 Typescript 设置

        "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"

【问题讨论】：

我怀疑你的依赖有问题。它编译是因为skipLibCheck，它关闭了依赖项中的类型检查。无论您在哪里看到错误都没有选择该设置。
您能尝试在playground 中复制它吗？因为如果不查看不同的类型，就不可能确定哪个部分导致了循环定义。

标签： javascript reactjs typescript styled-components

【解决方案1】：

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

这可能是直接参考(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。如果两个模块执行类似的行为，它们也可以组合成一个模块。

【讨论】：