Skip to content
This repository was archived by the owner on Oct 4, 2023. It is now read-only.
This repository was archived by the owner on Oct 4, 2023. It is now read-only.

Webpack ReferenceError: process is not defined #871

Open
@lgrcia

Description

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

Activity

lgrcia

lgrcia commented on May 6, 2019

@lgrcia
Author

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

jeremyfromearth commented on May 7, 2019

@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

wubzz commented on May 8, 2019

@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

jeremyfromearth commented on May 8, 2019

@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

JBtje commented on May 17, 2019

@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

AIMentalModel commented on May 18, 2019

@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

kmaher9 commented on May 21, 2019

@kmaher9

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

link to the comment -> #871 (comment)

d0peCode

d0peCode commented on May 28, 2019

@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:

image

and local:

image

AIMentalModel

AIMentalModel commented on May 28, 2019

@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 commented on May 30, 2019

@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

nattvara commented on Jun 1, 2019

@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

xtx1130 commented on Jun 3, 2019

@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

hiepvq commented on Jun 4, 2019

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

83 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @tvortsa@jdfwarrior@burzum@sg552@panovr

      Issue actions

        Webpack ReferenceError: process is not defined · Issue #871 · SimulatedGREG/electron-vue