Skip to content
Advertisement

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

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?

Advertisement

Answer

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