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

trellis
,
1

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=‘SVG namespace’%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=‘SVG namespace’%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.

1 Like
2

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
3

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
4

This topic was automatically closed after 42 days. New replies are no longer allowed.