Vue-cli-plugin-electron-builder: ENOENT: no such file or directory, open '.svgo.yml'

[iamazik]

Describe the bug
I'm trying to use the popular https://github.com/svg/svgo but can't due to the following error:

webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1887 Error: ENOENT: no such file or directory, open '/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/renderer/../../.svgo.yml'

It looks like an issue related to the https://github.com/svg/svgo/issues/622 and saw some workaround where yarn clean cause this. However, I can confirm that I don't have any .yarnclean in my project, nor Yarn is cleaning anything at all as I manually verified the node_modules/svgo.yml and it exists over there.

In addition, I have also verified by creating a standard and fresh Electron project without using the electron builder and can confirm it works as expected. So, the issue most likely being somewhere in the electron builder.

To Reproduce

1. Install yarn add svgo --dev
2. Import svgo either on the background.js or in a single file Vue component.
3. import svgo fromsvgo`
4. To reproduce, simply just initialise the svgo object.
5. console.log(new svgo)
6. You should see the relevant error in the console.

Expected behavior
I expect the SVGO library works by not showing an error and the SVGO library can find the .svgo.yml file from the node_modules.

Screenshots

Environment (please complete the following information):

• OS and version: macOS Catalina Version 10.15.3
• node version: 13.7.0
• npm version: 6.13.6
• yarn version (if used): 1.21.1
• vue-cli-plugin-electron-builder version : 2.0.0-beta.1
• electron version: 7
• other vue plugins used: N/A
• custom config for vcp-electron-builder:

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true
    }
  }
};

• (if possible) link to your repo: N/A

Additional context
Add any other context about the problem here.
The SVGO file refers the .svgo.yml file https://github.com/svg/svgo/blob/master/lib/svgo/config.js#L30 and it seems fine.

[iamazik]

Related https://github.com/zeit/node-file-trace/issues/48

[nklayman]

Mark svgo as an external so that it won't be compiled by webpack:

// vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      externals: ['svgo']
    }
  }
}

[iamazik]

I'm afraid to say that it didn't work :/

[nklayman]

In your reproduction instructions, you installed svgo as a devDepenecency. It has to be install as a non-dev dependency. Run yarn remove svgo && yarn add svgo and then try again.

[iamazik]

Thanks man, that worked now. Never realised that adding the svgo as a devDependencies would be a such issue 🎉