Issue with css-loader + SVG cursor in Next 12

[tsriram]

What version of Next.js are you using?

12.0.2

What version of Node.js are you using?

14.17.6

What browser are you using?

Brave

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

When I import a CSS file that has a rule for custom cursor with SVG image, build fails with the below stack. It used to work with Next 11.1.2. It looks like an issue with webpack's css-loader

Import trace for requested module:
./styles/cursor.css
./pages/_app.js

./styles/cursor.css
URIError: URI malformed
    at /Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/styles/cursor.css:2:3
    at decodeURIComponent (<anonymous>)
    at Object.normalizeUrl (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/build/webpack/loaders/css-loader/src/utils.js:43:12)
    at /Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/build/webpack/loaders/css-loader/src/plugins/postcss-url-parser.js:101:31
    at walk (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/postcss-value-parser/index.js:1:5010)
    at ValueParser.walk (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/postcss-value-parser/index.js:1:326)
    at parseDeclaration (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/build/webpack/loaders/css-loader/src/plugins/postcss-url-parser.js:85:12)
    at Declaration (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/build/webpack/loaders/css-loader/src/plugins/postcss-url-parser.js:206:39)
    at LazyResult.visitTick (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/postcss/lib/lazy-result.js:456:16)
    at LazyResult.runAsync (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/postcss/lib/lazy-result.js:372:30)
    at LazyResult.async (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/postcss/lib/lazy-result.js:205:30)
    at tryRunOrWebpackError (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/webpack/bundle5.js:45579:9)
    at __webpack_require_module__ (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/webpack/bundle5.js:31387:12)
    at __nested_webpack_require_150254__ (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/webpack/bundle5.js:31344:18)
    at /Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/webpack/bundle5.js:31415:20
    at symbolIterator (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/neo-async/async.js:1:14452)
    at done (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/neo-async/async.js:1:14832)
    at Hook.eval [as callAsync] (eval at create (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/webpack/bundle5.js:141008:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/webpack/bundle5.js:140810:14)
    at /Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/webpack/bundle5.js:31322:43
    at symbolIterator (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/neo-async/async.js:1:14410)
-- inner error --
URIError: URI malformed
    at /Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/styles/cursor.css:2:3
    at decodeURIComponent (<anonymous>)
    at Object.normalizeUrl (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/build/webpack/loaders/css-loader/src/utils.js:43:12)
    at /Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/build/webpack/loaders/css-loader/src/plugins/postcss-url-parser.js:101:31
    at walk (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/postcss-value-parser/index.js:1:5010)
    at ValueParser.walk (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/postcss-value-parser/index.js:1:326)
    at parseDeclaration (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/build/webpack/loaders/css-loader/src/plugins/postcss-url-parser.js:85:12)
    at Declaration (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/build/webpack/loaders/css-loader/src/plugins/postcss-url-parser.js:206:39)
    at LazyResult.visitTick (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/postcss/lib/lazy-result.js:456:16)
    at LazyResult.runAsync (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/postcss/lib/lazy-result.js:372:30)
    at LazyResult.async (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/postcss/lib/lazy-result.js:205:30)
    at Object.<anonymous> (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[1]!/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[2]!/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/styles/cursor.css:1:7)
    at /Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/webpack/bundle5.js:89923:11
    at Hook.eval [as call] (eval at create (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/webpack/bundle5.js:140994:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/webpack/bundle5.js:140806:14)
    at /Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/webpack/bundle5.js:31389:39
    at tryRunOrWebpackError (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/webpack/bundle5.js:45574:7)
    at __webpack_require_module__ (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/webpack/bundle5.js:31387:12)
    at __nested_webpack_require_150254__ (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/webpack/bundle5.js:31344:18)
    at /Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/webpack/bundle5.js:31415:20
    at symbolIterator (/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/compiled/neo-async/async.js:1:14452)

Generated code for /Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[1]!/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[2]!/Users/cb-sriram.thiagarajan/code/playground/next-css-loader-error-repro/styles/cursor.css

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

Expected Behavior

Build & export should succeed.

To Reproduce

https://github.com/tsriram/next-css-loader-error-repro

[brc-dd]

Probably related to #30721.

[msyahidin]

i have tested reproduce repo and update nextjs to latest release (12.0.7) and canary (12.0.8-canary.18) version but the error still there

[heschong]

Taking the y="50%" out of the <text> element causes it to work. Whatever the error is that causes this in Next (or webpack?) chokes on the attributes. I've also seen this same error w/ cx and cy attributes. Hopefully that helps in tracking this down.

Maybe related to webpack-contrib/css-loader#1284 ??

[williamtetlow]

Fixed in 65e951e

[balazsorban44]

This has been fixed in #34034, you can try it 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.