I recently added a tsx component to my next.js 13 project following the documentation.
After creating the required tsconfig.json file, I encountered module not found errors when running npm run dev:
$ npm run dev
> [email protected] dev
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Loaded env from /Users/myuser/code/my-frontend/.env.development
info - Loaded env from /Users/myuser/code/my-frontend/.env
We detected TypeScript in your project and created a tsconfig.json file for you.
error - ./src/pages/_app.jsx:4:0
Module not found: Can't resolve '@/styles/tailwind.css'
2 |
3 | import 'focus-visible'
> 4 | import '@/styles/tailwind.css'
5 | import { appWithTranslation } from 'next-i18next'
6 | import { useEffect } from 'react'
7 | import { init, push } from "@socialgouv/matomo-next";
https://nextjs.org/docs/messages/module-not-found
Running npm run build resulted in additional import issues with the @/... syntax.
The version of Node I am using is v18.14.2.
Edit: Below is the automatically generated tsconfig by Next.js without any modifications:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"incremental": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}