My project has a complex setup with multiple distributed npm packages that have dependencies on each other. I've tried to simplify the structure as much as possible. The setup is structured like this (each subproject having its own package.json):
Project-root:
- package.json*
- /apps: - app1
- app2
- /common
- /libs: - lib1
- lib2
Apps: Each app stands alone and utilizes all libs and common, each with its own package.json
Common: Used for shared components, specifically within apps (depending on all libs)
Libs: Private npm packages utilized in other projects and in apps/common, work in progress so they are used/included via npm-workspaces/git clone. Added via npm install by workspaces
The issue I am facing is that TypeScript/tsc throws error ts(2307) in all classes within the "common" module.
import { BarInterface } from '@mynamespace/lib1/foo';
Cannot find module '@mynamespace/lib1/foo' or its corresponding type declarations.
Everything functions as intended and development/build processes run without errors, but Visual Studio Code/IntelliSense and/or tsc cannot recognize the import statements provided in common. Therefore, auto-completion is not available, which is crucial as the project should be easily accessible for new developers.
* package.json (root):
{
"name": "main-project",
"workspaces": [
"./apps/*",
"./libs/*",
"./common"
]
}
* package.json (lib):
{
"name": "@mynamespace/lib1",
"exports": {
"./foo": "./src/foo/index.ts",
},
}
* package.json (common):
{
"name": "main-project-common",
"exports": {
"./bar": "./src/bar/index.ts",
},
"dependencies": {
"@mynamespace/lib1": "^1.0.0"
"@mynamespace/lib2": "^1.0.0"
}
}
* package.json (app1):
{
"name": "app1",
"exports": {
"./bar": "./src/bar/index.ts",
},
"dependencies": {
"@mynamespace/main-project-common": "file:../../common"
}
}
All tsconfig.json files have the following configuration:
{
"compilerOptions": {
// Compiler options here
},
"include": ["src/**/*.ts", "global.d.ts"],
"exclude": []
}
vite.config.js
import { defineConfig } from 'vite';
import path from 'path';
// Vite config
export default defineConfig({
build: {
target: 'esnext',
lib: {
entry: path.resolve(__dirname, 'src/index.ts'),
formats: ['es'],
},
rollupOptions: {
external: /^lit/,
},
},
});
Am I missing something or is the setup too complex or some sort of anti-pattern not supported by TypeScript?