ENOENT: no such file or directory, open '.svgo.yml'

[mmikhan]

Description

Having the ENOENT: no such file or directory, open '.svgo.yml' issue in an Electron app based on Vue CLI that is https://github.com/nklayman/vue-cli-plugin-electron-builder. It looks like a common issue for yarn clean. However, I don't run yarn clean, nor I have a .yarnclean file in my project that enables yarn clean automatically.

It looks like Electron builder cannot reference the .svgo.yml file from the following when using __dirname, nor yaml.safeLoad() is requiring the relevant file from their end. So, Electron builder is having trouble with this.

svgo/lib/svgo/config.js

Line 30 in 07ca976

defaults = Object.assign({}, yaml.safeLoad(FS.readFileSync(__dirname + '/../../.svgo.yml', 'utf8')));

Fix proposal

Why do we use an .yml file for the configuration instead of a normal .js file so that we can simply require() the config file and let Node handles it? I am sorry if I am missing the point here. I understand that .yml file config might be a bit easier but for avoiding this issue, I believe having the .js config file is the best.

We can still simply return an object from the .js config like we do from .yml config file like the following way:

exports.plugins = [
    {'removeDoctype': true},
    'removeXMLProcInst',
    'removeComments',
    'removeMetadata',
    'removeXMLNS',
    'removeEditorsNSData',
    'cleanupAttrs',
    'inlineStyles',
    'minifyStyles',
    'convertStyleToAttrs',
    'cleanupIDs',
    'prefixIds',
    'removeRasterImages',
    'removeUselessDefs',
    'cleanupNumericValues',
    'cleanupListOfValues',
    'convertColors',
    'removeUnknownsAndDefaults',
    'removeNonInheritableGroupAttrs',
    'removeUselessStrokeAndFill',
    'removeViewBox',
    'cleanupEnableBackground',
    'removeHiddenElems',
    'removeEmptyText',
    'convertShapeToPath',
    'convertEllipseToCircle',
    'moveElemsAttrsToGroup',
    'moveGroupAttrsToElems',
    'collapseGroups',
    'convertPathData',
    'convertTransform',
    'removeEmptyAttrs',
    'removeEmptyContainers',
    'mergePaths',
    'removeUnusedNS',
    'sortAttrs',
    'sortDefsChildren',
    'removeTitle',
    'removeDesc',
    'removeDimensions',
    'removeAttrs',
    'removeAttributesBySelector',
    'removeElementsByAttr',
    'addClassesToSVGElement',
    'removeStyleElement',
    'removeScriptElement',
    'addAttributesToSVGElement',
    'removeOffCanvasPaths',
    'reusePaths'
];

This will also allow the defaults = Object.assign({}, yaml.safeLoad(FS.readFileSync(__dirname + '/../../.svgo.yml', 'utf8'))); with simply defaults = Object.assign({}, require('../../.svgo.js')); and it works for both Electron, Website, and as well as for the CLI.

[mmikhan]

Related nklayman/vue-cli-plugin-electron-builder#640 and vercel/nft#48

[mmikhan]

While this is still an issue, I'm closing it since I found a workaround by excluding the svgo from Webpack externals that prevents bundling of certain imported packages and instead retrieve these external dependencies at runtime.

For Vue CLI vue.config.js

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      externals: ["svgo"]
    }
  }
};

For a traditional webpack.config.js:

module.exports = {
  externals: {
    svgo: 'svgo'
  }
};

[gillisig]

@iamazik did you have to make any other changes than adding it to externals and making sure its not a devDependency? After I add it to externals I simply get svgo is not defined. Do I have to reference it in a different way or something?

[mmikhan]

No, I didn't need to modify anything else after adding svgo in the Webpack externals.

[adamaveray]

As a workaround, if you add full: true to your options object (e.g. options = { full: true, plugins: ... }) SVGO will skip trying to load the yaml file. Definitely agree things would be simpler if the file was a standard JS/JSON file (and would prevent having to ship an entire YAML package just for one file).

[gillisig]

That's a huge tip @adamaveray, it solved my problem! I had solved my issue with electron following @iamazik tip, but I'm working on something else now that is web only and was trying to get SVGO to work. Your tip couldn't have come at a better time! Thanks!