Base64 SVG erros on :production

sage
1

I have a scenario where I need to base64 my svg icons because that’s how the project was set up and I need to change the fill color. Everything compiles when running yarn build, but after running yarn build:production, I get svgo errors. This only happens when including only some of the base64 svgs, not all. BTW, all of these svgs are very simplistic icons. I’ve tried optimizing the problematic svgs online with svgo beforehand, but the errors still persist.

Is there a fix? svg-loader?

The error:

 error  in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'toFixed' of undefined
    at strongRound (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-svgo/node_modules/svgo/plugins/convertPathData.js:766:21)
    at /Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-svgo/node_modules/svgo/plugins/convertPathData.js:424:17
    at Array.filter (<anonymous>)
    at filters (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-svgo/node_modules/svgo/plugins/convertPathData.js:272:17)
    at Object.exports.fn (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-svgo/node_modules/svgo/plugins/convertPathData.js:79:20)
    at /Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-svgo/node_modules/svgo/lib/svgo/plugins.js:59:45
    at Array.filter (<anonymous>)
    at monkeys (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-svgo/node_modules/svgo/lib/svgo/plugins.js:46:39)
    at /Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-svgo/node_modules/svgo/lib/svgo/plugins.js:66:17
    at Array.filter (<anonymous>)
    at monkeys (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-svgo/node_modules/svgo/lib/svgo/plugins.js:46:39)
    at perItem (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-svgo/node_modules/svgo/lib/svgo/plugins.js:77:12)
    at /Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-svgo/node_modules/svgo/lib/svgo/plugins.js:18:24
    at Array.forEach (<anonymous>)
    at module.exports (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-svgo/node_modules/svgo/lib/svgo/plugins.js:14:13)
    at /Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-svgo/node_modules/svgo/lib/svgo.js:63:17
    at SAXParser.sax.onend (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-svgo/node_modules/svgo/lib/svgo/svg2js.js:156:13)
    at emit (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/sax/lib/sax.js:624:35)
    at end (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/sax/lib/sax.js:667:5)
    at SAXParser.write (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/sax/lib/sax.js:975:14)
    at SAXParser.close (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/sax/lib/sax.js:157:38)
    at module.exports (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-svgo/node_modules/svgo/lib/svgo/svg2js.js:169:28)
    at module.exports.SVGO._optimizeOnce (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-svgo/node_modules/svgo/lib/svgo.js:56:5)
    at module.exports.SVGO.optimize (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-svgo/node_modules/svgo/lib/svgo.js:49:11)
    at /Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-svgo/dist/index.js:64:25
    at new Promise (<anonymous>)
    at /Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-svgo/dist/index.js:63:23
    at walk (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-value-parser/lib/walk.js:7:16)
    at ValueParser.walk (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-value-parser/lib/index.js:18:3)
    at minifyPromise (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/postcss-svgo/dist/index.js:33:64)
    at runLoaders (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/webpack/lib/NormalModule.js:195:19)
    at /Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.<anonymous> (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/css-loader/lib/loader.js:50:18)
    at /Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/css-loader/lib/processCss.js:236:4

 2 assets
error Command failed with exit code 2.
1 Like
2

This seems to be a svgo error. What svgo your build setup is using?
npm list | grep svgo

3

I have svgo@1.3.0 installed.

│ │ ├─┬ UNMET DEPENDENCY postcss-svgo@4.0.2
│ │ │ └── UNMET DEPENDENCY svgo@1.3.0
│ ├─┬ UNMET DEPENDENCY imagemin-svgo@7.0.0
│ │ └─┬ UNMET DEPENDENCY svgo@1.3.0
4

I tried throwing out my node_modules directory and yarn.lock file, and start with a fresh yarn install. And that didn’t work either because then I receive an error just running yarn build.

Ziggy-Xi:sage-cmcs scottrod$ yarn
yarn install v1.17.3
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning " > stylelint-webpack-plugin@0.10.5" has incorrect peer dependency "webpack@^1.13.2 || ^2.7.0 || ^3.11.0 || ^4.4.0".
[5/5] 🔨  Building fresh packages...
✨  Done in 9.79s.
Ziggy-Xi:sage-cmcs scottrod$ yarn build
yarn run v1.17.3
$ webpack --progress --config resources/assets/build/webpack.config.js
 95% emitting/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/copy-globs-webpack-plugin/index.js:208
        Object.keys(this.files).filter(absoluteFrom => !compilation.fileDependencies.has(absoluteFrom)).forEach(absoluteFrom => compilation.fileDependencies.add(absoluteFrom));
                                                                                     ^

