Search code examples
next.jsnext-images

next-images breaking all the absolute paths in my next.js project

I want to have inline png images on my next.js project. As this is not a native supported feature, I'm using the next-images library for that.

This is my next.config.js

const withImages = require('next-images')
module.exports = withImages()

The problem is NOT the image import, but all the rest of imports: that code is breaking all the absolute .jsx imports on my project.

Any idea on how to solve this?

Solution

  • As the user @juliomalves mentioned above, the answer is on this link from the Next.js official documentation.

    Basically, the issue was fixed in 2 steps:

    1. Adding a jsconfig.json file (if you're using Typescript, you should use tsconfig.json instead).

    2. changing all the absolute paths from /components/Something to components/Something (in other words, removing the first forward slash).