Webpack ReferenceError: process is not defined #871

LionelGarcia · 2019-05-05T14:04:28Z

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

LionelGarcia · 2019-05-06T09:10:24Z

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 · 2019-05-07T05:05:14Z

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 · 2019-05-08T06:51:18Z

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 · 2019-05-08T14:38:48Z

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 · 2019-05-17T12:21:32Z

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

AIMentalModel · 2019-05-18T16:00:28Z

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 · 2019-05-21T14:19:06Z

@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 · 2019-05-28T03:35:21Z

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 · 2019-05-28T03:46:29Z

@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 · 2019-05-30T22:02:45Z

@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 · 2019-06-01T15:15:08Z

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 · 2019-06-03T11:34:17Z

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 · 2019-06-04T08:17:38Z

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 · 2019-07-27T00:07:45Z

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 · 2019-07-27T07:23:51Z

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 · 2019-08-12T08:39:27Z

i tried and only solution from @wubzz works

burzum · 2019-08-16T11:18:34Z

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


        Fix Html Webpack Plugin ReferenceError: process is not defined

SimulatedGREG/electron-vue#871 (comment)

ErcilioMarques · 2019-08-29T12:58:01Z

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 · 2019-09-10T07:27:41Z

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.


        fix: process is not defined at node 12.x #267

SimulatedGREG/electron-vue#871 (comment)

snowdream · 2019-09-25T10:14:29Z

I have the same issue

npm -v
6.10.2

yarn -v
1.7.0

node -v
v12.8.1

jdfwarrior · 2019-10-01T04:40:33Z

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 · 2019-10-07T16:17:38Z

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

ChrisKader · 2019-12-10T23:12:40Z

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>

feiquan666 · 2019-12-13T03:39:52Z

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

cdwmhcc · 2019-12-14T00:45:02Z

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 · 2019-12-15T08:04:34Z

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 · 2019-12-26T02:08:27Z

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 · 2019-12-27T01:55:15Z

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 · 2020-01-15T11:56:04Z

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 · 2020-01-30T21:09:34Z

did anybody explain what is error mean?

KaKi87 · 2020-02-03T17:31:09Z

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

blackw212 · 2020-02-08T17:23:06Z

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 · 2020-02-08T17:27:38Z

@blackw212 Electron + Parcel works 99% fine 😉

panovr · 2020-02-11T10:06:00Z

I can confirm @ChrisKader solution fix this error.

bhaskar-nair2 · 2020-03-24T12:17:45Z

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!


        Explicitly import process module in index.ejs (for node v12)

SimulatedGREG/electron-vue#871 (comment)

PatricNox · 2020-04-07T13:01:34Z

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 · 2020-04-07T13:01:57Z

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

jdfwarrior · 2020-04-07T14:56:13Z

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 · 2020-04-11T15:28:55Z

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 · 2020-04-15T07:03:56Z

@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 · 2020-04-15T07:19:13Z

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 · 2020-04-15T07:32:33Z

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 · 2020-04-22T02:58:46Z

Uncaught Error: Cannot find module 'axios'

LionelGarcia mentioned this issue May 24, 2019

Resolving dynamic files #883

Closed

d0peCode mentioned this issue May 28, 2019

It is recommended to update the dependent version #855

Open

LG17 mentioned this issue Jul 10, 2019

npm run dev error #902

Closed

noriyotcp added a commit to noriyotcp/quiz_projection_supporter that referenced this issue Aug 21, 2019

Fix Html Webpack Plugin ReferenceError: process is not defined

e01bcb3

SimulatedGREG/electron-vue#871 (comment)

yuichkun mentioned this issue Sep 14, 2019

feat: github actions #147

Merged

0 of 6 tasks complete

agalwood added a commit to agalwood/Motrix that referenced this issue Sep 16, 2019

fix: process is not defined at node 12.x #267

Loading status checks…

9c386c4

