data-url in scss breaks with nextjs 12.0.3 #31016

SimonSiefke · 2021-11-05T10:02:07Z

What version of Next.js are you using?

12.0.3-canary.9

What version of Node.js are you using?

16.13.0

What browser are you using?

doesn't matter

What operating system are you using?

Ubuntu 21.04

How are you deploying your application?

doesn't matter

Describe the Bug

Data Urls in scss don't work anymore with nextjs@12.0.3

body {
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='40px' height='40px' viewBox='0 0 40 40' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='icon-cross' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M23.133131,17.8957774 C24.5141626,16.5311131 26.3265748,14.752783 28.5763495,12.5608644 C34.0734809,6.94515026 36.8205128,3.54554704 36.8205128,2.35911767 C36.8205128,-0.42160998 35.1099448,-0.744612477 31.6829036,1.39296998 C28.6932249,3.24975126 24.9335796,6.59811001 20.4102564,11.440906 C19.9758772,11.9058627 19.5415133,12.3829387 19.1071418,12.8720413 C15.7579408,8.85348519 12.9599868,6.04261373 10.7103655,4.44568753 C7.79553612,2.35942684 6.33666431,2.70662167 6.33666431,5.4903637 C6.33666431,5.95532035 8.19102589,8.46733528 11.8966815,13.0263157 C13.1758689,14.6234738 14.3022133,16.0274023 15.2728006,17.2381013 C13.0230259,19.9191998 10.9769396,22.5851491 9.13760923,25.2393501 C5.71049134,30.1606746 4,33.6115996 4,35.5949076 C4,35.6462293 4.12581744,36.3044232 4.38344946,37.5664672 C4.81782867,38.8043729 5.4558809,39.4202341 6.30069675,39.4202341 C8.01126479,37.0259655 9.83863153,34.4626597 11.782797,31.7303168 C15.1319979,27.0414861 17.5615337,23.8079057 19.0683367,22.029421 C19.3738999,22.4430559 19.6045677,22.7510097 19.7573493,22.9593188 C19.7573493,22.9834725 21.7525136,26.2955428 25.7397744,32.8897713 C28.6036817,37.6299238 30.4700069,40 31.33875,40 C32.3363321,40 33.1151947,39.6799655 33.6784053,39.0338523 C34.1127845,38.5205883 34.3284748,37.9530036 34.3284748,37.3340507 C34.3284748,35.6855709 32.8725939,32.5033122 29.9577645,27.7900573 C27.9146691,24.4900832 25.6379763,21.1930463 23.1335912,17.895932 L23.133131,17.8957774 Z' id='Page-1' fill='%23506466'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")
    no-repeat center;
}

Next Build fails with the following error:

 next build && next export

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

./styles/globals.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[10].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[10].use[2]!./node_modules/next/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[10].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[10].use[4]!./styles/globals.scss
Module not found: Can't resolve './data:image/svg+xml,<?xml version='1.0' encoding='UTF-8'?><svg width='40px' height='40px' viewBox='0 0 40 40' version='1.1' xmlns='http:/www.w3.org/2000/svg' xmlns:xlink='http:/www.w3.org/1999/xlink'><desc>Created with Sketch.</desc><defs></defs><g id='icon-cross' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><path d='M23.133131,17.8957774 C24.5141626,16.5311131 26.3265748,14.752783 28.5763495,12.5608644 C34.0734809,6.94515026 36.8205128,3.54554704 36.8205128,2.35911767 C36.8205128,-0.42160998 35.1099448,-0.744612477 31.6829036,1.39296998 C28.6932249,3.24975126 24.9335796,6.59811001 20.4102564,11.440906 C19.9758772,11.9058627 19.5415133,12.3829387 19.1071418,12.8720413 C15.7579408,8.85348519 12.9599868,6.04261373 10.7103655,4.44568753 C7.79553612,2.35942684 6.33666431,2.70662167 6.33666431,5.4903637 C6.33666431,5.95532035 8.19102589,8.46733528 11.8966815,13.0263157 C13.1758689,14.6234738 14.3022133,16.0274023 15.2728006,17.2381013 C13.0230259,19.9191998 10.9769396,22.5851491 9.13760923,25.2393501 C5.71049134,30.1606746 4,33.6115996 4,35.5949076 C4,35.6462293 4.12581744,36.3044232 4.38344946,37.5664672 C4.81782867,38.8043729 5.4558809,39.4202341 6.30069675,39.4202341 C8.01126479,37.0259655 9.83863153,34.4626597 11.782797,31.7303168 C15.1319979,27.0414861 17.5615337,23.8079057 19.0683367,22.029421 C19.3738999,22.4430559 19.6045677,22.7510097 19.7573493,22.9593188 C19.7573493,22.9834725 21.7525136,26.2955428 25.7397744,32.8897713 C28.6036817,37.6299238 30.4700069,40 31.33875,40 C32.3363321,40 33.1151947,39.6799655 33.6784053,39.0338523 C34.1127845,38.5205883 34.3284748,37.9530036 34.3284748,37.3340507 C34.3284748,35.6855709 32.8725939,32.5033122 29.9577645,27.7900573 C27.9146691,24.4900832 25.6379763,21.1930463 23.1335912,17.895932 L23.133131,17.8957774 Z' id='Page-1' fill='' in '/tmp/nextjs-bug-data-url/styles'

