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 2 · Answer 1 · edited Dec 26 '21 at 00:22

2

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

55,661
11
60
99

answered Dec 25 '21 at 17:01

Tahid

31
5

score 0 · Answer 2 · 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"

score 0 · Answer 3 · answered Jul 22 '21 at 12:42

Remove src folder and put components directly in your source folder, then do following in jsconfig.json:

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

Now You can reach your folders like this:

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

score 0 · Answer 4 · 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 -1 · Answer 5 · answered Feb 02 '22 at 11:40

-1

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

answered Feb 02 '22 at 11:40

FATCHOLA

129
1
2

Importing using absolute path in NextJs not working

5 Answers5