SimulatedGREG/electron-vue#871 (comment)

agalwood mentioned this issue Sep 16, 2019

fix: process is not defined at node 12.x #267 #424

Merged

3 of 3 tasks complete

kendinikertenkelebek mentioned this issue Sep 18, 2019

[Webpack] Process is not defined #408

Closed

1 of 3 tasks complete

XanderLuciano added this to To do in Electron Upgrade Dec 6, 2019

XanderLuciano mentioned this issue Dec 6, 2019

how can i update the electron version to the new version #746

Closed

KakarN mentioned this issue Dec 15, 2019

Issue with node-escpos package #589

Closed

zaherg mentioned this issue Feb 9, 2020

electron7 please! #975

Open

swcurran mentioned this issue Feb 24, 2020

Failed to start Aries Toolbox on Windows #142

Closed

BeginsDuang mentioned this issue Feb 26, 2020

Uncaught Error: Cannot find module 'axios' #940

Open

smori1983 added a commit to smori1983/tiny-html-server that referenced this issue Apr 5, 2020

Explicitly import process module in index.ejs (for node v12)

Loading status checks…

6802b0b

SimulatedGREG/electron-vue#871 (comment)

smori1983 mentioned this issue Apr 6, 2020

.travis.yml を修正する #6

Merged

dchawisher mentioned this issue Apr 20, 2020

ReferenceError: process is not defined #7

Open

Apr	MAY	Jun
	24
2019	2020	2021

SimulatedGREG / electron-vue

Join GitHub today

Webpack ReferenceError: process is not defined #871

Webpack ReferenceError: process is not defined #871

Comments

LionelGarcia commented May 5, 2019

Issue

Reproduction

Screenshot of rendering error

Development environment

LionelGarcia commented May 6, 2019

jeremyfromearth commented May 7, 2019 • edited

wubzz commented May 8, 2019

jeremyfromearth commented May 8, 2019

JBtje commented May 17, 2019

AIMentalModel commented May 18, 2019

kmaher9 commented May 21, 2019

d0peCode commented May 28, 2019 • edited

AIMentalModel commented May 28, 2019

kmaher9 commented May 30, 2019

nattvara commented Jun 1, 2019

xtx1130 commented Jun 3, 2019

hiepvq commented Jun 4, 2019

tvortsa commented Jul 27, 2019

hiepvq commented Jul 27, 2019 • edited

hulkyhawk commented Aug 12, 2019

burzum commented Aug 16, 2019 • edited

ErcilioMarques commented Aug 29, 2019 • edited

yikuo123 commented Sep 10, 2019

snowdream commented Sep 25, 2019

jdfwarrior commented Oct 1, 2019

baruchiro commented Oct 7, 2019

ChrisKader commented Dec 10, 2019

feiquan666 commented Dec 13, 2019

cdwmhcc commented Dec 14, 2019

mmm8955405 commented Dec 15, 2019

HiZhaoYun commented Dec 26, 2019

hyjiacan commented Dec 27, 2019

RyanChent commented Jan 15, 2020

Taalaybek commented Jan 30, 2020

KaKi87 commented Feb 3, 2020

blackw212 commented Feb 8, 2020

KaKi87 commented Feb 8, 2020

panovr commented Feb 11, 2020

bhaskar-nair2 commented Mar 24, 2020

PatricNox commented Apr 7, 2020

PatricNox commented Apr 7, 2020

jdfwarrior commented Apr 7, 2020

modenero commented Apr 11, 2020

PachVerb commented Apr 15, 2020

PachVerb commented Apr 15, 2020

PachVerb commented Apr 15, 2020

yanlee26 commented Apr 22, 2020

jeremyfromearth commented May 7, 2019 •

edited

d0peCode commented May 28, 2019 •

edited

hiepvq commented Jul 27, 2019 •

edited

burzum commented Aug 16, 2019 •

edited

ErcilioMarques commented Aug 29, 2019 •

edited