Import trace for requested module:
./styles/globals.scss
./pages/_app.js

./styles/globals.scss
HookWebpackError: Cannot find module './data:image/svg+xml,<?xml version='1.0' encoding='UTF-8'?><svg width='40px' height='40px' viewBox='0 0 40 40' version='1.1' xmlns='http:/www.w3.org/2000/svg' xmlns:xlink='http:/www.w3.org/1999/xlink'><desc>Created with Sketch.</desc><defs></defs><g id='icon-cross' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><path d='M23.133131,17.8957774 C24.5141626,16.5311131 26.3265748,14.752783 28.5763495,12.5608644 C34.0734809,6.94515026 36.8205128,3.54554704 36.8205128,2.35911767 C36.8205128,-0.42160998 35.1099448,-0.744612477 31.6829036,1.39296998 C28.6932249,3.24975126 24.9335796,6.59811001 20.4102564,11.440906 C19.9758772,11.9058627 19.5415133,12.3829387 19.1071418,12.8720413 C15.7579408,8.85348519 12.9599868,6.04261373 10.7103655,4.44568753 C7.79553612,2.35942684 6.33666431,2.70662167 6.33666431,5.4903637 C6.33666431,5.95532035 8.19102589,8.46733528 11.8966815,13.0263157 C13.1758689,14.6234738 14.3022133,16.0274023 15.2728006,17.2381013 C13.0230259,19.9191998 10.9769396,22.5851491 9.13760923,25.2393501 C5.71049134,30.1606746 4,33.6115996 4,35.5949076 C4,35.6462293 4.12581744,36.3044232 4.38344946,37.5664672 C4.81782867,38.8043729 5.4558809,39.4202341 6.30069675,39.4202341 C8.01126479,37.0259655 9.83863153,34.4626597 11.782797,31.7303168 C15.1319979,27.0414861 17.5615337,23.8079057 19.0683367,22.029421 C19.3738999,22.4430559 19.6045677,22.7510097 19.7573493,22.9593188 C19.7573493,22.9834725 21.7525136,26.2955428 25.7397744,32.8897713 C28.6036817,37.6299238 30.4700069,40 31.33875,40 C32.3363321,40 33.1151947,39.6799655 33.6784053,39.0338523 C34.1127845,38.5205883 34.3284748,37.9530036 34.3284748,37.3340507 C34.3284748,35.6855709 32.8725939,32.5033122 29.9577645,27.7900573 C27.9146691,24.4900832 25.6379763,21.1930463 23.1335912,17.895932 L23.133131,17.8957774 Z' id='Page-1' fill=''
    at tryRunOrWebpackError (/tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/webpack/bundle5.js:47140:9)
    at __webpack_require_module__ (/tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/webpack/bundle5.js:32948:12)
    at __nested_webpack_require_150254__ (/tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/webpack/bundle5.js:32905:18)
    at /tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/webpack/bundle5.js:32976:20
    at symbolIterator (/tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/neo-async/async.js:1:14452)
    at done (/tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/neo-async/async.js:1:14832)
    at Hook.eval [as callAsync] (eval at create (/tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/webpack/bundle5.js:141008:10), <anonymous>:15:1)
    at /tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/webpack/bundle5.js:32883:43
    at symbolIterator (/tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/neo-async/async.js:1:14410)
    at timesSync (/tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/neo-async/async.js:1:5037)
