Roots Discourse

Base64 SVG erros on :production

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.

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

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

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.

This should be solvable:

@ 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”.

@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

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

@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?

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

@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,
    },
  };
};
1 Like

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