next.js: Error nextjs 12 css url data:image/svg+xml.

What version of Next.js are you using?

12.0.1

What version of Node.js are you using?

16.2.0

What browser are you using?

Safari

What operating system are you using?

macOS

How are you deploying your application?

next build

Describe the Bug

in css file

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");

Expected Behavior

npm run build

test@0.1.0 build next build

info - Checking validity of types
info - Creating an optimized production build
Failed to compile.

./node_modules/devextreme/dist/css/dx.light.css TypeError: Cannot read property ‘get’ of undefined at /Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:62234:52 at Hook.eval [as callAsync] (eval at create (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:140927:10), <anonymous>:9:1) at /Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:31322:43 at symbolIterator (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/neo-async/async.js:1:14410) at done (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/neo-async/async.js:1:14832) at Hook.eval [as callAsync] (eval at create (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:140927:10), <anonymous>:15:1) at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:140729:14) at /Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:31322:43 at symbolIterator (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/neo-async/async.js:1:14410) at timesSync (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/neo-async/async.js:1:5037)

Import trace for requested module: ./pages/index.js

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: 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 /Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:53131:25 at Hook.eval [as callAsync] (eval at create (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:140927:10), <anonymous>:16:1) at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:140729:14) at Object.processResource (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:53128:8) at processResource (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:138339:11) at iteratePitchingLoaders (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:138290:10) at runLoaders (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:138516:2) at NormalModule._doBuild (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:53118:3) at NormalModule.build (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:53262:15) at /Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:27785:12

Import trace for requested module: ./node_modules/devextreme/dist/css/dx.light.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./node_modules/devextreme/dist/css/dx.light.css ./node_modules/devextreme/dist/css/dx.light.css ./pages/index.js

data:image/svg+xml;charset=UTF-8,<?xml version="1.0" encoding="utf-8"?> <!./DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="5px" height="57px" viewBox="0 0 5 57" enable-background="new 0 0 5 57" xml:space="preserve"> <path fill=" Module build failed: UnhandledSchemeError: Reading from “data:image/svg+xml;charset=UTF-8,<?xml version="1.0" encoding="utf-8"?> <!./DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="5px" height="57px" viewBox="0 0 5 57" enable-background="new 0 0 5 57" xml:space="preserve"> <path 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 /Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:53131:25 at Hook.eval [as callAsync] (eval at create (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:140927:10), <anonymous>:16:1) at Object.processResource (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:53128:8) at processResource (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:138339:11) at iteratePitchingLoaders (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:138290:10) at runLoaders (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:138516:2) at NormalModule._doBuild (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:53118:3) at NormalModule.build (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:53262:15) at /Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:27785:12 at NormalModule.needBuild (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:53549:32)

data:image/svg+xml;charset=UTF-8,<?xml version="1.0" encoding="utf-8"?> <!./DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="5px" height="79px" viewBox="0 0 5 79" enable-background="new 0 0 5 79" xml:space="preserve"> <path fill=" Module build failed: UnhandledSchemeError: Reading from “data:image/svg+xml;charset=UTF-8,<?xml version="1.0" encoding="utf-8"?> <!./DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="5px" height="79px" viewBox="0 0 5 79" enable-background="new 0 0 5 79" xml:space="preserve"> <path 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 /Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:53131:25 at Hook.eval [as callAsync] (eval at create (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:140927:10), <anonymous>:16:1) at Object.processResource (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:53128:8) at processResource (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:138339:11) at iteratePitchingLoaders (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:138290:10) at runLoaders (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:138516:2) at NormalModule._doBuild (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:53118:3) at NormalModule.build (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:53262:15) at /Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:27785:12 at NormalModule.needBuild (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:53549:32)

data:image/svg+xml;charset=UTF-8,<?xml version="1.0" encoding="utf-8"?> <!./DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="191px" height="191px" viewBox="0 0 191 191" enable-background="new 0 0 191 191" xml:space="preserve"> <path fill=" Module build failed: UnhandledSchemeError: Reading from “data:image/svg+xml;charset=UTF-8,<?xml version="1.0" encoding="utf-8"?> <!./DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="191px" height="191px" viewBox="0 0 191 191" enable-background="new 0 0 191 191" xml:space="preserve"> <path 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 /Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:53131:25 at Hook.eval [as callAsync] (eval at create (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:140927:10), <anonymous>:16:1) at Object.processResource (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:53128:8) at processResource (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:138339:11) at iteratePitchingLoaders (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:138290:10) at runLoaders (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:138516:2) at NormalModule._doBuild (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:53118:3) at NormalModule.build (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:53262:15) at /Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:27785:12 at NormalModule.needBuild (/Users/mehmet/Desktop/test/node_modules/next/dist/compiled/webpack/bundle5.js:53549:32)

Build failed because of webpack errors

To Reproduce

It’s working v11 perfectly.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 15
Comments: 22 (3 by maintainers)

Most upvoted comments

I’m able to reproduce this. Got the following logs:

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:
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.
Could not find files for / in .next/build-manifest.json
Could not find files for / in .next/build-manifest.json

It seems that Webpack is considering inline styles in encoded SVG as URI(s). For now, you can use the following property instead:

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm6 11H6v-2h12v2z'/%3E%3C/svg%3E");

brc-dd on Nov 1, 2021

This has been fixed on next@canary.

timneutkens on Nov 26, 2021

I’m having this issue on 12.0.8-canary.11 😢

skeptlk on Dec 21, 2021

@timneutkens is this the same as #31019? I don’t see that fixed on next@canary

tsriram on Nov 27, 2021

Just tested 12.0.10. Build still fails.

12.0.11-canary.10 works though.

pstoica on Feb 9, 2022

I had the same issue with next@12.0.3, just upgraded to 12.0.4 and it seems to have fixed the issue

I tested and still gives the same error. Screen Shot 2021-11-22 at 09 40 56

mehmetuken on Nov 22, 2021

npm install @svgr/webpack --save-dev

After installing svgr webpack i solved my problem by modifying next.config.js

module.exports = {
  reactStrictMode: true,
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });
    return config;
  },
  }

pikselinweb on Jan 18, 2022

Still failing on 12.0.8-canary.4

Line in question (from PDF.js):

:root {
  --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
}

pstoica on Dec 10, 2021

I had the same issue with next@12.0.3, just upgraded to 12.0.4 and it seems to have fixed the issue

tgroutars on Nov 18, 2021