Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack ReferenceError: process is not defined #871

Open
lgrcia opened this issue May 5, 2019 · 63 comments
Open

Webpack ReferenceError: process is not defined #871

lgrcia opened this issue May 5, 2019 · 63 comments

Comments

@lgrcia
Copy link

@lgrcia lgrcia commented May 5, 2019

Issue

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

Capture d’écran 2019-05-05 à 15 58 26

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

Capture d’écran 2019-05-05 à 15 45 05

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
Copy link
Author

@lgrcia lgrcia commented May 6, 2019

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
Copy link

@jeremyfromearth jeremyfromearth commented May 7, 2019

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
Copy link

@wubzz wubzz commented May 8, 2019

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
Copy link

@jeremyfromearth jeremyfromearth commented May 8, 2019

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
Copy link

@JBtje JBtje commented May 17, 2019

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

@AIMentalModel
Copy link

@AIMentalModel AIMentalModel commented May 18, 2019

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
Copy link

@kmaher9 kmaher9 commented May 21, 2019

@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
Copy link

@d0peCode d0peCode commented May 28, 2019

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:

image

and local:

image

@AIMentalModel
Copy link

@AIMentalModel AIMentalModel commented May 28, 2019

@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
Copy link

@kmaher9 kmaher9 commented May 30, 2019

@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
Copy link

@nattvara nattvara commented Jun 1, 2019

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
Copy link

@xtx1130 xtx1130 commented Jun 3, 2019

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
Copy link

@hiepvq hiepvq commented Jun 4, 2019

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

@LG17 LG17 mentioned this issue Jul 10, 2019
@tvortsa
Copy link

@tvortsa tvortsa commented Jul 27, 2019

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
Copy link

@hiepvq hiepvq commented Jul 27, 2019

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
Copy link

@hulkyhawk hulkyhawk commented Aug 12, 2019

i tried and only solution from @wubzz works

@burzum
Copy link

@burzum burzum commented Aug 16, 2019

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
Copy link

@ErcilioMarques ErcilioMarques commented Aug 29, 2019

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
Copy link

@yikuo123 yikuo123 commented Sep 10, 2019

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
Copy link

@snowdream snowdream commented Sep 25, 2019

I have the same issue

npm -v
6.10.2

yarn -v
1.7.0

node -v
v12.8.1

@jdfwarrior
Copy link

@jdfwarrior jdfwarrior commented Oct 1, 2019

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
Copy link

@baruchiro baruchiro commented Oct 7, 2019

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

@kingangelAOA
Copy link

@kingangelAOA kingangelAOA commented Jun 11, 2020

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'
image

@wentianl20
Copy link

@wentianl20 wentianl20 commented Jul 5, 2020

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

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

@misterpancn
Copy link

@misterpancn misterpancn commented Jul 28, 2020

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
Copy link

@toudidel toudidel commented Aug 4, 2020

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

@hhstore hhstore mentioned this issue Aug 12, 2020
5 tasks
@kingnand
Copy link

@kingnand kingnand commented Aug 19, 2020

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
Copy link

@samchenws samchenws commented Sep 3, 2020

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
Copy link

@pacific202 pacific202 commented Sep 5, 2020

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 ¯_(ツ)_/¯

kennethhuang31 added a commit to kennethhuang31/Zibook that referenced this issue Sep 12, 2020
@jeepxiaozi
Copy link

@jeepxiaozi jeepxiaozi commented Oct 19, 2020

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

@willvitorino
Copy link

@willvitorino willvitorino commented Oct 19, 2020

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
Copy link

@Aryesh-M Aryesh-M commented Oct 28, 2020

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
Copy link

@Aimee616 Aimee616 commented Oct 29, 2020

!require('process').browser

This works,thanks!

PeterlitsZo added a commit to PeterlitsZo/MersenneTodo that referenced this issue Nov 11, 2020
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
hubertstrk pushed a commit to hubertstrk/notes2.bootstrap that referenced this issue Dec 9, 2020
Cleam pushed a commit to Cleam/electron-vue-demo that referenced this issue Jan 5, 2021
@sg552
Copy link

@sg552 sg552 commented Jan 12, 2021

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

@mklnz
Copy link

@mklnz mklnz commented Jan 20, 2021

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

@MertvyeDushi
Copy link

@MertvyeDushi MertvyeDushi commented Mar 16, 2021

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

timchanpon added a commit to timchanpon/rapid-mdpad that referenced this issue Mar 27, 2021
timchanpon added a commit to timchanpon/rapid-mdpad that referenced this issue Mar 27, 2021
timchanpon added a commit to timchanpon/rapid-mdpad that referenced this issue Mar 27, 2021
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

No branches or pull requests