Process is undefined

[kimsean]

Still does not work with node v12

[henryejemuta]

Currently having the same issues after I installed the init the project there were about 18 vulnerabilities of which I had to run npm audit fix --force after which I got the message below:

fixed 7 of 18 vulnerabilities in 20464 scanned packages 11 vulnerabilities required manual review and could not be updated 4 package updates for 7 vulnerabilities involved breaking changes (installed due to --force option)

now when I run npm run dev the vue fails to compile with an error of undefined process

 ERROR in Template execution failed: ReferenceError: process is not defined

 ERROR in   ReferenceError: process is not defined

- index.ejs:11 eval
  [.]/[html-webpack-plugin]/lib/loader.js!./src/index.ejs:11:2

- index.ejs:16 module.exports
  [.]/[html-webpack-plugin]/lib/loader.js!./src/index.ejs:16:3

- index.js:284 
  [schoolmgt]/[html-webpack-plugin]/index.js:284:18

- runMicrotasks

- task_queues.js:97 processTicksAndRejections
  internal/process/task_queues.js:97:5

[henryejemuta]

Currently having the same issues after I installed the init the project there were about 18 vulnerabilities of which I had to run npm audit fix --force after which I got the message below:

fixed 7 of 18 vulnerabilities in 20464 scanned packages 11 vulnerabilities required manual review and could not be updated 4 package updates for 7 vulnerabilities involved breaking changes (installed due to --force option)

now when I run npm run dev the vue fails to compile with an error of undefined process

 ERROR in Template execution failed: ReferenceError: process is not defined

 ERROR in   ReferenceError: process is not defined

- index.ejs:11 eval
  [.]/[html-webpack-plugin]/lib/loader.js!./src/index.ejs:11:2

- index.ejs:16 module.exports
  [.]/[html-webpack-plugin]/lib/loader.js!./src/index.ejs:16:3

- index.js:284 
  [schoolmgt]/[html-webpack-plugin]/index.js:284:18

- runMicrotasks

- task_queues.js:97 processTicksAndRejections
  internal/process/task_queues.js:97:5

Got all vulnerabilities out by running npm install --fix after which I ran npm audit fix although I still have the process undefined error at compile time I'm more relaxed that vulnerability warning is out

[linker-err0r]

I haven't changed any packages at all and I have this issue with the boilerplate. Weird.

[xxyGoTop]

I have this issue with too

[henryejemuta]

I have this issue with too

I got mine fix with details as outlined by Callum Slate Open .electron-vue/webpack.renderer.config.js and make the following modifications:

// find the rendererConfig variable
let rendererConfig = {
  // then, find the plugins property
  plugins: [
    // then, replace the call to the HtmlWebpackPlugin constructor
    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
    }),
  ]
}

Then open ./src/index.ejs and update as follows:

<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>
<% } %>

Finally open ./src/main/index.js and update the new BrowserWindow initialization options by adding the webPreference as shown:

function createWindow () {
  // add the webPreferences property passed to BrowserWindow
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true
    }
  })
}

Reference: Electron Tutorial: Building Modern Desktop Apps with Vue.js

[linker-err0r]

I found I was able to get a working boilerplate much easier by using the Vue CLI with the Electron Builder plugin.

$ npm install -g @vue/cli
$ vue create electron-vue-app
$ cd electron-vue-app
$ vue add electron-builder

[johnzhu12]

‘does not work with node v12’ +1 changed to node v9 works fine

[hbiblia]

Hola.

En el archivo src/index.ejs, borren process.browser porque esto no parece existir.

[HyperClockUp]

I have this issue with too

I got mine fix with details as outlined by Callum Slate Open .electron-vue/webpack.renderer.config.js and make the following modifications:

// find the rendererConfig variable
let rendererConfig = {
  // then, find the plugins property
  plugins: [
    // then, replace the call to the HtmlWebpackPlugin constructor
    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
    }),
  ]
}

Then open ./src/index.ejs and update as follows:

<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>
<% } %>

Finally open ./src/main/index.js and update the new BrowserWindow initialization options by adding the webPreference as shown:

function createWindow () {
  // add the webPreferences property passed to BrowserWindow
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true
    }
  })
}

Reference: Electron Tutorial: Building Modern Desktop Apps with Vue.js

it works!! Amazing!

[ClarkAllen1556]

As of May 4th, this is still the best solution. Honestly not sure what I all changed but it worked.

I have this issue with too

I got mine fix with details as outlined by Callum Slate Open .electron-vue/webpack.renderer.config.js and make the following modifications:

// find the rendererConfig variable
let rendererConfig = {
  // then, find the plugins property
  plugins: [
    // then, replace the call to the HtmlWebpackPlugin constructor
    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
    }),
  ]
}

Then open ./src/index.ejs and update as follows:

<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>
<% } %>

Finally open ./src/main/index.js and update the new BrowserWindow initialization options by adding the webPreference as shown:

function createWindow () {
  // add the webPreferences property passed to BrowserWindow
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true
    }
  })
}

Reference: Electron Tutorial: Building Modern Desktop Apps with Vue.js

it works!! Amazing!

[diavrank]

I have this issue with too

I got mine fix with details as outlined by Callum Slate Open .electron-vue/webpack.renderer.config.js and make the following modifications:

// find the rendererConfig variable
let rendererConfig = {
  // then, find the plugins property
  plugins: [
    // then, replace the call to the HtmlWebpackPlugin constructor
    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
    }),
  ]
}

Then open ./src/index.ejs and update as follows:

<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>
<% } %>

Finally open ./src/main/index.js and update the new BrowserWindow initialization options by adding the webPreference as shown:

function createWindow () {
  // add the webPreferences property passed to BrowserWindow
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true
    }
  })
}

Reference: Electron Tutorial: Building Modern Desktop Apps with Vue.js

With Electron 11.2.3 also works if you complement the following code in ./src/main/index.js with:

mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true,
      enableRemoteModule: true
    }
  })

enableRemoteModule option fix the error of Cannot read property 'app' of undefined . Check here.

[holmesadrianh]

I have this issue with too

I got mine fix with details as outlined by Callum Slate Open .electron-vue/webpack.renderer.config.js and make the following modifications:

// find the rendererConfig variable
let rendererConfig = {
  // then, find the plugins property
  plugins: [
    // then, replace the call to the HtmlWebpackPlugin constructor
    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
    }),
  ]
}

Then open ./src/index.ejs and update as follows:

<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>
<% } %>

Finally open ./src/main/index.js and update the new BrowserWindow initialization options by adding the webPreference as shown:

function createWindow () {
  // add the webPreferences property passed to BrowserWindow
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true
    }
  })
}

Reference: Electron Tutorial: Building Modern Desktop Apps with Vue.js

I have tried this solution on a new setup and I still seem to get an error in the console log with a blank page: Uncaught ReferenceError: require is not defined

The line that seems to be the issue is in index.esj:10 require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\/g, '\\') %>')

Has anyone else had this issue on a clean setup? I am running Macos and I have Node v15