NextJS with TypesScript index.ts files not being resolved with path aliases

user_6070660 0
Viewed 1462

I'm getting a TypeScript warning that the module cannot be found.

I'm using TypeScript on my NextJS app and this has only occured this time while I've been using custom paths and didn't encounter this problem before.

I have this example of structure

/models
  |-- index.ts
  |-- User.ts
/pages
   /api
     /users
       |-- index.ts

I'm trying to import my Userschema from models custom paths that I set but It's giving me an error

This is what my my index.ts in models looks like

export { default as User } from './User';

This is how I import it inside api/user/index.ts

import { User } from '@/models';

My tsconfig file looks like this

{
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": false,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "baseUrl": ".",
        "paths": {
            "@/components/*": [
                "./components/*"
            ],
            "@/types/*": [
                "./types/*"
            ],
            "@/utils/*": [
                "./utils/*"
            ],
            "@/middlewares/*": [
                "./middlewares/*"
            ],
            "@/models/*": [
                "./models/*"
            ],
            "@/lib/*": [
                "./lib/*"
            ]
        }
    },
    "include": [
        "next-env.d.ts",
        "**/*.ts",
        "**/*.tsx"
    ],
    "exclude": [
        "node_modules"
    ]
}

Importing using custom paths other than index file like import dbConnect from '@/utils/dbConnect' works but with index files, I still have to specify the index file name when importing to make it work. import { User } from '@/models/index'

typescript next.js
3 Answers

I solved the problem by replacing my path aliases with

...
"baseUrl": ".",
"paths": {
    "@/*": [ "./*" ]
 }

Instead of specifying individual alias for each folder, I just used the alias above and it's working properly now.

user_60706600

If any of the above code does not work for you then

{
  "compilerOptions": {
     // Next.js Absolute path
    "baseUrl": ".",
    "paths": {

      // with `/*` for accessing the nested folder.
      // without `/*` for `folder/index.ts`
      
      "@components": ["src/components"],
      "@components/*": ["src/components/*"],

      "@images": ["src/images"],
      "@images/*": ["src/images/*"],

      "@fonts": ["src/fonts"],
      "@fonts/*": ["src/fonts/*"]
    }
  },

The above solution method was answered in github issue.

user_149259170

Instead of:

        "baseUrl": ".",
        "paths": {
            "@/components/*": [
                "./components/*"
            ],
            "@/types/*": [
                "./types/*"
            ],
            "@/utils/*": [
                "./utils/*"
            ],
            "@/middlewares/*": [
                "./middlewares/*"
            ],
            "@/models/*": [
                "./models/*"
            ],
            "@/lib/*": [
                "./lib/*"
            ]
        }

Do:

        "baseUrl": ".",
        "paths": {
            "@/components/*": [
                "components/*"
            ],
            "@/types/*": [
                "types/*"
            ],
            "@/utils/*": [
                "utils/*"
            ],
            "@/middlewares/*": [
                "middlewares/*"
            ],
            "@/models/*": [
                "models/*"
            ],
            "@/lib/*": [
                "lib/*"
            ]
        }

This is because you have already specified paths for all the folders in ./ with baseUrl:"." na now you should invoke them with their alias, I don't know why it works like that but I have encountered this problem as well and this solved it for me.

user_127373160
Related