I recently set up an NX monorepo with a shared library in Next.js and TypeScript (using "@nx/next": "16.5.1"). In this setup, components from the shared library can be manually imported into the main app using statements like:
import { Typography } from '@frontend/jsx-core';However, I would prefer to have these imports suggested by auto-import in VSCode. Strangely enough, this feature seems to work in an older project where I used "@nrwl/next": "15.6.3", so I know it's possible.
I've checked all my VSCode settings and even created a new project with the old configuration to see if that solves the issue, but no luck. The auto-suggested imports still don't work in the new projects.
If you want to take a look at the new project without auto-suggested imports, you can find it here: https://github.com/RowinVanAmsterdam/gamesource
For comparison, here's the link to the old project where everything worked smoothly: https://github.com/koiosonline/koios.world--leg
I've combed through every config file, trying to spot any differences and copying them over, but the issue persists.
One interesting observation is that once I manually import a shared component and then attempt to add another one, the auto-import/suggestion feature suddenly kicks in, asking me to update the existing import statement.
In my tsconfig.json:
"compileOnSave": false,
"compilerOptions": {
"rootDir": ".",
"sourceMap": true,
...
"baseUrl": ".",
"paths": {
"@frontend/jsx-core": ["libs/jsx-core/src/index.ts"]
}
},
...
}
In my tsconfig.base.json:
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"jsx": "preserve",
...
},
...
}
And in my tsconfig.spec.json:
{
"extends": "./tsconfig.json",
...
}