TypeError: compilation.fileDependencies.has is not a function
    at Object.keys.filter.absoluteFrom (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/copy-globs-webpack-plugin/index.js:208:86)
    at Array.filter (<anonymous>)
    at module.exports.afterEmitHandler (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/copy-globs-webpack-plugin/index.js:208:33)
    at Compiler.applyPluginsAsyncSeries1 (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/tapable/lib/Tapable.js:222:13)
    at Compiler.afterEmit (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/webpack/lib/Compiler.js:361:9)
    at require.forEach.err (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/webpack/lib/Compiler.js:350:15)
    at /Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/async/dist/async.js:1064:13)
    at /Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/async/dist/async.js:969:16
    at /Users/scottrod/Sites/cmcs-2019/wp-content/themes/sage-cmcs/node_modules/graceful-fs/graceful-fs.js:57:14
    at FSReqWrap.args [as oncomplete] (fs.js:140:20)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

So, if I put back the old node_modules directory yarn build runs, but yarn build:production doesn’t due to the svgo library. What a nightmare.

1 Like
5

This should be solvable:

6

@ strarsis Thanks, that helped me with installing fresh node modules, but still the svg problem still remains after installing an older version of “copy-globs-webpack-plugin”.

7

@strarsis I found the issue. The postcss-svgo module utilizes svgo v1.3.0 which contains the problem. Manually rolling back svgo to v1.2.2 resolves the issue.

https://github.com/svg/svgo/issues/990

9

I think postcss-svgo needs to be updated to v4.0.2, too for this to work with svgo v1.2.2. The base64 svgs compile without issue, but now I’m noticing some of my styles missing in the :production build.

Here’s an example of a base64 svg that will throw an error with :production only:

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.157 12a4.573 4.573 0 1 1-9.147 0 4.573 4.573 0 0 1 9.147 0zm10.833 0a4.573 4.573 0 1 1-9.147 0 4.573 4.573 0 0 1 9.147 0z' fill='%23ffffff' /%3E%3C/svg%3E");
2 Likes
10

@djmtype thanks! I’m stuck at the exact same thing… trying to build:prod with base64 encoded background image styles… only downgrading svgo via yarn doesn’t seem to work really.
is there a clean way to bump postcss-svgo and svgo to those two specific versions in sage config files, or maybe a way to exclude specific base64 styles/stylesheets from compilation – or do we have to wait for an update on this?

11

Today I also noticed issues with an SVG and its styles after updating some dev dependencies… :crying_cat_face:

12

@mindshaped I actually revisited this myself because manually adding specific node module versions was ludicrous. Instead, I stuck to using Sage’s default dependencies. I did update cssnano to ~4.1.10 and added postcss-svgo ^4.0.2, but I don’t think I even needed to do that.

What I really think solved my issue was modifying one line in the postcss.config.js file so it wouldn’t optimize my base64 svgs, but still optimize my other svgs inside the images directory. Running yarn build:production has been successful eversince.

Under resources/assets/build/postcss.config.js ~Line 4 change to svgo: false.

Here’s what that file looks like in its entirety:

const cssnanoConfig = {
  preset: ['default', { discardComments: { removeAll: true }, svgo: false }]
};

module.exports = ({ file, options }) => {
  return {
    parser: options.enabled.optimize ? 'postcss-safe-parser' : undefined,
    plugins: {
      autoprefixer: true,
      cssnano: options.enabled.optimize ? cssnanoConfig : false,
    },
  };
};
2 Likes
13

@djmtype huge thanks for this detailed workaround! works flawlessly~

15

Similar error here in an old projects, says

94% asset optimizationTypeError: Cannot read property 'toFixed' of undefined

with plenty of lines referencing node_modules/svgo below …

then

error Command failed with exit code 1.

Unfortunately, djmtype’s solution did not help. Losing my mind, having to use unoptimized dist folder for production hah :slight_smile:

PS: solved it by removing yarn.lock & node_modules and updating sass-loader in package.json from ~6.0 to ~7.1.0 and node-sass from ~4.9.3 to 4.14.1. Or running yarn again.

16

This happens with a too old svgo dependency in the dependency tree. You can update it by updating the dependencies using svgo.

17

My PC runs on
Node: v10.18.0
Yarn: v1.22 .10
Sage: 9.0.9

Modified package.json per recommendation from @strarsis on issue#990 with updated css-loader to fix the outdated svgo packages.
"css-loader": "^0.28.11"

