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

Question

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'

Julius Guevarra · Accepted Answer · 2021-02-19 02:57:18Z

10

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.

answered Feb 19, 2021 at 2:57

Julius Guevarra

9182 gold badges11 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dark Swordsman Over a year ago

After trying to do all sorts of things that were recommended like "baseUrl", "tsnode-paths", and "ts-alias", this was the one that fixed it for me. Using Node v18 + Next v14

Adam Al-Rahman · Accepted Answer · 2022-06-24 18:36:11Z

3

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.

answered Jun 24, 2022 at 18:36

Adam Al-Rahman

3511 silver badge6 bronze badges

Comments

BerringerVids · Accepted Answer · 2024-04-21 07:59:25Z

1

This really had me for a while. Using the app router; I have the "components"-folder in my "app"-folder... Therefore I need to do like so:

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

baseUrl is where the package.json file is and it is not where the folder of components are supposed to be. If you use the app router with a "src"-folder it would be:

{
  "compilerOptions": {
    "baseUrl": ".",
    /* ... */
    "paths": {
      "@/components/*": ["src/app/components/*"]
    }
   }
}

Only a heads up for future readers!

answered Apr 21, 2024 at 7:59

BerringerVids

111 bronze badge

1 Comment

Pimmol Over a year ago

This was it for me. Since my components are now in the app folder

beeinger · Accepted Answer · 2021-02-19 09:23:13Z

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.

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related