Error with comment in SVG URI in CSS file

[addisonElliott]

Run next info (available from version 12.0.8 and up)

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Wed Aug 25 23:20:18 UTC 2021
Binaries:
  Node: 16.13.2
  npm: 8.1.2
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.0.8
  react: 17.0.2
  react-dom: 17.0.2

What version of Next.js are you using?

12.0.8

What version of Node.js are you using?

16.13.2

What browser are you using?

N/A

What operating system are you using?

Ubuntu (WSL)

How are you deploying your application?

npm run build

Describe the Bug

In Next.js v12, webpack has troubles when importing a CSS file that has a comment in SVG URI. Note that this previously worked fine in Next.js v11.

This is the error message.

Module build failed: UnhandledSchemeError: Reading from "data:image/svg+xml;charset=UTF-8,<?xml version="1.0" encoding="utf-8"?>
<!./-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="dx_l_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<path style="fill:" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "data:" URIs.
    at /home/addison/Node.js/nextjs-temp/fix-css-svg-bug/node_modules/next/dist/compiled/webpack/bundle5.js:49033:25
    at Hook.eval [as callAsync] (eval at create (/home/addison/Node.js/nextjs-temp/fix-css-svg-bug/node_modules/next/dist/compiled/webpack/bundle5.js:135839:10), <anonymous>:16:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/addison/Node.js/nextjs-temp/fix-css-svg-bug/node_modules/next/dist/compiled/webpack/bundle5.js:135641:14)
    at Object.processResource (/home/addison/Node.js/nextjs-temp/fix-css-svg-bug/node_modules/next/dist/compiled/webpack/bundle5.js:49030:8)
    at processResource (/home/addison/Node.js/nextjs-temp/fix-css-svg-bug/node_modules/next/dist/compiled/webpack/bundle5.js:134812:11)
    at iteratePitchingLoaders (/home/addison/Node.js/nextjs-temp/fix-css-svg-bug/node_modules/next/dist/compiled/webpack/bundle5.js:134763:10)
    at runLoaders (/home/addison/Node.js/nextjs-temp/fix-css-svg-bug/node_modules/next/dist/compiled/webpack/bundle5.js:134989:2)
    at NormalModule._doBuild (/home/addison/Node.js/nextjs-temp/fix-css-svg-bug/node_modules/next/dist/compiled/webpack/bundle5.js:49020:3)
    at NormalModule.build (/home/addison/Node.js/nextjs-temp/fix-css-svg-bug/node_modules/next/dist/compiled/webpack/bundle5.js:49164:15)
    at /home/addison/Node.js/nextjs-temp/fix-css-svg-bug/node_modules/next/dist/compiled/webpack/bundle5.js:23636:12

Below is an snippet of CSS that causes the bug. If you add this to a CSS file, Next.js will crash when attempting to build (i.e. npm run build).

.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-hover .dx-icon-toggle-delete {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C!--%20Generator%3A%20Adobe%20Illustrator%2024.0.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200)%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22dx_l_3%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20style%3D%22enable-background%3Anew%200%200%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20style%3D%22fill%3A%23333%3B%22%20d%3D%22M12%2C2C6.5%2C2%2C2%2C6.5%2C2%2C12c0%2C5.5%2C4.5%2C10%2C10%2C10s10-4.5%2C10-10C22%2C6.5%2C17.5%2C2%2C12%2C2z%20M18%2C13H6v-2h12V13z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}

This is the URL-decoded SVG file:

<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="dx_l_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<path style="fill:#333;" d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10s10-4.5,10-10C22,6.5,17.5,2,12,2z M18,13H6v-2h12V13z"/>
</svg>

This bug is identical to the one posted here: #30721. The issue was closed as being fixed but that's incorrect. The issue is still present in the latest Next.js (even canary, I've tried).

What's the bug

I've figured out what's causing the problem, I just don't know how it's supposed to work, so maybe someone can enlighten me.

The problem is that the CSS snippet above has a ! inside it (even though it's URL encoded). In the SVG, it has a comment which is denoted by <!--, which is what's causing the issue.

The bug occurs in postcss-url-parser which is responsible for parsing the url() function in CSS files. See here: https://github.com/webpack-contrib/css-loader/blob/c5062db3fc849d882a07b9f2c9f66f00325c8896/src/plugins/postcss-url-parser.js#L253-L258

The prefix is meant to be used in Webpack to specify a specific module when importing, so I presume that's why the logic is present. I know this is the problem because when I remove it locally, the build error goes away.

This code was added March 24th, 2021 in webpack-contrib/css-loader (source: webpack-contrib/css-loader@263427e). No message was given as to why it was added. This code was then copied locally to Next.js last summer I believe.

To Reproduce

Add the CSS snippet provided above to your Next.js project and it will have this issue. Just make sure the CSS file is imported in the source code somewhere.

[williamtetlow]

Looks like this is fixed in 65e951e

[balazsorban44]

This has been fixed in #34034, you can try it out on canary!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.