Regression: `Cannot find module './data:image/svg+xml;utf8,<svg ...></svg>` for .scss file containing `background-image: url( data:...)`

[gthb]

What version of Next.js are you using?

12.0.3.canary-2

What version of Node.js are you using?

14.18.1

What browser are you using?

Chrome (but not relevant)

What operating system are you using?

macOS

How are you deploying your application?

Not yet deployed

Describe the Bug

As of Next.js 12.0.3-canary.2, this in a .scss file:

.myproj {
  ...

  &.outlined:not(.selected) {
    background-image: url(
      'data:image/svg+xml;utf8,' +
      '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">' +
      '<rect fill="gray" width="5" height="5" y="0" x="0" />' +
      '</svg>'
    );
    background-repeat: repeat-x;
    background-size: 3px 3px;
    background-position: right 0 bottom .05em;
  }

  ...
}

causes next build to fail with:

./src/myproj/styles/index.module.scss
HookWebpackError: Cannot find module './data:image/svg+xml;utf8,<svg xmlns="http:/www.w3.org/2000/svg" width="10" height="10"><rect fill="gray" width="5" height="5" y="0" x="0" /></svg>'
    at tryRunOrWebpackError (/Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/webpack/bundle5.js:47140:9)
    at __webpack_require_module__ (/Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/webpack/bundle5.js:32948:12)
    at __nested_webpack_require_150254__ (/Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/webpack/bundle5.js:32905:18)
    at /Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/webpack/bundle5.js:32976:20
    at symbolIterator (/Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/neo-async/async.js:1:14452)
    at done (/Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/neo-async/async.js:1:14832)
    at Hook.eval [as callAsync] (eval at create (/Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/webpack/bundle5.js:141008:10), <anonymous>:15:1)
    at /Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/webpack/bundle5.js:32883:43
    at symbolIterator (/Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/neo-async/async.js:1:14410)
    at timesSync (/Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/neo-async/async.js:1:5037)
-- inner error --
Error: Cannot find module './data:image/svg+xml;utf8,<svg xmlns="http:/www.w3.org/2000/svg" width="10" height="10"><rect fill="gray" width="5" height="5" y="0" x="0" /></svg>'
    at webpackMissingModule (/Users/gthb/git/MYPROJ-client/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[6].use[1]!/Users/gthb/git/MYPROJ-client/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[6].use[2]!/Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[6].use[3]!/Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[4]!/Users/gthb/git/MYPROJ-client/src/myproj/styles/index.module.scss:4:106)
    at Object.<anonymous> (/Users/gthb/git/MYPROJ-client/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[6].use[1]!/Users/gthb/git/MYPROJ-client/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[6].use[2]!/Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[6].use[3]!/Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[4]!/Users/gthb/git/MYPROJ-client/src/myproj/styles/index.module.scss:4:344)
    at /Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/webpack/bundle5.js:91484:11
    at Hook.eval [as call] (eval at create (/Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/webpack/bundle5.js:140994:10), <anonymous>:7:1)
    at /Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/webpack/bundle5.js:32950:39
    at tryRunOrWebpackError (/Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/webpack/bundle5.js:47135:7)
    at __webpack_require_module__ (/Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/webpack/bundle5.js:32948:12)
    at __nested_webpack_require_150254__ (/Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/webpack/bundle5.js:32905:18)
    at /Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/webpack/bundle5.js:32976:20
    at symbolIterator (/Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/neo-async/async.js:1:14452)