-- inner error --
Error: Cannot find module './data:image/svg+xml,<?xml version='1.0' encoding='UTF-8'?><svg width='40px' height='40px' viewBox='0 0 40 40' version='1.1' xmlns='http:/www.w3.org/2000/svg' xmlns:xlink='http:/www.w3.org/1999/xlink'><desc>Created with Sketch.</desc><defs></defs><g id='icon-cross' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><path d='M23.133131,17.8957774 C24.5141626,16.5311131 26.3265748,14.752783 28.5763495,12.5608644 C34.0734809,6.94515026 36.8205128,3.54554704 36.8205128,2.35911767 C36.8205128,-0.42160998 35.1099448,-0.744612477 31.6829036,1.39296998 C28.6932249,3.24975126 24.9335796,6.59811001 20.4102564,11.440906 C19.9758772,11.9058627 19.5415133,12.3829387 19.1071418,12.8720413 C15.7579408,8.85348519 12.9599868,6.04261373 10.7103655,4.44568753 C7.79553612,2.35942684 6.33666431,2.70662167 6.33666431,5.4903637 C6.33666431,5.95532035 8.19102589,8.46733528 11.8966815,13.0263157 C13.1758689,14.6234738 14.3022133,16.0274023 15.2728006,17.2381013 C13.0230259,19.9191998 10.9769396,22.5851491 9.13760923,25.2393501 C5.71049134,30.1606746 4,33.6115996 4,35.5949076 C4,35.6462293 4.12581744,36.3044232 4.38344946,37.5664672 C4.81782867,38.8043729 5.4558809,39.4202341 6.30069675,39.4202341 C8.01126479,37.0259655 9.83863153,34.4626597 11.782797,31.7303168 C15.1319979,27.0414861 17.5615337,23.8079057 19.0683367,22.029421 C19.3738999,22.4430559 19.6045677,22.7510097 19.7573493,22.9593188 C19.7573493,22.9834725 21.7525136,26.2955428 25.7397744,32.8897713 C28.6036817,37.6299238 30.4700069,40 31.33875,40 C32.3363321,40 33.1151947,39.6799655 33.6784053,39.0338523 C34.1127845,38.5205883 34.3284748,37.9530036 34.3284748,37.3340507 C34.3284748,35.6855709 32.8725939,32.5033122 29.9577645,27.7900573 C27.9146691,24.4900832 25.6379763,21.1930463 23.1335912,17.895932 L23.133131,17.8957774 Z' id='Page-1' fill=''
    at webpackMissingModule (/tmp/nextjs-bug-data-url/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[10].use[1]!/tmp/nextjs-bug-data-url/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[10].use[2]!/tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[10].use[3]!/tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[10].use[4]!/tmp/nextjs-bug-data-url/styles/globals.scss:6:50)
    at Module.<anonymous> (/tmp/nextjs-bug-data-url/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[10].use[1]!/tmp/nextjs-bug-data-url/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[10].use[2]!/tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[10].use[3]!/tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[10].use[4]!/tmp/nextjs-bug-data-url/styles/globals.scss:6:1945)
    at /tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/webpack/bundle5.js:91484:11
    at Hook.eval [as call] (eval at create (/tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/webpack/bundle5.js:140994:10), <anonymous>:7:1)
    at /tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/webpack/bundle5.js:32950:39
    at tryRunOrWebpackError (/tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/webpack/bundle5.js:47135:7)
    at __webpack_require_module__ (/tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/webpack/bundle5.js:32948:12)
    at __nested_webpack_require_150254__ (/tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/webpack/bundle5.js:32905:18)
    at /tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/webpack/bundle5.js:32976:20
    at symbolIterator (/tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/neo-async/async.js:1:14452)

