19

jsconfigerror is an example repository showing the jsconfig is not working.

I have the following set inside my jsconig.json file:

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

However, when I do an import, it fails:

./pages/index.js
Module not found: Can't resolve 'components/AThing' in '/var/www/gd.hutuber.com/pages'

Folder Structure

¬ components
   ¬ AThing
¬ pages
   ¬ index.js

pages/index.js

import Head from 'components/AThing'

How can I get baseUrl to work with Next.js?

7 Answers 7

22

From Next.js 9.4 onward, you can easily create the jsconfig.json or *tsconfig.json files in the root of your project and then simply enter following:

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

Next thing you must do is to import your component like following:

import Head from 'components/AThing';

Assuming components folder placed in the root of your project as well.

0
18
+50

Since Next.js 9.4, Next.js automatically supports the tsconfig.json and jsconfig.json "paths" and "baseUrl" options.

Read more in the official documentation.


For prior versions, Next.js doesn't read the configurations written in file jsconfig.json. You have to customize the Webpack configuration the Next.js way.

Create a file named next.config.js at the root directory of your project next to file package.json. Then restart.

const path = require('path')

module.exports = {
  webpack: config => {
    config.resolve.modules.push(path.resolve('./'))

    return config
  }
}
2
8

Before starting, you should check that your Next.js version is at least 9.4.

When you configure the jsconfig.json, you should kill the process and restart.

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

While baseUrl is useful and it is enough for most of the cases, you can use the prefix @ to be clear that is an aliases folder.

Be sure that, when you import something, you do not start with ./, like ./pages/index.js, because you are breaking the absolute alias and start to import in relative mode.

import Head from '@components/AThing'
5
  • Restarting the process was the answer! Thanks, man.
    – Shahriar
    Aug 4, 2021 at 9:26
  • Are you sure its name is "jsconig.json"? Apr 29, 2022 at 16:17
  • Sorry it's "jsconfig.json", there was a typo, thank you.
    – Pablopvsky
    Apr 30, 2022 at 23:32
  • I did this (with Next13) and my hot-reload is not detecting changes on the @alias I created. Any idea how to fix that? Nov 14, 2022 at 18:27
  • Did you kill the process and restart it?
    – Pablopvsky
    Nov 16, 2022 at 2:53
3

Create file jsconfig.json in the root folder and add this:

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

Then "npm run dev" or "yarn dev".

If you have the 'next dev' running when you define a new path, make sure to restart 'next dev'.

0

Try:

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}
0

Just to clarify the fragments here. JSconfig and absolute paths are supported with all modern iterations of Next.js.

  1. Create the configuration file:

    jsconfig.json
    
  2. Specify you base URL:

    {
      "compilerOptions": {
        "baseUrl": "."
      }
    }
    
  3. Change your imports like so:

    import 'components/header'
    
-1

This seem to work for me in next v12.3.0

jsconfig.json

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

in component

import Navigation from "src/components/navigation/Navigation";

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.