Generated code for /Users/gthb/git/MYPROJ-client/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[6].use[1]!/Users/gthb/git/MYPROJ-client/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[6].use[2]!/Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[6].use[3]!/Users/gthb/git/MYPROJ-client/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[4]!/Users/gthb/git/MYPROJ-client/src/myproj/styles/index.module.scss
  1 | // Imports
  2 | var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("/Users/gthb/git/MYPROJ-client/node_modules/next/dist/build/webpack/loaders/css-loader/src/runtime/api.js");
  3 | var ___CSS_LOADER_GET_URL_IMPORT___ = __webpack_require__("/Users/gthb/git/MYPROJ-client/node_modules/next/dist/build/webpack/loaders/css-loader/src/runtime/getUrl.js");
  4 | var ___CSS_LOADER_URL_IMPORT_0___ = __webpack_require__(Object(function webpackMissingModule() { var e = new Error("Cannot find module './data:image/svg+xml;utf8,<svg xmlns=\"http:/www.w3.org/2000/svg\" width=\"10\" height=\"10\"><rect fill=\"gray\" width=\"5\" height=\"5\" y=\"0\" x=\"0\" /></svg>'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()));
  5 | var ___CSS_LOADER_URL_IMPORT_1___ = __webpack_require__(Object(function webpackMissingModule() { var e = new Error("Cannot find module './data:image/svg+xml;utf8,<svg xmlns=\"http:/www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"none\" stroke=\"gray\" stroke-width=\"2\" d=\"M1,1 L9,9 M1,9 L9,1\"/></svg>'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()));
  6 | var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
  7 | var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
  8 | var ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);
  9 | // Module
 10 | ___CSS_LOADER_EXPORT___.push([module.id, "

// omitting lots of CSS that seems OK and not relevant, except here are all the rules containing LOADER, extracted with:
// pbpaste | rg -o --pcre2 '(?<=\})[^{]+\{[^}]+LOADER[^}]+\}' | pbcopy

.styles_editor__38BxS.styles_outlined__1i4Hx:not(.styles_selected__2b2R3){background-image:url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ");background-repeat:repeat-x;background-size:3px 3px;background-position:right 0 bottom .05em}

.styles_dropdown__3SSSr select::-webkit-search-cancel-button{-webkit-appearance:none;height:1em;width:1em;margin-right:-3px;background-color:#f2f2f2;background-image:url(" + ___CSS_LOADER_URL_REPLACEMENT_1___ + ");background-repeat:no-repeat;background-position:center;background-size:8px 8px;border-radius:1em;cursor:pointer;z-index:1}

.styles_container__QCUb4 .styles_inputWrap__D2OqW input::-webkit-search-cancel-button{-webkit-appearance:none;height:1em;width:1em;margin-right:-3px;background-color:#f2f2f2;background-image:url(" + ___CSS_LOADER_URL_REPLACEMENT_1___ + ");background-repeat:no-repeat;background-position:center;background-size:8px 8px;border-radius:1em;cursor:pointer;z-index:1}

.styles_table__1yJJn .styles_filter__3RMh8 .styles_inputWrap__D2OqW input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;height:1em;width:1em;margin-right:-3px;background-color:#f2f2f2;background-image:url(" + ___CSS_LOADER_URL_REPLACEMENT_1___ + ");background-repeat:no-repeat;background-position:center;background-size:8px 8px;border-radius:1em;cursor:pointer;z-index:1}

", ""]);
 11 | // Exports
 12 | ___CSS_LOADER_EXPORT___.locals = {
 13 |   "primaryPurple": "#583491",
 14 |   "purple50": "#7243bc",
 15 |   "purple70": "#aa8ed7",
... etc. ...
 69 |   "outlined": "styles_outlined__1i4Hx",
... etc. ...
170 |   "noui": "styles_noui__1jOmv",
171 |   "mathNotation": "styles_mathNotation__ryjXn"
172 | };
173 | module.exports = ___CSS_LOADER_EXPORT___;

This is fine in Next.js 12.0.3-canary.1 and in 12.0.2 (and has been fine in our Next.js build for a year), it only fails once 12.0.3-canary.2 is installed.

Expected Behavior

npm run build succeeds on our project like in previous Next.js versions.

To Reproduce

Extracting a clean repro case from our big closed-source project is taking some doing. Can you diagnose based on the above?

[rtritto]

Same problem here importing an .scss file:

Module not found: Can't resolve './data:application/font-woff;charset=utf-8;base64,<base64_placeholder>'

Info

next.js version: 12.0.3-canary.2
yarn berry: 3.1.0
Windows

[esistgut]

Same problem on 12.0.3-canary.5

[styfle]

I believe this was fixed in #31134

Please try the most recent canary: yarn add next@canary

[opolo]

Hi @styfle!

I just tried using: "next": "^12.0.4-canary.3",

I still get the same data issue (here's all details I get in case it helps):

[opolo]

I have attached the css that fails (as a txt file) if it helps. I use it just like this in my code (in the relevant component that uses the CSS):

import 'survey-analytics/survey.analytics.tabulator.css';

If I comment out that line, NextJS builds the project. If its there, it fails with above error. Downgrading to the highest NextJS 11 version solved this issue for me. It seems like for the others in this thread, they can downgrade to 12.0.2. That has not worked here, so unsure if our issues are fully the same, although all issues seem to be 1) only related to NextJS 12.x and 2) related to CSS data URIs with SVGs.

css error.txt

[gthb]

Yep, this is fixed for me in Next.js 12.0.4-canary.1 (and still fails in 12.0.4-canary.0, so yes, looks like #31134 was it.) Thanks!