require('fs') return undefined with webpack 5 in electron-react-boilerplate

[shunmian]

Bug report

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce.

I have used electron-react-boilerplate to build my app which use webpack 5. When I use const fs = require('fs'), it return undefined. Appreciate if anyone has some suggestion.

The webpack.config.ts is as following:

/**
 * Base webpack config used across other specific configs
 */

import webpack from 'webpack';
import TsconfigPathsPlugins from 'tsconfig-paths-webpack-plugin';
import webpackPaths from './webpack.paths';
import { dependencies as externals } from '../../release/app/package.json';
import NodePolyfillPlugin from "node-polyfill-webpack-plugin";

const configuration: webpack.Configuration = {
  externals: [...Object.keys(externals || {})],

  stats: 'errors-only',

  module: {
    rules: [
      { test: /\.m?js/, resolve: { fullySpecified: false, }, },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true
          }
        }
      },
      {
        test: /\.[t]sx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'ts-loader',
          options: {
            // Remove this line to enable type checking in webpack builds
            transpileOnly: true,
            compilerOptions: {
              module: 'esnext',
            },
          },
        },
      },
      {
        test: /\.(glb|gltf)$/i,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: 'models/[name].[hash:7].[ext]',
          // 输出文件位置：  assets/models/文件
          outputPath: 'assets/'
        }
      }
    ],
  },

  output: {
    path: webpackPaths.srcPath,
    // https://github.com/webpack/webpack/issues/1114
    library: {
      type: 'commonjs2',
    },
  },

  /**
   * Determine the array of extensions that should be used to resolve modules.
   */
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
    modules: [webpackPaths.srcPath, 'node_modules'],
    fallback: {
      "fs": false,
      "tls": false,
      "net": false,
      "path": false,
      "zlib": false,
      "http": false,
      "https": false,
      "stream": false,
      "crypto": false,
      "glob": false,
      "process": false,
      "assert": false,
      "child_process": false,
      "constants": false,
      "os": false,
    },
    // There is no need to add aliases here, the paths in tsconfig get mirrored
    plugins: [new TsconfigPathsPlugins()],
  },

  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'production',
    }),
  ],
};

export default configuration;

What is the expected behavior?

it should return the node native fs for const fs = require('fs) instead of undefined

Other relevant information:
webpack version:
Node.js version:
Operating System:
Additional tools:

[alexander-akait]

Because you have "fs": false, please don't set it, also please set a valid target and webpack does it for you