Skip to content

v4.0.0 has problems with base64 in url #1141

Closed
@ping2lai2

Description

@ping2lai2
  • Operating System: windows 10
  • Node Version: 12.16.2
  • NPM Version: 6.14.4
  • webpack Version: 4.44.0
  • css-loader Version: 4.0.0

Expected Behavior

svg encoded in base64 when used in a url() function throws no errors

Actual Behavior

throws error:

ERROR in ./src/App.css (./node_modules/css-loader/dist/cjs.js!./src/App.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '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="#636363" d="M95.5,0C42.8,0,0,42.8,0,95.5S42.8,191,95.5,191S191,148.2,191,95.5S148.2,0,95.5,0z M95.5,187.6
        c-50.848,0-92.1-41.25-92.1-92.1c0-50.848,41.252-92.1,92.1-92.1c50.85,0,92.1,41.252,92.1,92.1
        C187.6,146.35,146.35,187.6,95.5,187.6z"/>
<g>
...
</svg>
' in 'C:\Users\e.kazak\Desktop\example\src'
    at C:\Users\e.kazak\Desktop\example\node_modules\enhanced-resolve\lib\Resolver.js:209:21
    at C:\Users\e.kazak\Desktop\example\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Users\e.kazak\Desktop\example\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:13:1)
    at C:\Users\e.kazak\Desktop\example\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:44:7
    at C:\Users\e.kazak\Desktop\example\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Users\e.kazak\Desktop\example\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:13:1)
    at C:\Users\e.kazak\Desktop\example\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Users\e.kazak\Desktop\example\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:25:1)
    at C:\Users\e.kazak\Desktop\example\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:67:43
    at C:\Users\e.kazak\Desktop\example\node_modules\enhanced-resolve\lib\Resolver.js:285:5
 @ ./src/App.css 2:26-87
 @ ./src/App.js
 @ ./src/index.js

How Do We Reproduce?

clone this repo
install dependencies
and run npm run dev

it works correctly with css-loader v3

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions