Encountering an issue within my Next.js project with the following project structure:
├── modules/
│ └── auth/
│ ├── index.ts
│ ├── page.tsx
│ └── package.json
└── nextjs-project/
├── ...
└── package.json
Within my Next.js project, the tsconfig.json file is structured as follows:
{
"compilerOptions": {
"target": "esnext",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"],
"my-auth-module": ["../modules/auth/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
No webpack loader configured in my module (e.g., auth). Attempting to import a page from the auth module triggers the error below:
Module parse failed: Unexpected token (1:24)
You may need an appropriate loader to handle this file type; currently, no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> import NextAuth, { type NextAuthOptions } from "next-auth";
Exploring options to load .ts / .tsx files without having to rebuild them each time changes are made within the modules folder.