Circular definition of import alias 'theme'

Question

I am trying to extend the theme of a third party private npm module. The project compiles successfully but I keep getting a typescript error Circular definition of import alias 'externalTheme'

Below is how I am extending the theme. This is working perfectly in the way that it is using both my theme and the external theme combined

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
}

The error I am getting is referencing circular dependency with the externalTheme import, im not sure what this exactly means and havent found any clear references when researching.

These are my Typescript settings

        "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

another reason for this error is when iporting from a dependency which has the same name as the current file

example:

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

to solve this issue, rename the local file 'express.ts' into 'another-name.ts'

Answer 2

Circular dependencies (also known as cyclic dependencies) occur when two or more modules reference each other.

This could be a direct reference (A -> B -> A): or indirect (A -> B -> C -> A):.

Create a file webpack.config.js and try adding the circular-dependency-plugin to your webpack configuration https://www.npmjs.com/package/circular-dependency-plugin. This should show the circular dependency in your code.

Your code looks like this type (A -> B -> A): So, For simpler patterns, such as A -> B -> A, refactoring may be necessary. Perhaps the modules that live in B could be moved to A. Or, necessary code could be extracted to a C that both A and B reference. If the two modules perform similar behaviors, they could also be combined into a single module.