bit
bit copied to clipboard
Published
20 hours ago •
teambit
teambit
Cannot find module '.otf' / '.woff' / 'woff2' or its corresponding type declarations. (assets/fonts)
Describe the bug
I can't use the command bit tag because of an error related to assets.
Steps to Reproduce
- Create a component
- Add assets (
fontsfor me) and import it in the component - Try to tag your component
Expected Behavior
bit tag command not crashing
Screenshots, exceptions and logs
bit tag --message "initial tag"
✔ installed packages in capsules
running build pipe for 2 environments, total 17 tasks
generated graph for env "teambit.harmony/node", originalSeedersOfThisEnv: 1, graphOfThisEnv: 1, graph total: 1
generated graph for env "teambit.community/envs/[email protected]", originalSeedersOfThisEnv: 2, graphOfThisEnv: 2, graph total: 3
✔ executing pre-build for all tasks
✔ env "teambit.harmony/node", task "teambit.harmony/aspect:CoreExporter (export all core aspects via the main aspects)" has completed successfully in 208μs
✔ env "teambit.community/envs/[email protected]", task "teambit.harmony/aspect:CoreExporter (export all core aspects via the main aspects)" has completed successfully in 52μs
✔ env "teambit.harmony/node", task "teambit.compilation/compiler:TSCompiler (compile components for artifact dist)" has completed successfully in 2s
✖ /home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:5:29 - error TS2307: Cannot find module './fonts/AeonikPro-Medium.otf' or its corresponding type declarations.
5 import AeonikProMedOTF from './fonts/AeonikPro-Medium.otf'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✖ /home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:6:30 - error TS2307: Cannot find module './fonts/AeonikPro-Medium.woff' or its corresponding type declarations.
6 import AeonikProMedWOFF from './fonts/AeonikPro-Medium.woff'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✖ /home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:7:31 - error TS2307: Cannot find module './fonts/AeonikPro-Medium.woff2' or its corresponding type declarations.
7 import AeonikProMedWOFF2 from './fonts/AeonikPro-Medium.woff2'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✖ /home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:9:29 - error TS2307: Cannot find module './fonts/AeonikPro-Regular.otf' or its corresponding type declarations.
9 import AeonikProRegOTF from './fonts/AeonikPro-Regular.otf'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✖ /home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:10:30 - error TS2307: Cannot find module './fonts/AeonikPro-Regular.woff' or its corresponding type declarations.
10 import AeonikProRegWOFF from './fonts/AeonikPro-Regular.woff'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✖ /home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:11:31 - error TS2307: Cannot find module './fonts/AeonikPro-Regular.woff2' or its corresponding type declarations.
11 import AeonikProRegWOFF2 from './fonts/AeonikPro-Regular.woff2'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✖ /home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:5:29 - error TS2307: Cannot find module './fonts/AeonikPro-Medium.otf' or its corresponding type declarations.
5 import AeonikProMedOTF from './fonts/AeonikPro-Medium.otf'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✖ /home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:6:30 - error TS2307: Cannot find module './fonts/AeonikPro-Medium.woff' or its corresponding type declarations.
6 import AeonikProMedWOFF from './fonts/AeonikPro-Medium.woff'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✖ /home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:7:31 - error TS2307: Cannot find module './fonts/AeonikPro-Medium.woff2' or its corresponding type declarations.
7 import AeonikProMedWOFF2 from './fonts/AeonikPro-Medium.woff2'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✖ /home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:9:29 - error TS2307: Cannot find module './fonts/AeonikPro-Regular.otf' or its corresponding type declarations.
9 import AeonikProRegOTF from './fonts/AeonikPro-Regular.otf'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✖ /home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:10:30 - error TS2307: Cannot find module './fonts/AeonikPro-Regular.woff' or its corresponding type declarations.
10 import AeonikProRegWOFF from './fonts/AeonikPro-Regular.woff'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✖ /home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:11:31 - error TS2307: Cannot find module './fonts/AeonikPro-Regular.woff2' or its corresponding type declarations.
11 import AeonikProRegWOFF2 from './fonts/AeonikPro-Regular.woff2'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✖ env: teambit.community/envs/[email protected], task "teambit.compilation/compiler:TypescriptCompile" has failed
⚠ env: teambit.harmony/node, task "teambit.defender/tester:TestComponents" has skipped due to "teambit.compilation/compiler:TypescriptCompile" failure
⚠ env: teambit.community/envs/[email protected], task "teambit.defender/tester:JestTest" has skipped due to "teambit.compilation/compiler:TypescriptCompile" failure
⚠ env: teambit.community/envs/[email protected], task "teambit.defender/linter:EslintLint" has skipped due to "teambit.compilation/compiler:TypescriptCompile" failure
⚠ env: teambit.harmony/node, task "teambit.harmony/application:build_application" has skipped due to "teambit.compilation/compiler:TypescriptCompile" failure
⚠ env: teambit.harmony/node, task "teambit.pkg/pkg:PreparePackages" has skipped due to "teambit.compilation/compiler:TypescriptCompile" failure
⚠ env: teambit.harmony/node, task "teambit.semantics/schema:ExtractSchema" has skipped due to "teambit.compilation/compiler:TypescriptCompile" failure
⚠ env: teambit.harmony/node, task "teambit.preview/preview:GenerateEnvTemplate" has skipped due to "teambit.compilation/compiler:TypescriptCompile" failure
⚠ env: teambit.harmony/node, task "teambit.preview/preview:GeneratePreview" has skipped due to "teambit.compilation/compiler:TypescriptCompile" failure
⚠ env: teambit.community/envs/[email protected], task "teambit.harmony/application:build_application" has skipped due to "teambit.compilation/compiler:TypescriptCompile" failure
⚠ env: teambit.community/envs/[email protected], task "teambit.pkg/pkg:PreparePackages" has skipped due to "teambit.compilation/compiler:TypescriptCompile" failure
⚠ env: teambit.community/envs/[email protected], task "teambit.semantics/schema:ExtractSchema" has skipped due to "teambit.compilation/compiler:TypescriptCompile" failure
⚠ env: teambit.community/envs/[email protected], task "teambit.preview/preview:GenerateEnvTemplate" has skipped due to "teambit.compilation/compiler:TypescriptCompile" failure
⚠ env: teambit.community/envs/[email protected], task "teambit.preview/preview:GeneratePreview" has skipped due to "teambit.compilation/compiler:TypescriptCompile" failure
✔ executing post-build for all tasks
✖ teambit.pipelines/builder, running build pipe for 2 environments, total 17 tasks (completed in 4s)
The following errors were found while running the build pipeline
Failed task 1: "teambit.compilation/compiler:TypescriptCompile" of env "teambit.community/envs/[email protected]"
component: zat.components/theme/[email protected]
/home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:5:29 - error TS2307: Cannot find module './fonts/AeonikPro-Medium.otf' or its corresponding type declarations.
5 import AeonikProMedOTF from './fonts/AeonikPro-Medium.otf'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:6:30 - error TS2307: Cannot find module './fonts/AeonikPro-Medium.woff' or its corresponding type declarations.
6 import AeonikProMedWOFF from './fonts/AeonikPro-Medium.woff'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:7:31 - error TS2307: Cannot find module './fonts/AeonikPro-Medium.woff2' or its corresponding type declarations.
7 import AeonikProMedWOFF2 from './fonts/AeonikPro-Medium.woff2'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:9:29 - error TS2307: Cannot find module './fonts/AeonikPro-Regular.otf' or its corresponding type declarations.
9 import AeonikProRegOTF from './fonts/AeonikPro-Regular.otf'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:10:30 - error TS2307: Cannot find module './fonts/AeonikPro-Regular.woff' or its corresponding type declarations.
10 import AeonikProRegWOFF from './fonts/AeonikPro-Regular.woff'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:11:31 - error TS2307: Cannot find module './fonts/AeonikPro-Regular.woff2' or its corresponding type declarations.
11 import AeonikProRegWOFF2 from './fonts/AeonikPro-Regular.woff2'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
component: zat.components/theme/[email protected]
/home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:5:29 - error TS2307: Cannot find module './fonts/AeonikPro-Medium.otf' or its corresponding type declarations.
5 import AeonikProMedOTF from './fonts/AeonikPro-Medium.otf'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:6:30 - error TS2307: Cannot find module './fonts/AeonikPro-Medium.woff' or its corresponding type declarations.
6 import AeonikProMedWOFF from './fonts/AeonikPro-Medium.woff'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:7:31 - error TS2307: Cannot find module './fonts/AeonikPro-Medium.woff2' or its corresponding type declarations.
7 import AeonikProMedWOFF2 from './fonts/AeonikPro-Medium.woff2'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:9:29 - error TS2307: Cannot find module './fonts/AeonikPro-Regular.otf' or its corresponding type declarations.
9 import AeonikProRegOTF from './fonts/AeonikPro-Regular.otf'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:10:30 - error TS2307: Cannot find module './fonts/AeonikPro-Regular.woff' or its corresponding type declarations.
10 import AeonikProRegWOFF from './fonts/AeonikPro-Regular.woff'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/home/zat/Library/Caches/Bit/capsules/6572d5c56404080459b0edde7267e20d7f657c3b/[email protected]/fonts.tsx:11:31 - error TS2307: Cannot find module './fonts/AeonikPro-Regular.woff2' or its corresponding type declarations.
11 import AeonikProRegWOFF2 from './fonts/AeonikPro-Regular.woff2'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Found 12 errors in 2 components
✖ Total 17 tasks. 3 succeeded. 1 failed. 13 skipped. Total errors: 12.
bit show theme/fonts command results:
┌───────────────────┬────────────────────────────────────────────────────────────┐
│ id │ zat.components/theme/fonts │
├───────────────────┼────────────────────────────────────────────────────────────┤
│ scope │ zat.components │
├───────────────────┼────────────────────────────────────────────────────────────┤
│ name │ theme/fonts │
├───────────────────┼────────────────────────────────────────────────────────────┤
│ env │ teambit.community/envs/[email protected] │
├───────────────────┼────────────────────────────────────────────────────────────┤
│ package name │ @zat/components.theme.fonts │
├───────────────────┼────────────────────────────────────────────────────────────┤
│ deprecated │ false │
├───────────────────┼────────────────────────────────────────────────────────────┤
│ main file │ index.ts │
├───────────────────┼────────────────────────────────────────────────────────────┤
│ files │ fonts.composition.tsx │
│ │ fonts.d.ts │
│ │ fonts.docs.mdx │
│ │ fonts.spec.tsx │
│ │ fonts.tsx │
│ │ index.ts │
│ │ fonts/AeonikPro-Medium.otf │
│ │ fonts/AeonikPro-Medium.woff │
│ │ fonts/AeonikPro-Medium.woff2 │
│ │ fonts/AeonikPro-Regular.otf │
│ │ fonts/AeonikPro-Regular.woff │
│ │ fonts/AeonikPro-Regular.woff2 │
├───────────────────┼────────────────────────────────────────────────────────────┤
│ dev files │ fonts.spec.tsx (teambit.defender/tester) │
│ │ fonts.composition.tsx (teambit.compositions/compositions) │
│ │ fonts.docs.mdx (teambit.docs/docs) │
├───────────────────┼────────────────────────────────────────────────────────────┤
│ aspects │ teambit.community/envs/[email protected] │
│ │ teambit.component/dev-files │
│ │ teambit.compositions/compositions │
│ │ teambit.dependencies/dependency-resolver │
│ │ teambit.docs/docs │
│ │ teambit.envs/envs │
│ │ teambit.pkg/pkg │
│ │ teambit.preview/preview │
├───────────────────┼────────────────────────────────────────────────────────────┤
│ dependencies │ @emotion/react@^11.10.8- (package) │
├───────────────────┼────────────────────────────────────────────────────────────┤
│ dev dependencies │ @chakra-ui/react@^2.6.0----------------------- (package) │
│ │ @teambit/[email protected] (component) │
├───────────────────┼────────────────────────────────────────────────────────────┤
│ peer dependencies │ react@^18.0.0- (package) │
└───────────────────┴────────────────────────────────────────────────────────────┘
Fonts files are existing in the capsule directory:
➜ [email protected] l
total 56K
drwxr-xr-x 5 dorian dorian 4.0K May 3 17:04 .
drwxr-xr-x 6 dorian dorian 4.0K May 3 17:04 ..
-rw-r--r-- 1 dorian dorian 27 May 3 17:04 .npmignore
drwxr-xr-x 3 dorian dorian 4.0K May 3 17:04 dist
drwxr-xr-x 2 dorian dorian 4.0K May 3 17:03 fonts
-rw-r--r-- 1 dorian dorian 247 May 3 17:03 fonts.composition.tsx
-rw-r--r-- 1 dorian dorian 210 May 3 17:03 fonts.d.ts
-rw-r--r-- 1 dorian dorian 270 May 3 17:03 fonts.docs.mdx
-rw-r--r-- 1 dorian dorian 308 May 3 17:03 fonts.spec.tsx
-rw-r--r-- 1 dorian dorian 1.2K May 3 17:03 fonts.tsx
-rw-r--r-- 1 dorian dorian 33 May 3 17:03 index.ts
-rw-r--r-- 1 dorian dorian 645 May 3 17:04 package.json
-rw-r--r-- 1 dorian dorian 566 May 3 17:04 tsconfig.json
drwxr-xr-x 2 dorian dorian 4.0K May 3 17:04 types
➜ [email protected] l fonts
total 496K
drwxr-xr-x 2 dorian dorian 4.0K May 3 17:03 .
drwxr-xr-x 5 dorian dorian 4.0K May 3 17:04 ..
-rw-r--r-- 1 dorian dorian 119K May 3 17:03 AeonikPro-Medium.otf
-rw-r--r-- 1 dorian dorian 65K May 3 17:03 AeonikPro-Medium.woff
-rw-r--r-- 1 dorian dorian 60K May 3 17:03 AeonikPro-Medium.woff2
-rw-r--r-- 1 dorian dorian 115K May 3 17:03 AeonikPro-Regular.otf
-rw-r--r-- 1 dorian dorian 62K May 3 17:03 AeonikPro-Regular.woff
-rw-r--r-- 1 dorian dorian 57K May 3 17:03 AeonikPro-Regular.woff2
I tried to add this to types/assets.d.ts (root directory) and fonts.d.ts (theme/fonts component directory) but no luck so far.
declare module '*.otf' {
const value: any;
export = value;
}
declare module '*.woff' {
const value: any;
export = value;
}
declare module '*.woff2' {
const value: any;
export = value;
}
Specifications
- Bit version:
0.1.27 - Workspace type: (harmony/legacy)
harmony - Node version:
v19.6.0 - npm / yarn version:
8.3.0(pnpm) - Platform:
Ubuntu 22.04 WSL
Hi there You'll need to add the type declarations to the env that you've set for the components. I would fork the community-react env, add another .d.ts file with the font declarations into it's types folder and then apply that env to your components. You should be good to go then
Or alternatively, if there's no specific reason that you're using the community-react env over any other env, font components would be prime candidates for just using our default teambit.html/html env which is for front-end components with no framework dependency. That env has type declarations for fonts built-in, so you should only need to just apply that env to your components and it'll work out of the box
