Importing using absolute path in NextJs not working

Question

I created a file in my route called jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

I have the latest nextjs "next": "latest"

Currently to import components, i have to do something like this:

import AppHeader from "../../../../components/common/AppHeader";

However with those changes above i thought I could do this:

import AppHeader from "src/components/common/AppHeader";

But I get this message:

Module not found: Can't resolve 'src/components/common/AppHeader'

Directory structure:

/
-->lib
-->src
   -->components
-->public

Any ideas? I also tried adding this to my next.config.js file but also doesnt make a difference: config.resolve.modules.push(__dirname)

Can I know about your folder structure? I guess you can try replace `src/components/common/AppHeader` by `components/common/AppHeader` — nghiaht, Oct 17 '20 at 02:13
I updated my question with that. I tried what you mentioned and that says module not installed. I would also like to access things in lib using absolute paths. — strangeQuirks, Oct 17 '20 at 09:02
I ended up just going with this solution using webpack: https://stackoverflow.com/a/59542342/1009698 `config.resolve.modules.push(path.resolve('./'))` — strangeQuirks, Oct 17 '20 at 10:07
Does this answer your question? [Using baseUrl in jsconfig.json not working with NextJS](https://stackoverflow.com/questions/59474480/using-baseurl-in-jsconfig-json-not-working-with-nextjs) — juliomalves, Dec 25 '21 at 22:16

score 6 · Answer 1 · edited Dec 26 '21 at 00:22

6

Seems your folder structure is :

root->src->components

add another property in your jsconfig file

{

   "compilerOptions": {
     "baseUrl": "."
    },
 
    "include":["."]

}

edited Dec 26 '21 at 00:22

cigien

57,834
11
73
112

answered Dec 25 '21 at 17:01

Tahid

91
1
5

score 3 · Answer 2 · answered Jul 10 '22 at 11:36

3

For those stopping by, this worked for me. Add this to your tsconfig.json.

tsconfig.json

  "module": "CommonJS",
  "baseUrl": ".",
  "paths": {
    "@/layouts/*": ["src/layoyts/*"],
    "@/components/*": ["src/components/*"],
    "@/public/*": ["./public/*"]
  }

answered Jul 10 '22 at 11:36

kachi_dk

211
2
5

tsconfig.json or jsconfig.json. The paths part of this answer helped my fix my issue. I declared every root path that was used in some import using the "@" for absolute. – Florian G May 15 '23 at 19:28

score 0 · Answer 3 · answered Jun 03 '21 at 11:46

Try to use my tsconfig.json, it works for me:

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "resolveJsonModule": true
  }
}

It also could be cause of running script if you running it in production mode In my case i use:

"build": "nest build"
"start:prod": "node dist/src/main"

Vladyslav Semeniuk · Answer 4 · 2022-12-21T10:50:35.393

-1

Do following in jsconfig.json:

{
"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "src/*": ["src/*"]
    }
  },
  "exclude": [
    "node_modules"
  ]
}

Now You can reach your folders like this:

src/components/..
src/lib/..

edited Dec 21 '22 at 10:50

answered Jul 22 '21 at 12:42

Vladyslav Semeniuk

477
3
6
16

score -2 · Answer 5 · answered Dec 30 '21 at 08:27

Install @types with npm install --save-dev typescript @types/react command.

Your tsconfig.json file should be something like that:

{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "paths": {
      "@/components/*": [
        "components/*"
      ],
      "@/public/*": [
        "public/*"
      ]
    },
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "."
  ],
  "exclude": [
    "node_modules"
  ]
}

score -2 · Answer 6 · answered Feb 02 '22 at 11:40

-2

Your configs, worked for me. Just stop and restart the nextJs server.

answered Feb 02 '22 at 11:40

FATCHOLA

393
2
4

Importing using absolute path in NextJs not working

6 Answers6