$ yarn list | grep svgo
│  │  ├─ postcss-svgo@^2.1.1
│  ├─ postcss-svgo@^4.0.3
│  ├─ postcss-svgo@4.0.3 
│  │  └─ svgo@^1.0.0     
├─ imagemin-svgo@7.1.0    
│  └─ svgo@^1.3.2
│  ├─ imagemin-svgo@^7.0.0
├─ postcss-svgo@2.1.6
│  ├─ svgo@^0.7.0
│  └─ svgo@0.7.2 
├─ svgo@1.3.2

Yarn start, Yarn build: Working fine.
Yarn build:production: get the following error

Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'toFixed' of undefined
    at strongRound (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\plugins\convertPathData.js:766:21)
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\plugins\convertPathData.js:424:17
    at Array.filter (<anonymous>)
    at filters (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\plugins\convertPathData.js:272:17)
.........
..........
 3 assets
error Command failed with exit code 2.

Can someone help me with this issue please? I have tried all the recommendations above and from the svgo issue#990. And it did not work.

Thanks!

18

So the issue has been fixed with svgo release v1.2.2.
Your grepped tree lists svgo dependencies that are lower in their versions:
svgo of postcss-svgo@2.1.6 and postcss-svgo@4.0.3.
So in your package more dependencies use an outdated version of svgo than just the css-loader you updated.
The error message you posted confirms this:

node_modules\postcss-svgo\node_modules\svgo
19

@strarsis Thanks for your answer!

The project I am working on is pretty much completed. And here is the package.json from the project. The devDependencies is original Sage 9.0.9.

The dependencies is required from the project.

I did not modify any devDependicies package to keep the development smooth since Sage 9.0.9 is the most stable version.

