Can't resolve '../../node_modules/bootstrap/scss/mixins/data:image/svg+xml...

[adrienharnay]

What version of Next.js are you using?

12.0.3

What version of Node.js are you using?

14.18.1

What browser are you using?

Chrome

What operating system are you using?

MacOS

How are you deploying your application?

Kubernetes

Describe the Bug

When importing Bootstrap on 12.3.0 (problem started occurring in 12.3.0-canary.2, 12.3.0-canary.1 is fine), the following error appears:

error - ./src/styles/main.scss:5:0
Module not found: Can't resolve '../../node_modules/bootstrap/scss/mixins/data:image/svg+xml,<svg xmlns='http:/www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill=''

Expected Behavior

Bug introduced in 12.3.0-canary.2

To Reproduce

Import main.scss in your App.js:

@import '~bootstrap/scss/functions';

[chengruideng]

I think the problem is it can't compile base64 image, I tried to override the bootstrap variables that have url("data:image/svg+xml,%... and it works. I feel like there may be custom config need to be added into the next.config.js file

[jeffdrumgod]

similar code, same bug here.
Testing with 12.0.4-canary.0 also (but working in 12.0.3-canary.1)

[JameelKhan9]

Having the same issue with sanatize.css:
@import "~sanitize.css/forms.css";

source of error with the sanitize forms:

:where(select) {
  appearance: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em;
  border-radius: 0;
  padding-right: 1em;
}

I replicated the issue with the following away from sanatize.css:

body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'%3E%3Cpath d='M10 10h123v123H10z'/%3E%3C/svg%3E");
}

It seems like SVG as a data URI does not work in NextJS 12.0.3's CSS setup. This makes me think @chengruideng is correct, something needs to be added to next.config.js. What this is I am unsure.

[jvinhit]

i have same issue in antd when i upgrade nextjs 12 😂😂

[brc-dd]

Should be fixed by #31134 (merged).

EDIT: Update your Next.js version to 12.0.4-canary.1 or above.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.