Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Webpack ReferenceError: process is not defined

See original GitHub issue

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

Issue Analytics

State:
Created 4 years ago
Reactions:155
Comments:63

Top GitHub Comments

305reactions

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

163reactions

ChrisKadercommented, Dec 10, 2019

https://github.com/nodejs/node/pull/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>