Generated code for /tmp/nextjs-bug-data-url/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[10].use[1]!/tmp/nextjs-bug-data-url/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[10].use[2]!/tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[10].use[3]!/tmp/nextjs-bug-data-url/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[10].use[4]!/tmp/nextjs-bug-data-url/styles/globals.scss
 1 | __webpack_require__.r(__webpack_exports__);
 2 | /* harmony import */ var _node_modules_next_dist_build_webpack_loaders_css_loader_src_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("/tmp/nextjs-bug-data-url/node_modules/next/dist/build/webpack/loaders/css-loader/src/runtime/api.js");
 3 | /* harmony import */ var _node_modules_next_dist_build_webpack_loaders_css_loader_src_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_next_dist_build_webpack_loaders_css_loader_src_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);
 4 | /* harmony import */ var _node_modules_next_dist_build_webpack_loaders_css_loader_src_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("/tmp/nextjs-bug-data-url/node_modules/next/dist/build/webpack/loaders/css-loader/src/runtime/getUrl.js");
 5 | /* harmony import */ var _node_modules_next_dist_build_webpack_loaders_css_loader_src_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_next_dist_build_webpack_loaders_css_loader_src_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1__);
 6 | Object(function webpackMissingModule() { var e = new Error("Cannot find module './data:image/svg+xml,<?xml version='1.0' encoding='UTF-8'?><svg width='40px' height='40px' viewBox='0 0 40 40' version='1.1' xmlns='http:/www.w3.org/2000/svg' xmlns:xlink='http:/www.w3.org/1999/xlink'><desc>Created with Sketch.</desc><defs></defs><g id='icon-cross' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><path d='M23.133131,17.8957774 C24.5141626,16.5311131 26.3265748,14.752783 28.5763495,12.5608644 C34.0734809,6.94515026 36.8205128,3.54554704 36.8205128,2.35911767 C36.8205128,-0.42160998 35.1099448,-0.744612477 31.6829036,1.39296998 C28.6932249,3.24975126 24.9335796,6.59811001 20.4102564,11.440906 C19.9758772,11.9058627 19.5415133,12.3829387 19.1071418,12.8720413 C15.7579408,8.85348519 12.9599868,6.04261373 10.7103655,4.44568753 C7.79553612,2.35942684 6.33666431,2.70662167 6.33666431,5.4903637 C6.33666431,5.95532035 8.19102589,8.46733528 11.8966815,13.0263157 C13.1758689,14.6234738 14.3022133,16.0274023 15.2728006,17.2381013 C13.0230259,19.9191998 10.9769396,22.5851491 9.13760923,25.2393501 C5.71049134,30.1606746 4,33.6115996 4,35.5949076 C4,35.6462293 4.12581744,36.3044232 4.38344946,37.5664672 C4.81782867,38.8043729 5.4558809,39.4202341 6.30069675,39.4202341 C8.01126479,37.0259655 9.83863153,34.4626597 11.782797,31.7303168 C15.1319979,27.0414861 17.5615337,23.8079057 19.0683367,22.029421 C19.3738999,22.4430559 19.6045677,22.7510097 19.7573493,22.9593188 C19.7573493,22.9834725 21.7525136,26.2955428 25.7397744,32.8897713 C28.6036817,37.6299238 30.4700069,40 31.33875,40 C32.3363321,40 33.1151947,39.6799655 33.6784053,39.0338523 C34.1127845,38.5205883 34.3284748,37.9530036 34.3284748,37.3340507 C34.3284748,35.6855709 32.8725939,32.5033122 29.9577645,27.7900573 C27.9146691,24.4900832 25.6379763,21.1930463 23.1335912,17.895932 L23.133131,17.8957774 Z' id='Page-1' fill=''"); e.code = 'MODULE_NOT_FOUND'; throw e; }());
 7 | // Imports
 8 |
 9 |
