Webpack ReferenceError: process is not defined

[lgrcia]

Issue

Fresh electron-vue project gives webpack error:
ReferenceError: process is not defined

Look like issue #516 solved by #726 for build:web

Reproduction

vue init simulatedgreg/electron-vue test_vue_error
cd test_vue_error
npm install
npm run dev

Screenshot of rendering error

Development environment

• Node version: v12.1.0
• NPM version: 6.9.0
• vue-cli version: 2.9.6
• Vue version: 2.6.10
• Webpack version: 4.30.0
• Operating System: OSX 10.14.4

[lgrcia]

Solved by removing:

<% if (!process.browser) { %>
    <script>
        if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
    </script>
<% } %>

from src/index.ejs:16

Might not be the right solution but works as a temporary fix for me. Not sure issue should be closed though!

[jeremyfromearth]

I also ran into this issue. Is it possible that your Node version changed? I find that I can replicate this problem consistently by upgrading/downgrading Node, using NVM to switch between various versions. The fix, for me, was to rm -rf node_modules; npm i; npm run dev, after making the version change. Update: I get this error consistently with Node v12.1.0 and cannot get around it by re-installing dependencies.

[wubzz]

Experiencing the same issue on Node 12.2.0. Not sure what causes it, and not entirely convinced the issue is in this repo. Probably a dependency. Removing parts from the template will work for npm run dev, but not so much for npm run build or npm run pack.

My temporary solution was to do modify HtmlWebpackPlugin in .electron-vue/webpack.web.config.js and .electron-vue/webpack.renderer.config.js:

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: false
    }),

[jeremyfromearth]

I refactored my project to use this: https://github.com/nklayman/vue-cli-plugin-electron-builder. Works w/ Node 12, is generally simpler and more well documented.

[JBtje]

The same error appeared after updating nodejs to 12.2.0 (in 11 it was all working). The solution of wubzz solves it.

[AIMentalModel]

Experiencing the same issue on Node 12.2.0. Not sure what causes it, and not entirely convinced the issue is in this repo. Probably a dependency. Removing parts from the template will work for npm run dev, but not so much for npm run build or npm run pack.

My temporary solution was to do modify HtmlWebpackPlugin in .electron-vue/webpack.web.config.js and .electron-vue/webpack.renderer.config.js:

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: false
    }),

I'm a new boy for javascript, how to do that, detail please

[kmaher9]

@AIMentalModel have you first tried the solution from @lionelgarcia - about removing the section from the index.ejs file? I only mention because it has worked well for me.

link to the comment -> #871 (comment)

[d0peCode]

I also run into this issue after upgraded version of node to latest. I need v12 to use web workers. I don't think removing following:

<!-- Set `__static` path to static files in production -->
<% if (!process.browser) { %>
  <script>
    if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
  </script>
<% } %>

is a real solution. I'm not sure how it will behavior when I'll switch from development to production. Any thoughts about that?

I'm using windows 10.

---

Edit
However this is weird because when I dig some more I found out that local NodeJS version doesn't really matter because vue-electron ship its own NodeJS copy.

@lionelgarcia you wrote that you have node v12.1.0 but do you mean your local node or you somehow updated node shipped with electron-vue?

you can check local version by node -v in terminal and you can check your electron-vue node version by opening dev tools within electron window and calling process.versions in console. In my case:

and local:

[AIMentalModel]

@kmaher9
i think i test it first by that solution, but i have something error for my project.
my work need a component for vue, but i take the error ,so i use that component for electron-react.
sorry about that.

[kmaher9]

@kmaher9
i think i test it first by that solution, but i have something error for my project.
my work need a component for vue, but i take the error ,so i use that component for electron-react.
sorry about that.

Cool well I'm glad you found a solution, consider closing this ticket off if your issue is resolved :)

[nattvara]

Seems to work for me using an older node version, node v11.15.0 works, with node v12.x i get the ReferenceError: process is not defined error

[xtx1130]

in electron v5.x. You should addnodeIntegration in main process

mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    title: 'TBFE',
    webPreferences: {
      nodeIntegration: true // add this
    }
  })

And it will resolve this problem.

[hiepvq]

add this code solved the problem for me

templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      }