javascript - İçe aktarma takma adı 'theme'in döngüsel tanımı

Üçüncü taraf özel bir npm modülünün temasını genişletmeye çalışıyorum. Proje başarıyla derleniyor ama sürekli olarak import alias 'externalTheme' için döngüsel tanım şeklinde bir TypeScript hatası alıyorum.

Aşağıda temayı nasıl genişlettiğimi gösteriyorum. Bu, hem benim temamı hem de harici temayı birleştirerek kullandığı şekilde mükemmel çalışıyor.

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
}

Aldığım hata, externalTheme importuyla ilgili döngüsel bağımlılığa atıfta bulunuyor, bunun tam olarak ne anlama geldiğinden emin değilim ve araştırma yaparken herhangi bir net referans bulamadım.

Bunlar benim Typescript ayarlarım

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

Cevap #1

bu hatanın bir diğer nedeni, mevcut dosya ile aynı ada sahip bir bağımlılıktan aktarım yaparken oluşur

örnek :

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

Bu sorunu çözmek için, yerel dosya 'express.ts' dosyasını 'another-name.ts' olarak yeniden adlandırın

Cevap #2

Dairesel bağımlılıklar (aynı zamanda döngüsel bağımlılıklar olarak da bilinir) iki veya daha fazla modül birbirine referans verdiğinde ortaya çıkar.

Bu doğrudan bir referans (A -> B -> A): veya dolaylı (A -> B -> C -> A): olabilir.

webpack.config.js dosyası oluşturun ve webpack yapılandırmanıza circular-dependency-plugin'i eklemeyi deneyin https://www.npmjs.com/package/circular-dependency-plugin. Bu, kodunuzdaki döngüsel bağımlılığı göstermelidir.

Kodunuz bu türde görünüyor (A -> B -> A): Dolayısıyla, A -> B -> A gibi daha basit desenler için refaktoring gerekebilir. Belki B'de bulunan modüller A'ya taşınabilir. Veya gerekli kod, hem A hem de B'nin referans verdiği bir C'ye çıkarılabilir. Eğer iki modül benzer davranışlar gösteriyorsa, bunlar tek bir modülde de birleştirilebilir.

İlgili makaleler