Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:14
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

8reactions
esistgutcommented, Nov 4, 2021

Same problem on 12.0.3-canary.5

2reactions
gthbcommented, Nov 10, 2021

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

SCSS variable in background image with SVG image data URI
Anyway, yes, I have tried using the variable, and the output that I get doesn't do any substitution at all. I'll update my...
Read more >
SVG CSS background image not showing in Chrome
I am using a SVG as a background image in CSS on a main container DIV ... url('your-file.svg');. with background-image: url('data:img/png ...
Read more >
SVGs not displaying in Chrome (Example) - Treehouse
The file paths are correct, but the SVGs are only displaying broken image icons, and the SVG used for a background image is...
Read more >
How to add SVGs with CSS (background-image)
There are TWO methods for displaying SVG images as a CSS background image: Link directly to an SVG file .your-class { background-image: url( ......
Read more >
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
Given the flexibility of SVG images, there's a lot to keep in mind when using them as background images with the background-image property, ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Next.js 12 Middlewares trigger too many HEAD requests

Next page

When using SWC, code wrapped in `if (typeof window === 'undefined')` is not removed from the browser bundle.