For the creation of a new NX workspace, I executed the following command:
npx create-nx-workspace@latest --preset=next --packageManager=yarn --skipGit
To further expand on this, I also generated a shared library using the command below:
npx nx g @nrwl/next:library components --directory=shared/ui/theme-v1.0 --component=false --tags=--tags=scope:themev1-ui,type:shared,platform:web --style=none --importPath=@my-app/shared/ui/theme-v1.0/components
In order to share the tsconfig.json within the Next.js app, here is the configuration snippet that was utilized:
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
// Compiler options here...
},
"include": [
"src/**/*.ts",
// Include paths listed here...
],
"exclude": ["node_modules", "jest.config.ts"]
}
After running npx nx lint, no errors were reported from the linter. However, in my VSCode setup, there seems to be an issue with detecting the tsconfig file, leading to false error notifications. A screenshot has been provided along with the folder structure for reference:https://i.sstatic.net/1E97q.jpg
The problem appears to be specific to the Next.js project, as other libraries do not exhibit the same issue. Another screenshot showcasing the absence of this problem in other scenarios can be viewed here:https://i.sstatic.net/DsrdC.jpg
Attempts to resolve this by creating a separate tsconfig.app.json file and extending tsconfig.json did not yield positive results. Reloading VSCode was also attempted without success. The root cause remains uncertain, whether it's related to VSCode or the NX set-up, given that workspace TypeScript is being utilized instead of the default option provided by VSCode.
Details regarding the package.json configuration are outlined below:
{
// Package.json details here...
}
NX.json configuration settings are detailed as follows:
{
// NX.json settings outlined here...
}