10 |
11 | var ___CSS_LOADER_EXPORT___ = _node_modules_next_dist_build_webpack_loaders_css_loader_src_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(false);
12 | var ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_next_dist_build_webpack_loaders_css_loader_src_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default()(Object(function webpackMissingModule() { var e = new Error("Cannot find module './data:image/svg+xml,<?xml version='1.0' encoding='UTF-8'?><svg width='40px' height='40px' viewBox='0 0 40 40' version='1.1' xmlns='http:/www.w3.org/2000/svg' xmlns:xlink='http:/www.w3.org/1999/xlink'><desc>Created with Sketch.</desc><defs></defs><g id='icon-cross' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><path d='M23.133131,17.8957774 C24.5141626,16.5311131 26.3265748,14.752783 28.5763495,12.5608644 C34.0734809,6.94515026 36.8205128,3.54554704 36.8205128,2.35911767 C36.8205128,-0.42160998 35.1099448,-0.744612477 31.6829036,1.39296998 C28.6932249,3.24975126 24.9335796,6.59811001 20.4102564,11.440906 C19.9758772,11.9058627 19.5415133,12.3829387 19.1071418,12.8720413 C15.7579408,8.85348519 12.9599868,6.04261373 10.7103655,4.44568753 C7.79553612,2.35942684 6.33666431,2.70662167 6.33666431,5.4903637 C6.33666431,5.95532035 8.19102589,8.46733528 11.8966815,13.0263157 C13.1758689,14.6234738 14.3022133,16.0274023 15.2728006,17.2381013 C13.0230259,19.9191998 10.9769396,22.5851491 9.13760923,25.2393501 C5.71049134,30.1606746 4,33.6115996 4,35.5949076 C4,35.6462293 4.12581744,36.3044232 4.38344946,37.5664672 C4.81782867,38.8043729 5.4558809,39.4202341 6.30069675,39.4202341 C8.01126479,37.0259655 9.83863153,34.4626597 11.782797,31.7303168 C15.1319979,27.0414861 17.5615337,23.8079057 19.0683367,22.029421 C19.3738999,22.4430559 19.6045677,22.7510097 19.7573493,22.9593188 C19.7573493,22.9834725 21.7525136,26.2955428 25.7397744,32.8897713 C28.6036817,37.6299238 30.4700069,40 31.33875,40 C32.3363321,40 33.1151947,39.6799655 33.6784053,39.0338523 C34.1127845,38.5205883 34.3284748,37.9530036 34.3284748,37.3340507 C34.3284748,35.6855709 32.8725939,32.5033122 29.9577645,27.7900573 C27.9146691,24.4900832 25.6379763,21.1930463 23.1335912,17.895932 L23.133131,17.8957774 Z' id='Page-1' fill=''"); e.code = 'MODULE_NOT_FOUND'; throw e; }()), { hash: "#506466'></path></g></svg>" });
13 | // Module
14 | ___CSS_LOADER_EXPORT___.push([module.id, "body{background:url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ") no-repeat center}", ""]);
15 | // Exports
16 | /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
17 |

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


> Build failed because of webpack errors

Expected Behavior

Data Urls in scss work normally like in nextjs@12.0.2

To Reproduce

See https://github.com/SimonSiefke/nextjs-bug-data-url

The text was updated successfully, but these errors were encountered:

rtritto · 2021-11-05T21:26:55Z

Same #30895 #30998

opolo · 2021-11-07T12:49:12Z

Same - created my findings over here surveyjs/survey-analytics#181 as it was the CSS files from this library I encountered the issues with :) Maybe the info I posted there can help troubleshooting :)

opolo · 2021-11-07T14:42:41Z

It seems like its any 12.x.x version. Reverting to 11.x.x versions made us able to deploy again to production, so we will follow that version for a while.

sambecker · 2021-11-07T16:21:25Z

FWIW my error surfaced via scss from Bootstrap which was importing an svg

rtritto · 2021-11-07T17:41:28Z

I think that this issue is related to one of this changes:

update mini-css-plugin at v2 in update mini-css-plugin and remove experimentalUseImportModule #30617
This rule seems correct:

next.js/packages/next/build/webpack/config/blocks/css/index.ts

Lines 354 to 367 in eb1b125

    
           { 
        
             // This should only be applied to CSS files 
        
             issuer: regexLikeCss, 
        
             // Exclude extensions that webpack handles by default 
        
             exclude: [ 
        
               /\.(js|mjs|jsx|ts|tsx)$/, 
        
               /\.html$/, 
        
               /\.json$/, 
        
               /\.webpack\[[^\]]+\]$/, 
        
             ], 
        
             // `asset/resource` always emits a URL reference, where `asset` 
        
             // might inline the asset as a data URI 
        
             type: 'asset/resource', 
        
           },

resolve-url-loader in Update loader-utils #30743 (probably)

To investigate with next.js v12.0.3-canary.2 changes.

FYI @sokra @ijjk @timneutkens

shivamCode0 · 2021-11-08T00:24:10Z

