Roots Discourse

Fix yarn build:production, webpack.config.optimize.js and corrupted SVGs

Hi all,
Apparently yarn build:production corrupts my checkbox SVG at TailwindCSS Custom Forms.

Here is my marked checkbox on local VS remote. The remote tickbox is not displayed.
image
yarn build produces valid SVG:

resulting SVG

url(“data:image/svg+xml,%3csvg viewBox=‘0 0 16 16’ fill=‘white’ xmlns=‘http://www.w3.org/2000/svg’%3e%3cpath d=‘M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z’/%3e%3c/svg%3e”)

yarn build:production produces corrupted SVG:

resulting checkbox SVG is messed up

url(“data:image/svg+xml;charset=utf-8,%3Csvg viewBox=‘0 0 16 16’ fill=’%23fff’ xmlns=‘http://www.w3.org/2000/svg’%3E%3Cpath d=‘M5.707 7.293a1 1 0 0-1.414 1.414 NaNl-.828 NaNa1 1 0 1.414 0 NaN NaNlNaN NaNa1 1 0 0-1.414 NaN NaNlNaN NaN NaN NaNz’/%3E%3C/svg%3E”)

I have tried tweaking my svgo plugins at webpack.config.optimize.js and then running yarn build:production. However, build results do not change - I can see that my svg is corrupted after the build.

I am sure I am editing the correct file because my build breaks if webpack.config.optimize.js has incorrect syntax.

Here is my tweaked webpack.config.optimize.js with everything set to false:

webpack.config.optimize.js
'use strict'; // eslint-disable-line
const { default: ImageminPlugin } = require('imagemin-webpack-plugin');
const imageminMozjpeg = require('imagemin-mozjpeg');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const config = require('./config');
module.exports = {
  plugins: [
    new ImageminPlugin({
      optipng: { optimizationLevel: 2 },
      gifsicle: { optimizationLevel: 3 },
      pngquant: { quality: '65-90', speed: 4 },
      svgo: {
        plugins: [
          { removeUnknownsAndDefaults: false },
          { cleanupIDs: false },
          { removeViewBox: false },
          //trying to fix my corrupted SVG:
          { removeXMLNS: false },
          { prefixIds: false },
          { cleanupListOfValues: false },
          { removeRasterImages: false },
          { sortAttrs: false },
          { removeDimensions: false },
          { removeAttrs: false },
          { removeAttributesBySelector: false },
          { removeElementsByAttr: false },
          { addClassesToSVGElement: false },
          { addAttributesToSVGElement: false },
          { removeOffCanvasPaths: false },
          { removeStyleElement: false },
          { removeScriptElement: false },
          { reusePaths: false },
          { cleanupAttrs: false },
          { inlineStyles: false },
          { removeDoctype: false },
          { removeXMLProcInst: false },
          { removeComments: false },
          { removeMetadata: false },
          { removeTitle: false },
          { removeDesc: false },
          { removeUselessDefs: false },
          { removeEditorsNSData: false },
          { removeEmptyAttrs: false },
          { removeHiddenElems: false },
          { removeEmptyText: false },
          { removeEmptyContainers: false },
          { removeViewBox: false },
          { cleanupEnableBackground: false },
          { minifyStyles: false },
          { convertStyleToAttrs: false },
          { convertColors: false },
          { convertPathData: false },
          { convertTransform: false },
          { removeUnknownsAndDefaults: false },
          { removeNonInheritableGroupAttrs: false },
          { removeUselessStrokeAndFill: false },
          { removeUnusedNS: false },
          { cleanupIDs: false },
          { cleanupNumericValues: false },
          { moveElemsAttrsToGroup: false },
          { moveGroupAttrsToElems: false },
          { collapseGroups: false },
          { mergePaths: false },
          { convertShapeToPath: false },
          { convertEllipseToCircle: false },
          { sortDefsChildren: false },
        ],
      },
      plugins: [imageminMozjpeg({ quality: 75 })],
      disable: (config.enabled.watcher),
    }),
    new UglifyJsPlugin({
      uglifyOptions: {
        ecma: 5,
        compress: {
          warnings: true,
          drop_console: true,
        },
      },
    }),
  ],
};

Can someone explain what is going on? I am slowly losing my mind over this issue. Thanks.

It may be that the svgo version is not recent enough, just installing latest svgo wouldn’t necessary fix it. Similar issue (and fix):

1 Like

wow this is insane, thanks @strarsis.
Running yarn add css-loader --dev fixed my checkboxes!
Turns out my css-loader@0.28.11 had dependency on svgo@0.7.2, both of these packages are quite old.

Here is svgo dependencies before updating css-loader:

Search "svgo" (6 hits in 1 file)
  C:\temp\npm-ls.txt (6 hits)
	Line 1329: │ │ ├─┬ postcss-svgo@2.1.6
>>>>>>  Line 1344: │ │ │ └─┬ svgo@0.7.2 <<<<<<<<<<<
	Line 1592: │ │ ├─┬ postcss-svgo@4.0.2
	Line 1596: │ │ │ └── svgo@1.3.2 deduped
	Line 2500: │ ├─┬ imagemin-svgo@7.0.0
	Line 2503: │ │ └─┬ svgo@1.3.2

… and after updating:

Search "svgo" (4 hits in 1 file)
  C:\temp\npm-ls-updated.txt (4 hits)
	Line 1193: │ │ ├─┬ postcss-svgo@4.0.2
	Line 1197: │ │ │ └── svgo@1.3.2 deduped
	Line 2110: │ ├─┬ imagemin-svgo@7.0.0
	Line 2113: │ │ └─┬ svgo@1.3.2

I have very little idea what has happened, my dependency tree has changed quite a lot.

1 Like