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 -> https://github.com/SimulatedGREG/electron-vue/issues/871#issuecomment-489556092

[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,
        };
      }

[tvortsa]

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,
        };
      }

where add this your code ?

[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,
        };
      }

where add this your code ?

...electron-vue\webpack.renderer.config.js ...electron-vue\webpack.web.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
    }),

[hulkyhawk]

i tried and only solution from @wubzz works

[burzum]

I have the same issue... :( In my case the proposed workaround from @d0peCode worked for me.

λ npm -v
6.10.3
λ yarn -v
1.15.2
λ node -v
v12.8.0

[ErcilioMarques]

i had same issue, I solved by changing node version, i was using node v12.9.1 i changed to v10.16.2 and the issue was solved

[yikuo123]

I edit webpack.renderer.config.js as below:

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      isBrowser: false,
      isDevelopment: process.env.NODE_ENV !== 'production',
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),

and then change index.ejs like this:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <% if (htmlWebpackPlugin.options.nodeModules) { %>
        <!-- Add `node_modules/` to global paths so `require` works properly in development -->
        <script>
          require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
        </script>
    <% } %>
</head>
<body>

<div id="app">
</div>

<!-- Set `__static` path to static files in production -->
<% if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) { %>
    <script>
      window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
    </script>
<% } %>

<!-- webpack builds are automatically injected -->
</body>
</html>

it just drops "process" and works perfectly for me.

I hope this can help you.

[snowdream]

I have the same issue

npm -v 6.10.2

yarn -v 1.7.0

node -v v12.8.1

[jdfwarrior]

For this to have a PR that was merged to master and supposedly fixed the issue, I'm still getting the same error as well.

[baruchiro]

I have the same issue. But earlier today, it didn't happen in Windows.

[aliraza114]

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.

solved

[mbach04]

I edit webpack.renderer.config.js as below:

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      isBrowser: false,
      isDevelopment: process.env.NODE_ENV !== 'production',
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),

and then change index.ejs like this:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <% if (htmlWebpackPlugin.options.nodeModules) { %>
        <!-- Add `node_modules/` to global paths so `require` works properly in development -->
        <script>
          require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
        </script>
    <% } %>
</head>
<body>

<div id="app">
</div>

<!-- Set `__static` path to static files in production -->
<% if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) { %>
    <script>
      window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
    </script>
<% } %>

<!-- webpack builds are automatically injected -->
</body>
</html>

it just drops "process" and works perfectly for me.

I hope this can help you.

This worked for me. Thanks --Node version v12.10.0

[ghost]

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

True! I spend 2 days deleting code, add code and in the end it was my node version! So, WITH node V12 really don't work! Use an older and there you have it!

[encryptedtouhid]

I edit webpack.renderer.config.js as below:

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      isBrowser: false,
      isDevelopment: process.env.NODE_ENV !== 'production',
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),

and then change index.ejs like this:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <% if (htmlWebpackPlugin.options.nodeModules) { %>
        <!-- Add `node_modules/` to global paths so `require` works properly in development -->
        <script>
          require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
        </script>
    <% } %>
</head>
<body>

<div id="app">
</div>

<!-- Set `__static` path to static files in production -->
<% if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) { %>
    <script>
      window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
    </script>
<% } %>

<!-- webpack builds are automatically injected -->
</body>
</html>

it just drops "process" and works perfectly for me.

I hope this can help you.

this works fine. thanks buddy

[reezooh]

I edit webpack.renderer.config.js as below:

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      isBrowser: false,
      isDevelopment: process.env.NODE_ENV !== 'production',
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),

and then change index.ejs like this:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <% if (htmlWebpackPlugin.options.nodeModules) { %>
        <!-- Add `node_modules/` to global paths so `require` works properly in development -->
        <script>
          require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
        </script>
    <% } %>
</head>
<body>

<div id="app">
</div>

<!-- Set `__static` path to static files in production -->
<% if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) { %>
    <script>
      window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
    </script>
<% } %>

<!-- webpack builds are automatically injected -->
</body>
</html>

it just drops "process" and works perfectly for me.

I hope this can help you.

This works.

Many thanks!

[lemtasev]

All solution of this issues works for me. But I still not really understand why.

My node version is v12.13.1.

I am new guy for js and node

[ChrisKader]

https://github.com/nodejs/node/pull/26882

Pretty much in node v12+ you need to explicitly import the process module.

Only change you need to make is below is update process to require('process'). I Can submit a PR if needed. No changes to your webpack config or anything is needed.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vest</title>
    <% if (htmlWebpackPlugin.options.nodeModules) { %>
      <!-- Add `node_modules/` to global paths so `require` works properly in development -->
      <script>
        require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
      </script>
    <% } %>
  </head>
  <body>
    <div id="app"></div>
    <!-- Set `__static` path to static files in production -->
    <%  if (!require('process').browser) { %>
      <script>
        if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
      </script>
    <% } %>

    <!-- webpack builds are automatically injected -->
  </body>
</html>

[feiquan666]

@ChrisKader 你的时非常正确的解决方案，希望大家采用他的解决方案。——node12.8的工作者的一句忠告。——i am from china

