Hi 👋
I've wanted to complement this question here:
Just to give you a brief explanation here, my library setup is as the following:
packages/foo
├── README.md
├── babel.config.js
├── jest.config.js
├── package.json
├── setupTests.js
├── src
│ ├── components
│ │ ├── Foo
│ │ │ ├── Foo.component.tsx
│ │ │ ├── Foo.data.ts
│ │ │ ├── Foo.designs.ts
│ │ │ ├── Foo.props.ts
│ │ │ ├── Foo.style.ts
│ │ │ ├── Foo.test.tsx
│ │ │ └── index.ts
│ │ └── index.ts
│ ├── index.ts
│ ├── theme
│ │ └── index.ts
├── styled.d.ts
└── tsconfig.json
I have a rollup build that generates my libraries files in a way that allows me to import all the paths present under my library. In essence, it allows me to import:
import foo from 'foo';,
import foo from 'foo/components/Foo';,
import foo from 'foo/components/Foo/Foo.component.tsx'
Although my rollup build scheme is correct (I am able to import my foo library correctly using those imports statements - outside of the monorepo), I'm still facing an issue regarding the "src" folder when importing from my packages. After following this demo from @RyanCavanaugh, my intellisense offers me the following imports:
foo,
foo/src/components/Foo,
foo/src/components/Foo/Foo.component.tsx
Having src in the "nested" imports for me is problematic because it's going to raise issues when building / in production and I'd like to know if there'd be any way to "fix" the imports to not offer src as part of the intellisense.
My tsconfig at my packages/foo library is:
{
"extends": "../tsconfig.settings.json",
"compilerOptions": {
"rootDir": "src",
"outDir": "ts"
}
}
My tsconfig at my packages/baz library is:
{
"extends": "../tsconfig.settings.json",
"compilerOptions": {
"rootDir": "src",
"outDir": "ts"
},
"references": [
{ "path": "../foo" }
]
}
My packages/tsconfig.json file:
{
"files": [],
"references": [
{ "path": "baz" },
{ "path": "foo" }
]
}
My packages/tsconfig.settings.json file:
{
"compilerOptions": {
"composite": true,
"declaration": true,
"emitDeclarationOnly": true,
"declarationMap": true,
"sourceMap": true,
"module": "esnext",
"target": "es5",
"lib": ["es2020", "dom"],
"jsx": "preserve",
"moduleResolution": "node",
"downlevelIteration": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"noErrorTruncation": false,
"skipLibCheck": true
}
}
The demonstration cleared 90% of my typescript issues when using a monorepo, thank you for that!
Hi 👋
I've wanted to complement this question here:
Just to give you a brief explanation here, my library setup is as the following:
I have a rollup build that generates my libraries files in a way that allows me to import all the paths present under my library. In essence, it allows me to import:
import foo from 'foo';,import foo from 'foo/components/Foo';,import foo from 'foo/components/Foo/Foo.component.tsx'Although my rollup build scheme is correct (I am able to import my
foolibrary correctly using those imports statements - outside of the monorepo), I'm still facing an issue regarding the "src" folder when importing from my packages. After following this demo from @RyanCavanaugh, my intellisense offers me the following imports:foo,foo/src/components/Foo,foo/src/components/Foo/Foo.component.tsxHaving
srcin the "nested" imports for me is problematic because it's going to raise issues when building / in production and I'd like to know if there'd be any way to "fix" the imports to not offersrcas part of the intellisense.My tsconfig at my
packages/foolibrary is:{ "extends": "../tsconfig.settings.json", "compilerOptions": { "rootDir": "src", "outDir": "ts" } }My tsconfig at my
packages/bazlibrary is:{ "extends": "../tsconfig.settings.json", "compilerOptions": { "rootDir": "src", "outDir": "ts" }, "references": [ { "path": "../foo" } ] }My packages/tsconfig.json file:
{ "files": [], "references": [ { "path": "baz" }, { "path": "foo" } ] }My packages/tsconfig.settings.json file:
{ "compilerOptions": { "composite": true, "declaration": true, "emitDeclarationOnly": true, "declarationMap": true, "sourceMap": true, "module": "esnext", "target": "es5", "lib": ["es2020", "dom"], "jsx": "preserve", "moduleResolution": "node", "downlevelIteration": true, "forceConsistentCasingInFileNames": true, "strict": true, "experimentalDecorators": true, "allowSyntheticDefaultImports": true, "noErrorTruncation": false, "skipLibCheck": true } }The demonstration cleared 90% of my typescript issues when using a monorepo, thank you for that!