Using baseUrl in jsconfig.json not working with NextJS

Question

https://github.com/hutber/jsconfigerror Example repo showing the jsconfig 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 nextjs

Answer 1

From Next.js 9.4 onward, You can easily create jsconfig.json or tsconfig.json file 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.

Hope it helps.