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

gthb · 2021-11-03T15:04:25Z

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?

The text was updated successfully, but these errors were encountered:

rtritto · 2021-11-03T23:25:17Z

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 · 2021-11-04T10:54:15Z

Same problem on 12.0.3-canary.5

styfle · 2021-11-09T20:03:38Z

I believe this was fixed in #31134

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

opolo · 2021-11-09T21:01:39Z

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 · 2021-11-09T21:17:32Z

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 · 2021-11-10T10:34:12Z

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!

bbortt · 2021-11-10T19:26:21Z

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!

can confirm too.

styfle · 2021-11-10T20:00:43Z

Ok thanks! Closing since this is fixed on canary.

@opolo If you are still having problems, please open a new issue and we'll take a look 👍

ipy · 2021-11-11T13:17:37Z

For those who are still facing this issue like me, it may be caused by enabling experimental.urlImports. There is already an issue tracking this #30522

balazsorban44 · 2022-01-27T10:05:33Z

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.

gthb added the bug Issue was opened via the bug report template. label Nov 3, 2021

alexander-akait mentioned this issue Nov 3, 2021

test: data uri webpack-contrib/css-loader#1392

Merged

6 tasks

This was referenced Nov 4, 2021

[Regression] Module not found to url() function (sass) when compiling #30998

Closed

data-url in scss breaks with nextjs 12.0.3 #31016

Closed

NautHnil mentioned this issue Nov 9, 2021

Relax restriction of images.path in next.config.js #30741

Merged

styfle assigned sokra Nov 9, 2021

styfle added kind: bug and removed bug Issue was opened via the bug report template. labels Nov 9, 2021

iicdii mentioned this issue Nov 10, 2021

importing antd.less causes error in Next.js 12.0.3 elado/next-with-less#16

Closed

styfle closed this as completed Nov 10, 2021

chemicalkosek mentioned this issue Nov 12, 2021

next dev mode not working with next 12.0.3, antd 4.16.13 elado/next-with-less#17

Closed

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

gthb commented Nov 3, 2021 •

edited

rtritto commented Nov 3, 2021 •

edited

esistgut commented Nov 4, 2021

styfle commented Nov 9, 2021

opolo commented Nov 9, 2021 •

edited

opolo commented Nov 9, 2021 •

edited

gthb commented Nov 10, 2021

bbortt commented Nov 10, 2021

styfle commented Nov 10, 2021

ipy commented Nov 11, 2021

balazsorban44 commented Jan 27, 2022

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

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

Comments

gthb commented Nov 3, 2021 • edited

What version of Next.js are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

How are you deploying your application?

Describe the Bug

Expected Behavior

To Reproduce

rtritto commented Nov 3, 2021 • edited

Info

esistgut commented Nov 4, 2021

styfle commented Nov 9, 2021

opolo commented Nov 9, 2021 • edited

opolo commented Nov 9, 2021 • edited

gthb commented Nov 10, 2021

bbortt commented Nov 10, 2021

styfle commented Nov 10, 2021

ipy commented Nov 11, 2021

balazsorban44 commented Jan 27, 2022

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

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

gthb commented Nov 3, 2021 •

edited

rtritto commented Nov 3, 2021 •

edited

opolo commented Nov 9, 2021 •

edited

opolo commented Nov 9, 2021 •

edited