"devDependencies": {

    "autoprefixer": "~8.2.0",

    "browser-sync": "~2.24.7",

    "browsersync-webpack-plugin": "^0.6.0",

    "bs-html-injector": "~3.0",

    "buble-loader": "^0.4.1",

    "cache-loader": "~1.2.5",

    "clean-webpack-plugin": "^0.1.18",

    "copy-globs-webpack-plugin": "^0.2.0",

    "css-loader": "^0.28.11",

    "cssnano": "~4.0.5",

    "eslint": "~4.19.1",

    "eslint-loader": "~1.9",

    "eslint-plugin-import": "~2.14.0",

    "extract-text-webpack-plugin": "~3.0.2",

    "file-loader": "^1.1.6",

    "friendly-errors-webpack-plugin": "^1.6.1",

    "imagemin-mozjpeg": "~7.0.0",

    "imagemin-webpack-plugin": "~2.2.0",

    "import-glob": "~1.5",

    "node-sass": "~4.9.4",

    "postcss-loader": "~2.1.0",

    "postcss-safe-parser": "~3.0",

    "resolve-url-loader": "~2.3.1",

    "rimraf": "~2.6",

    "sass-loader": "~6.0",

    "style-loader": "^0.22.1",

    "stylelint": "^8.4.0",

    "stylelint-config-standard": "~18.2.0",

    "stylelint-webpack-plugin": "^0.10.5",

    "uglifyjs-webpack-plugin": "^1.3.0",

    "url-loader": "^0.6.2",

    "webpack": "~3.10.0",

    "webpack-assets-manifest": "^1.0.0",

    "webpack-dev-middleware": "~2.0.4",

    "webpack-hot-middleware": "~2.22.3",

    "webpack-merge": "~4.1.4",

    "yargs": "~11.0.0"

  },

  "dependencies": {

    "@fortawesome/fontawesome-svg-core": "^1.2.32",

    "@fortawesome/free-brands-svg-icons": "^5.15.1",

    "@fortawesome/free-regular-svg-icons": "^5.15.1",

    "@fortawesome/free-solid-svg-icons": "^5.15.1",

    "bootstrap": "v4.5.3",

    "jquery": "^3.3.1",

    "jquery-match-height": "^0.7.2",

    "js-cookie": "^2.2.1",

    "lozad": "^1.16.0",

    "popper.js": "^1.14.7",

    "slick-carousel": "^1.8.1"

The whole error message is here:

 ERROR  Failed to compile with 2 errors                                                                                                                                                              10:24:41 AM
 error  in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'toFixed' of undefined
    at strongRound (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\plugins\convertPathData.js:766:21)     
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\plugins\convertPathData.js:424:17
    at Array.filter (<anonymous>)
    at filters (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\plugins\convertPathData.js:272:17)
    at Object.exports.fn (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\plugins\convertPathData.js:79:20)
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo\plugins.js:59:45
    at Array.filter (<anonymous>)
    at monkeys (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo\plugins.js:46:39)
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo\plugins.js:66:17
    at Array.filter (<anonymous>)
    at monkeys (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo\plugins.js:46:39)
    at perItem (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo\plugins.js:77:12)
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo\plugins.js:18:24
    at Array.forEach (<anonymous>)
    at module.exports (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo\plugins.js:14:13)
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo.js:63:17
    at SAXParser.sax.onend (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo\svg2js.js:156:13)     
    at emit (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\sax\lib\sax.js:624:35)
    at end (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\sax\lib\sax.js:667:5)
    at SAXParser.write (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\sax\lib\sax.js:975:14)
    at SAXParser.close (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\sax\lib\sax.js:157:38)
    at module.exports (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo\svg2js.js:169:28)
    at module.exports.SVGO._optimizeOnce (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo.js:56:5)
    at module.exports.SVGO.optimize (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo.js:49:11)    
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\dist\index.js:64:25
    at new Promise (<anonymous>)
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\dist\index.js:63:23
    at walk (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-value-parser\lib\walk.js:7:16)
    at ValueParser.walk (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-value-parser\lib\index.js:18:3)
    at minifyPromise (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\dist\index.js:33:64)
    at runLoaders (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\webpack\lib\NormalModule.js:195:19)
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.<anonymous> (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\css-loader\lib\loader.js:50:18)
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\css-loader\lib\processCss.js:236:4

 @ multi ./scripts/main.js ./styles/main.scss

 error  in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'toFixed' of undefined
    at strongRound (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\plugins\convertPathData.js:766:21)
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\plugins\convertPathData.js:424:17
    at Array.filter (<anonymous>)
    at filters (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\plugins\convertPathData.js:272:17)
    at Object.exports.fn (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\plugins\convertPathData.js:79:20)
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo\plugins.js:59:45
    at Array.filter (<anonymous>)
    at monkeys (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo\plugins.js:46:39)
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo\plugins.js:66:17
    at Array.filter (<anonymous>)
    at monkeys (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo\plugins.js:46:39)
    at perItem (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo\plugins.js:77:12)
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo\plugins.js:18:24
    at Array.forEach (<anonymous>)
    at module.exports (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo\plugins.js:14:13)
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo.js:63:17
    at SAXParser.sax.onend (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo\svg2js.js:156:13)
    at emit (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\sax\lib\sax.js:624:35)
    at end (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\sax\lib\sax.js:667:5)
    at SAXParser.write (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\sax\lib\sax.js:975:14)
    at SAXParser.close (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\sax\lib\sax.js:157:38)
    at module.exports (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo\svg2js.js:169:28)
    at module.exports.SVGO._optimizeOnce (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo.js:56:5)
    at module.exports.SVGO.optimize (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\node_modules\svgo\lib\svgo.js:49:11)
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\dist\index.js:64:25
    at new Promise (<anonymous>)
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\dist\index.js:63:23
    at walk (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-value-parser\lib\walk.js:7:16)
    at ValueParser.walk (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-value-parser\lib\index.js:18:3)
    at minifyPromise (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\postcss-svgo\dist\index.js:33:64)
    at runLoaders (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\webpack\lib\NormalModule.js:195:19)
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.<anonymous> (C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\css-loader\lib\loader.js:50:18)
    at C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product\node_modules\css-loader\lib\processCss.js:236:4

 3 assets
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I really don’t know what to update or which package should I update.

20

Never mind. I got it. I updated css-loader to 1.0.0

$ npm ls svgo
sage@9.0.9 C:\Users\LinhPham\Local Sites\500maas\app\public\web\app\themes\500maas-product
+-- css-loader@0.28.11
| `-- cssnano@3.10.0
|   `-- postcss-svgo@2.1.6
|     `-- svgo@0.7.2 
+-- cssnano@4.0.5
| `-- cssnano-preset-default@4.0.8
|   `-- postcss-svgo@4.0.3
|     `-- svgo@1.3.2  deduped
`-- imagemin-webpack-plugin@2.2.0
  `-- imagemin-svgo@7.1.0
    `-- svgo@1.3.2

css-loader depends on a package with really old svgo version.

21

You may want to try the Sage 9.x update branch that updates all packages to latest and should fix these build issues: