Using baseUrl in jsconfig.json is not working with Next.js

Question

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?

Answer 1

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.

Answer 2

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
  }
}

Answer 3

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'

Answer 4

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'.

Answer 5

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'
   

Answer 6

Try:

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

Answer 7

This seem to work for me in next v12.3.0

jsconfig.json

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

in component

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