Importing using absolute path in NextJs not working

user_1009698 0
Viewed 7912

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)

next.js node.js
6 Answers

Seems your folder structure is :

root->src->components

add another property in your jsconfig file

{

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

}
user_143849180

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"
user_87416670

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/*"]
  }
user_176269890

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/..
user_66137420

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"
  ]
}
user_112849990

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

user_165485510
Related