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.

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

See original GitHub issue

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.

Issue Analytics

State:
Created 2 years ago
Reactions:15
Comments:22 (2 by maintainers)

Top GitHub Comments

6reactions

brc-ddcommented, Nov 1, 2021

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

5reactions

timneutkenscommented, Nov 26, 2021

This has been fixed on next@canary.