Issues with webpack with electron and react

[Rosculescu Ciprian]

Hello, 

I have a very specific technology stack within a course i am taking. 

The course focuses on react with electron and firebase. 

The course is not updated so i trying to use more modern versions of react and all adjacent libraries, electron and firebase. 

React and electron were not issues but when upgrading from firebase 8 to firebase 9 i noticed webpack generated externals.

This is my current webpack configuration

```

const path = require('path');

const Dotenv = require('dotenv-webpack')

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = {

mode: 'development',

entry: './src/js/index.js',

devtool: 'inline-source-map',

target: 'electron-renderer',

module: {

rules: [

{

test: /\.js$/,

exclude: /node_modules/,

use: {

loader: 'babel-loader',

options: {

presets: [[

'@babel/preset-env', {

targets: {

esmodules: true

}

}],

'@babel/preset-react']

}

}

},

{

test: [/\.s[ac]ss$/i, /\.css$/i],

use: [

// Creates `style` nodes from JS strings

'style-loader',

// Translates CSS into CommonJS

'css-loader',

// Compiles Sass to CSS

'sass-loader',

],

}

]

},

plugins: [

new Dotenv(),

new NodePolyfillPlugin()

],

resolve: {

extensions: ['.js'],

},

output: {

filename: 'app.js',

path: path.resolve(__dirname, 'build', 'js'),

},

};

```

The compilation is message is the following

asset app.js 6.09 MiB [compared for emit] (name: main)
runtime modules 1.36 KiB 6 modules
modules by path ./ 2.25 MiB
  modules by path ./node_modules/ 2.21 MiB 85 modules
  modules by path ./src/js/ 48.1 KiB 22 modules
asset modules 4.4 KiB
  data:image/svg+xml,%3csvg xmlns=%27.. 281 bytes [built] [code generated]
  data:image/svg+xml,%3csvg xmlns=%27.. 279 bytes [built] [code generated]
  data:image/svg+xml,%3csvg xmlns=%27.. 161 bytes [built] [code generated]
  data:image/svg+xml,%3csvg xmlns=%27.. 271 bytes [built] [code generated]
  data:image/svg+xml,%3csvg xmlns=%27.. 181 bytes [built] [code generated]
  + 11 modules
external "util" 42 bytes [built] [code generated]
external "assert" 42 bytes [built] [code generated]
external "crypto" 42 bytes [built] [code generated]

When electron starts the following error appears in devtools

Uncaught ReferenceError: require is not defined
    at Object.util (app.js:42612:1)
    at __webpack_require__ (app.js:54697:42)
    at Object../node_modules/console-browserify/index.js (app.js:4995:12)
    at __webpack_require__ (app.js:54697:42)
    at Object../node_modules/react/cjs/react.development.js (app.js:37474:41)
    at __webpack_require__ (app.js:54697:42)
    at Object../node_modules/react/index.js (app.js:39822:20)
    at __webpack_require__ (app.js:54697:42)

This only happens with firebase 9, firebase 8 does not have these issues.

If you have some ideas how to fix this issue or where to search for the answer. 

Thank you,

Ciprian