Webpack ReferenceError: process is not defined #871

lgrcia · 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

The text was updated successfully, but these errors were encountered:

lgrcia · 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

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.

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.

yanlee26 · 2020-04-22T02:58:46Z

Uncaught Error: Cannot find module 'axios'

kingangelAOA · 2020-06-11T10:23:27Z

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'

…rding to SimulatedGREG/electron-vue#871

wentianl20 · 2020-07-05T03:44:21Z

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

独秀同志，赶快落座，你是对的

misterpancn · 2020-07-28T10:23:01Z

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

The node version was upgraded from 10.16 to 14.0. This error occurred when executing 'NPM run dev'. We solved it this way. Perfect.

toudidel · 2020-08-04T08:14:39Z

Modyfying HtmlWebpackPlugin .electron-vue/webpack.web.config.js and .electron-vue/webpack.renderer.config.js does not work for me.

system: Linux Mint 19.3
nodejs: v14.7.0
npm: v6.14.7
webpack: v4.44.1

But https://auth0.com/blog/electron-tutorial-building-modern-desktop-apps-with-vue-js/ was very helpful

kingnand · 2020-08-19T07:23:50Z

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.

it works for me

samchenws · 2020-09-03T09:08:07Z

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

Good,Thanks.

pacific202 · 2020-09-05T04:27:53Z

I still can't get this to work after a clean install. This issue was opened over a year ago.

I guess writing quality code can be difficult sometimes ¯_(ツ)_/¯

SimulatedGREG/electron-vue#871 (comment)

jeepxiaozi · 2020-10-19T04:08:56Z

got the same error, and solved it according to @wubzz 's solution, thank you!

willvitorino · 2020-10-19T13:56:01Z

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

Work's for me on Node v14.14.0
Thanks Guys

Aryesh-M · 2020-10-28T11:49:11Z

I think you should follow this article cum tutorial, it might be helpful!
https://auth0.com/blog/electron-tutorial-building-modern-desktop-apps-with-vue-js/

Aimee616 · 2020-10-29T07:45:10Z

!require('process').browser

This works，thanks！

When I start it by commmand `npm run dev', the electron application show me that `Webpack ReferenceError: process is not defined'. I follow what the web said and change the webpack config file. More infomation: SimulatedGREG/electron-vue#871

SimulatedGREG/electron-vue#871

…lectron-vue#871

sg552 · 2021-01-12T09:47:32Z

Oh my god, still got this error after a fresh installation. Node version: 14.15.4
solved by @wubzz 's solution.

mklnz · 2021-01-20T11:47:54Z

Same here, still having the issue on Node v14.15.1 - will try @wubzz 's solution....

marker-dao · 2021-03-16T15:02:23Z

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's works for me! Node v. 14.15.0

SimulatedGREG/electron-vue#871 (comment)

Squashed commit of the following: commit 948dd01 Author: timchanpon <62697984+timchanpon@users.noreply.github.com> Date: Sat Mar 27 21:30:55 2021 +0900 Improve UI, Implement prediction of serial list commit 37919d0 Author: timchanpon <62697984+timchanpon@users.noreply.github.com> Date: Sat Mar 27 20:23:49 2021 +0900 Apply dark theme commit df19ba1 Author: timchanpon <62697984+timchanpon@users.noreply.github.com> Date: Sat Mar 27 20:20:33 2021 +0900 Create primitive markdown editor commit 1e35294 Author: timchanpon <62697984+timchanpon@users.noreply.github.com> Date: Sat Mar 27 19:52:49 2021 +0900 Fix process is undefined error SimulatedGREG/electron-vue#871 (comment) commit 3a14544 Author: timchanpon <62697984+timchanpon@users.noreply.github.com> Date: Sat Mar 27 19:39:23 2021 +0900 Install marked

lgrcia 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 spectral-lab/spectral-lab#147

Merged

6 tasks

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

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

9c386c4

SimulatedGREG/electron-vue#871 (comment)

agalwood mentioned this issue Sep 16, 2019

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

Merged

3 tasks

yankikucuk mentioned this issue Sep 18, 2019

[Webpack] Process is not defined WeakAuras/WeakAuras-Companion#408

Closed

3 tasks

divad1196 added a commit to divad1196/ZPLEditor that referenced this issue Jun 20, 2020

[FIX] fix error 'Webpack ReferenceError: process is not defined' acco…

83ecbba

…rding to SimulatedGREG/electron-vue#871

Hyuchia mentioned this issue Jul 8, 2020

Fix access to process internxt/drive-desktop#11

Merged

xinpingwang mentioned this issue Aug 1, 2020

ReferenceError: process is not defined whats-blog/electron-vue#1

Closed

hhstore mentioned this issue Aug 12, 2020

Electron hhstore/blog#186

Open

5 tasks

kennethhuang31 added a commit to kennethhuang31/Zibook that referenced this issue Sep 12, 2020

fix the first bug

acc84b3

SimulatedGREG/electron-vue#871 (comment)

PseudoResonance mentioned this issue Nov 24, 2020

Strange overflowing window when maximizing a frameless window electron/electron#5267

Closed

hubertstrk pushed a commit to hubertstrk/notes2.bootstrap that referenced this issue Dec 9, 2020

fix build errors after upgrading to newer node version

ee39682

SimulatedGREG/electron-vue#871

Cleam pushed a commit to Cleam/electron-vue-demo that referenced this issue Jan 5, 2021

fixed: Webpack ReferenceError: process is not defined SimulatedGREG/e…

f0570bf

…lectron-vue#871

xvno mentioned this issue Jan 12, 2021

Electron: process module, frameless, draggable & closable xvno/copit#2

Open

timchanpon added a commit to timchanpon/rapid-mdpad that referenced this issue Mar 27, 2021

Fix process is undefined error

eb6d018

SimulatedGREG/electron-vue#871 (comment)

timchanpon added a commit to timchanpon/rapid-mdpad that referenced this issue Mar 27, 2021

Fix process is undefined error

1e35294

SimulatedGREG/electron-vue#871 (comment)

benoitf mentioned this issue Jun 1, 2021

[WIP] build: Align with the upstream's upgrade to Webpack 5 eclipse-che/che-theia#1105

Closed

9 tasks

PeterlitsZo mentioned this issue Nov 5, 2021

ERROR in renderer.js from Terser microsoft/monaco-editor#2734

Closed

Webpack ReferenceError: process is not defined #871

Webpack ReferenceError: process is not defined #871

Comments

lgrcia commented May 5, 2019

Issue

Reproduction

Screenshot of rendering error

Development environment

lgrcia 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

yanlee26 commented Apr 22, 2020

kingangelAOA commented Jun 11, 2020 • edited

wentianl20 commented Jul 5, 2020

misterpancn commented Jul 28, 2020

toudidel commented Aug 4, 2020 • edited

kingnand commented Aug 19, 2020

samchenws commented Sep 3, 2020

pacific202 commented Sep 5, 2020

jeepxiaozi commented Oct 19, 2020

willvitorino commented Oct 19, 2020

Aryesh-M commented Oct 28, 2020

Aimee616 commented Oct 29, 2020

sg552 commented Jan 12, 2021

mklnz commented Jan 20, 2021

marker-dao commented Mar 16, 2021

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

kingangelAOA commented Jun 11, 2020 •

edited

toudidel commented Aug 4, 2020 •

edited