[cdwmhcc]

nodejs/node#26882

Pretty much in node v12+ you need to explicitly import the process module.

Only change you need to make is below is update process to require('process'). I Can submit a PR if needed. No changes to your webpack config or anything is needed.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vest</title>
    <% if (htmlWebpackPlugin.options.nodeModules) { %>
      <!-- Add `node_modules/` to global paths so `require` works properly in development -->
      <script>
        require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
      </script>
    <% } %>
  </head>
  <body>
    <div id="app"></div>
    <!-- Set `__static` path to static files in production -->
    <%  if (!require('process').browser) { %>
      <script>
        if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
      </script>
    <% } %>

    <!-- webpack builds are automatically injected -->
  </body>
</html>

Thank you!

[mmm8955405]

Method 1:
require('process').browser

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

Either way, after being packaged as a web or app, the menu will not display correctly. But it can be displayed in the dev environment.

What the hell?

[HiZhaoYun]

nodejs/node#26882

Pretty much in node v12+ you need to explicitly import the process module.

Only change you need to make is below is update process to require('process'). I Can submit a PR if needed. No changes to your webpack config or anything is needed.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vest</title>
    <% if (htmlWebpackPlugin.options.nodeModules) { %>
      <!-- Add `node_modules/` to global paths so `require` works properly in development -->
      <script>
        require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
      </script>
    <% } %>
  </head>
  <body>
    <div id="app"></div>
    <!-- Set `__static` path to static files in production -->
    <%  if (!require('process').browser) { %>
      <script>
        if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
      </script>
    <% } %>

    <!-- webpack builds are automatically injected -->
  </body>
</html>

it work well, thanks~

[hyjiacan]

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.

Cannot agree more, this works better, and the vue-cli3/4 supported.

[RyanChent]

I edit webpack.renderer.config.js as below:

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      isBrowser: false,
      isDevelopment: process.env.NODE_ENV !== 'production',
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),

and then change index.ejs like this:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <% if (htmlWebpackPlugin.options.nodeModules) { %>
        <!-- Add `node_modules/` to global paths so `require` works properly in development -->
        <script>
          require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
        </script>
    <% } %>
</head>
<body>

<div id="app">
</div>

<!-- Set `__static` path to static files in production -->
<% if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) { %>
    <script>
      window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
    </script>
<% } %>

<!-- webpack builds are automatically injected -->
</body>
</html>

it just drops "process" and works perfectly for me.

I hope this can help you.

thank you, my node version is 12.14.1, this works for me.

[Taalaybek]

did anybody explain what is error mean?

[KaKi87]

Is the temporary fix backwards compatible with Node v10.x ? Thanks

[blackw212]

This problem is really annoying, do we get an official fix in order to use latest version of Node? Would be nice, since this post is almost one year old, otherwise fuck this package and i'm going with other solutions...

[KaKi87]

@blackw212 Electron + Parcel works 99% fine 😉

[panovr]

I can confirm @ChrisKader solution fix this error.

[bhaskar-nair2]

When you need to re-configure half of the project to just run hello world, you know that you should not even go near that plugin.. I recommend using https://github.com/nklayman/vue-cli-plugin-electron-builder just imported to my premade project and BAM everything works!

[PatricNox]

Any node version below 12 seems to work. I had node 13, and got this error. Used NVM to attempt with 10.19, and it works just fine.

So, version compability issue?

[PatricNox]

Seems to also be general for Electron and not specifically this project.

[jdfwarrior]

May as well let this thing die. It doesn’t seem like it’s going to be supported that much anymore. Use the vue cli and plugins and you can easily accomplish all the stuff this template does, and it works.

[modenero]

as others have pointed out, @ChrisKader's solution works perfectly 👍

in src/index.ejs, you need to change<% if (!process.browser) { %> to <% if (!require('process').browser) { %> and you're in business!

[PachVerb]

@AIMentalModel您是否首先尝试过@LionelGarcia的解决方案-关于从index.ejs文件中删除该部分？我只提到它，因为它对我来说效果很好。

链接到评论-> ＃871（评论）

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!

solved my problem suscces! but ，What causes this problem？

[PachVerb]

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
    }),

new questions is module.js:543 Uncaught Error: Cannot find module 'axios' , what happen

[PachVerb]

nodejs/node#26882

Pretty much in node v12+ you need to explicitly import the process module.

Only change you need to make is below is update process to require('process'). I Can submit a PR if needed. No changes to your webpack config or anything is needed.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vest</title>
    <% if (htmlWebpackPlugin.options.nodeModules) { %>
      <!-- Add `node_modules/` to global paths so `require` works properly in development -->
      <script>
        require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
      </script>
    <% } %>
  </head>
  <body>
    <div id="app"></div>
    <!-- Set `__static` path to static files in production -->
    <%  if (!require('process').browser) { %>
      <script>
        if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
      </script>
    <% } %>

    <!-- webpack builds are automatically injected -->
  </body>
</html>

very good :)

[yanlee26]

Uncaught Error: Cannot find module 'axios'

[kingangelAOA]

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
    }),

Uncaught Error: Cannot find module 'axios'