I am trying to extend the theme of a third party private npm module. The project piles 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 bined

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"

I am trying to extend the theme of a third party private npm module. The project piles 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 bined

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"

• javascript
• reactjs
• typescript
• styled-ponents

• I suspect that your dependency has the problem. It piles because of skipLibCheck, which turns off type checking in dependencies. Wherever you are seeing the error isn't picking up that setting. – Gerrit0 Commented Jul 5, 2021 at 20:32
• 1 Could you tried to reproduce it in a playground? Because without seing the different types it's impossible to determine which part causes the circular definition. – johannchopin Commented Jul 6, 2021 at 8:15

2 Answers 2

another reason for this error is when importing 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'

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./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 bined into a single module.