DEV Community

solring
solring

Posted on

Next.js 12 SCSS module resolution problem when importing other SCSS files.

Just to note it down in case I forget about this issue (AGAIN).

Next version: 12.0.3

Issue description

When importing the scss source of bootstrap in my own global scss file, there seem to be some path resolution problems in the latest Next.js and I got these errors:

wait  - compiling...
error - ./styles/globals.scss:4:0
Module not found: Can't resolve '../node_modules/bootstrap/scss/forms/data:image/svg+xml,<svg xmlns='http:/www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke=''

Import trace for requested module:
./styles/globals.scss
./pages/_app.js

https://nextjs.org/docs/messages/module-not-found
Enter fullscreen mode Exit fullscreen mode

globals.scss

@import 'bootstrap/scss/bootstrap.scss';
...
Enter fullscreen mode Exit fullscreen mode

Current Solution

Then I found This issue. Exactly the same one.
So I simply down-grade Next.js to ^11, and it works.

Follow up

https://github.com/vercel/next.js/pull/31134
It seems that the fix has been merged, so we can just wait for the releases to include it.

Discussion (1)

Collapse
hassannejadi profile image
Mohammad Hassannejadi

Thank you for this article. I faced to this problem too but I don't know how to downgrade my next.js version. I have an existing project and I want to downgrade it to Next.js v.11 but When I run command "npm install next@11" doesn't change my version. Please tell me how to do that. Thank you.