I am currently working on my NextJS app with enabled Typescript. Below is a snippet of my tsconfig.json file:
{
"compilerOptions": {
"target": "es6",
"baseUrl": ".",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false, // Changing this to true checks new files
"noImplicitAny": false, // Changing this to true checks new files
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"incremental": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "nodenext",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"paths": {
"@/icons/*": ["ui/icons/*"]
}
},
"include": ["next-env.d.ts", "**/*"],
"exclude": ["node_modules", ".next", "out", "cypress"]
}
Additionally, here is my next.config.js configuration:
const NextConfig = {
reactStrictMode: true,
eslint: {
ignoreDuringBuilds: true,
},
typescript: {
ignoreBuildErrors: true,
},
images: {
path: `https://${customImageOptimizationDomain}/_next/image`,
domains: allowedExternalDomainsForImage,
},
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack'],
})
return config
},
}
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
const nextConfigHOC = nextTranslate(withBundleAnalyzer(NextConfig))
module.exports = nextConfigHOC
During my commit, when checking for errors with the following lint-staged configuration:
"lint-staged": {
"**/*.{ts,tsx}": [
"tsc --noEmit"
]
},
I encountered two types of errors:
ui/features/navbar/signout.tsx(27,7): error TS17004: Cannot use JSX unless the '--jsx' flag is provided.error TS2307: Cannot find module '@/icons/navbar/logout.svg' or its corresponding type declarations.
Interestingly, I did not see these errors in VSCode but only during commits. Any insights or help would be greatly appreciated!
I am looking to resolve these errors and avoid encountering them in the future.