Unable to get webpack.NormalModuleReplacementPlugin working when building for electron about vue-cli-plugin-electron-builder HOT 20 CLOSED

This won't work because VCP-electron-builder uses electron-webpack. Electron-webpack generates it's own config, independent of that for your regular app. You can use the webpackConfig property under VCP-electron-builders plugin options. A better alternative is to use the 1.0.0-beta of VCP electron-builder. It doesn't use electron-webpack, instead modifying your regular config. If you use the 1.0.0 beta, this issue should be automatically solved. It is just as stable as 0.3.2, but is much better in every way. Let me know if either solution works.

Edit: Either way, the --mode argument won't work. In the next beta (4), you will be able to customize the webpack config for just the electron builds. There, you can use the DefinePlugin to inject a IS_WEBPACK variable. For now, you can use the following:

if (__static) {
  // Electron-specific code here
}

from vue-cli-plugin-electron-builder.

vue-cli-service build:electron is looking better. Thanks!

vue-cli-service serve:electron I get this error:

 ERROR  Failed to compile with 3 errors                                                                                           12:37:14 PM

These relative modules were not found:

* ../db-VUE_APP_PLATFORM in ./src/odm.js
...

Also, can you explain your comment about --mode? In beta 4 will different .env files work? What is the purpose of defining IS_WEBPACK? I may not understand because I don't know what is happening under the hood.

from vue-cli-plugin-electron-builder.

Read the How It Works section of the docs to learn what happens under the hood. Since it triggers the serve command, not all arguments are passed though. I can allow the --mode argument to get passed through to build/serve commands if you would like. The IS_WEBPACK variable would be replaced with true during webpack bundling of electron builds only.

from vue-cli-plugin-electron-builder.

Yes, I'd like to get my .env files to vue-cli-service build and serve. Adding --mode pass through would be great. Do you think this is why I'm getting the error with vue-cli-service serve:electron?

Something I just noticed with beta 3 build:electron is that my electron app is unable to access process.env variables from my shell. DefinePlugin did not help. Do you know why this changed and how I can get access?

from vue-cli-plugin-electron-builder.

Try window.process.env for the env varaibles.

from vue-cli-plugin-electron-builder.

window.process.env worked.

And I got a initial route that looks odd to me (due to the app.asar/dist_electron) when the electron app opens: /home/bdiz/my-app/dist_electron/linux-unpacked/resources/app.asar/dist_electron/bundled/index.html. Before it was /home/bdiz/my-app/dist_electron/linux-unpacked/resources/app.asar/index.html. My preference would be just /home/bdiz/my-app/dist_electron/linux-unpacked/resources/app.asar/.

from vue-cli-plugin-electron-builder.

The reason it is set to .../dist_electron/bundled is because all files that go through webpack (including files in the public directory) end up in dist_electron/bundled as not to corrupt the dist directory with non SPA compatible code. Electron builder has this nested in the app.asar because it needs to access your node_modules and package.json which are not nested, so the root directory is set to ./. I will look into copying these into dist_electron/bundled so that the files end up in the root directory of the app.asar.

from vue-cli-plugin-electron-builder.

Closing as beta.4 was released. Docs are located here

from vue-cli-plugin-electron-builder.

Hi @nklayman , nice docs.

I tried out beta.4 but I am still getting the same failing signature with serve:electron.

from vue-cli-plugin-electron-builder.

I realized that the mode is set through the plugin service, not the command itself. This means that all the changes I made didn't really do anything. The good news is I found the solution to your problem, just change your vue.config.js to look like this:

var webpack = require('webpack')

module.exports = {
  configureWebpack: () => {
    let plugins = [
      new webpack.NormalModuleReplacementPlugin(
        /(.*)-VUE_APP_PLATFORM(\.*)/,
        function(resource) {
          resource.request = resource.request.replace(
            /-VUE_APP_PLATFORM/,
            `-${process.env.VUE_APP_PLATFORM}`
          )
        }
      )
    ]

    return {
      plugins
    }
  },
  pluginOptions: {
    electronBuilder: {
      chainWebpackRendererProcess(config) {
        config.plugin('modules').use(webpack.NormalModuleReplacementPlugin, [
          /(.*)-VUE_APP_PLATFORM(\.*)/,
          function(resource) {
            resource.request = resource.request.replace(
              /-VUE_APP_PLATFORM/,
              `-${process.env.VUE_APP_PLATFORM}`
            )
          }
        ])
        return config
      }
    }
  }
}

from vue-cli-plugin-electron-builder.

I pasted that code and it did remove that error signature. However, I have other configs and module rules that are now producing errors so it looks like I need to duplicate those configs into pluginOptions.electronBuilder as well. Is there any way to avoid this duplication? ie somehow pass my existing configs and rules to electron builder?

from vue-cli-plugin-electron-builder.

The existing rules should be transferred to electron as it just calls the serve command with a few modifications. I have no idea why this isn't working, try modifying your config through chaining and see if that helps.

from vue-cli-plugin-electron-builder.

Your guess was right. Chaining was the answer to get serve working without duplicating configs.

vue.config.js:

var webpack = require('webpack');

module.exports = { 
  chainWebpack: (config) => {

    config.plugin('platform-targets').use(webpack.NormalModuleReplacementPlugin, [
      /(.*)-VUE_APP_PLATFORM(\.*)/,
      function(resource) {
        resource.request = resource.request.replace(
          /-VUE_APP_PLATFORM/,
          `-${process.env.VUE_APP_PLATFORM}`
        )
      }
    ]);

  }
};

from vue-cli-plugin-electron-builder.

@nklayman In regards to #31 (comment) would you like me to add an issue to track addition of vue-cli-service build pass through options? Most importantly the --mode option.

from vue-cli-plugin-electron-builder.

The --mode option should be passed through as it activates before vcp-electron-builder calls the build command. The mode arg is used when vue-cli-service build:electron is called in the Service.run command (line where mode is used). As for the other options, most of them break the electron build or are useless (--report[-json] may be helpful in some cases, I could pass that through).

from vue-cli-plugin-electron-builder.

In beta.6 I'm getting an error with vue-cli-service build:electron --mode my-mode:

Building app with electron-builder:

  • electron-builder version=20.28.1

/home/user/my-app/node_modules/app-builder-lib/src/index.ts:42
      throw new InvalidConfigurationError(`Unknown option "${optionName}"`)
            ^
Error: Unknown option "mode"

from vue-cli-plugin-electron-builder.

Fixed in 79a1be9. Sorry about that, didn't realize you were getting that error. I am releasing 1.0.0-beta.7 now.

from vue-cli-plugin-electron-builder.

Thank you. --mode is getting passed through.

Next switch I'm using and is not getting passed through is --modern.

Error: Unknown option "modern"

from vue-cli-plugin-electron-builder.

--modern is enabled by default

from vue-cli-plugin-electron-builder.

Ok. Cool.

from vue-cli-plugin-electron-builder.