I can confirm it works on 12.0.3-canary.1 but not on 12.0.3-canary.2

MilesSRC · 2021-11-08T01:57:27Z

FWIW my error surfaced via scss from Bootstrap which was importing an svg

Having this same issue with importing Bootstrap.

havran · 2021-11-08T06:59:45Z

Confirm same problem content: url("data:image/svg+xml,%3Csvg... in my .scss cause error.

roshaninet · 2021-11-08T07:50:02Z

same problem with importing Bootstrap

davidbonachera · 2021-11-08T09:04:01Z

Downgraded to 12.0.3-canary.1 in the meantime

esistgut · 2021-11-08T11:11:55Z

12.0.3-canary.10, 12.0.3-canary.1, 12.0.3, 12.0.2, 12.0.1 are not working here because of this issue. Versions before 12.0.3 have problems building on docker because of #30713
We had to revert to 11.1.2.

mattiascibien · 2021-11-08T13:45:57Z

Had the same problem with 12.0.3. Working with 12.0.2 fixes the problem.

bonesoul · 2021-11-08T14:45:07Z

same, 12.0.3 breaks stuff. 12.0.2 is all good.

…ss (#31134) upgrade to loader-utils 3.1.2 for hash fix fixes #31016 fixes #30998

balazsorban44 · 2022-01-27T11:05:01Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

…ss (vercel#31134) upgrade to loader-utils 3.1.2 for hash fix fixes vercel#31016 fixes vercel#30998

SimonSiefke added the bug Issue was opened via the bug report template. label Nov 5, 2021

opolo mentioned this issue Nov 7, 2021

Tabulator unable to be compiled by webpack surveyjs/survey-analytics#181

Closed

sokra mentioned this issue Nov 8, 2021

use loader-utils 2 for resolve-url-loader to fix ./data: urls in sass #31134

Merged

kodiakhq bot closed this as completed in #31134 Nov 8, 2021

kodiakhq bot pushed a commit that referenced this issue Nov 8, 2021

use loader-utils 2 for resolve-url-loader to fix ./data: urls in sa…

283af4e

…ss (#31134) upgrade to loader-utils 3.1.2 for hash fix fixes #31016 fixes #30998

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

natew pushed a commit to natew/next.js that referenced this issue Feb 16, 2022

use loader-utils 2 for resolve-url-loader to fix ./data: urls in sa…

273e7e6

…ss (vercel#31134) upgrade to loader-utils 3.1.2 for hash fix fixes vercel#31016 fixes vercel#30998

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

data-url in scss breaks with nextjs 12.0.3 #31016

data-url in scss breaks with nextjs 12.0.3 #31016

SimonSiefke commented Nov 5, 2021

rtritto commented Nov 5, 2021

opolo commented Nov 7, 2021

opolo commented Nov 7, 2021 •

edited

sambecker commented Nov 7, 2021

rtritto commented Nov 7, 2021 •

edited

shivamCode0 commented Nov 8, 2021

MilesSRC commented Nov 8, 2021

havran commented Nov 8, 2021

roshaninet commented Nov 8, 2021

davidbonachera commented Nov 8, 2021

esistgut commented Nov 8, 2021

mattiascibien commented Nov 8, 2021

bonesoul commented Nov 8, 2021

balazsorban44 commented Jan 27, 2022

data-url in scss breaks with nextjs 12.0.3 #31016

data-url in scss breaks with nextjs 12.0.3 #31016

Comments

SimonSiefke commented Nov 5, 2021

What version of Next.js are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

How are you deploying your application?

Describe the Bug

Expected Behavior

To Reproduce

rtritto commented Nov 5, 2021

opolo commented Nov 7, 2021

opolo commented Nov 7, 2021 • edited

sambecker commented Nov 7, 2021

rtritto commented Nov 7, 2021 • edited

shivamCode0 commented Nov 8, 2021

MilesSRC commented Nov 8, 2021

havran commented Nov 8, 2021

roshaninet commented Nov 8, 2021

davidbonachera commented Nov 8, 2021

esistgut commented Nov 8, 2021

mattiascibien commented Nov 8, 2021

bonesoul commented Nov 8, 2021

balazsorban44 commented Jan 27, 2022

opolo commented Nov 7, 2021 •

edited

rtritto commented Nov 7, 2021 •

edited