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
globals.scss
@import 'bootstrap/scss/bootstrap.scss';
...
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.
Latest comments (2)
Downgrade next-js isn't solution.
Try @use instead of @import
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.