CODEWITHSUNDEEP
javascriptnext.js
Jamie Hutber
Jamie Hutber

Reputation: 28076

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?

Upvotes: 21

Views: 34210

Answers (7)

atazmin
atazmin

Reputation: 5687

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

Upvotes: -1

Pablopvsky
Pablopvsky

Reputation: 247

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'

Upvotes: 11

Jason Glass
Jason Glass

Reputation: 69

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'

Upvotes: 1

mostafa rastegar
mostafa rastegar

Reputation: 51

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

Upvotes: 3

Hooman
Hooman

Reputation: 1925

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.

Upvotes: 23

Pengson
Pengson

Reputation: 875

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

Upvotes: 18

Shyamm24
Shyamm24

Reputation: 19

Try:

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

Upvotes: 0

Related Questions