Can't resolve 'fs' in electron-react-boilerplate app

Question

colleagues,

I have encountered with 2 errors. Tried many solutions found in stackoverflow and www but nothing helped. I would appreciate much if you provide any suggestions.

ERROR in ./src/component/FileReaderComponent.tsx 8:11-24
Module not found: Error: Can't resolve 'fs' in 'D:\apps\ex-electron-react\src\component'
 @ ./src/renderer/App.tsx 8:30-73
 @ ./src/renderer/index.tsx 10:30-46

ERROR in ./src/component/FileReaderComponent.tsx 9:13-28
Module not found: Error: Can't resolve 'path' in 'D:\apps\ex-electron-react\src\component'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }
 @ ./src/renderer/App.tsx 8:30-73
 @ ./src/renderer/index.tsx 10:30-46

1. Have node-16.15.0 and npm-8.5.5
2. Installed electron-react-boilerplate
3. Dependencies in package.json are:

"electron-debug": "^3.2.0",
"electron-log": "^4.4.7",
"electron-updater": "^5.0.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0"

4. BrowserWindow in main.ts has

webPreferences: {
     preload: app.isPackaged
       ? path.join(__dirname, 'preload.js')
       : path.join(__dirname, '../../.erb/dll/preload.js'),
},

5. Created a react component

import { Component } from "react";
const fs = require("fs");
const path = require("path");

export class FileReaderComponent extends Component<any, any> {

 setTabletImages = () => {
   fs.readdirSync('.').forEach( (file: string) => {

     const extname = path.extname( file );
     const filename = path.basename( file, extname );
     const absolutePath = path.resolve( 'D:\\geo\\tablets\\9x7\\temp', file );

     console.log( "File : ", file );
     console.log( "filename : ", filename );
     console.log( "extname : ", extname );
     console.log( "absolutePath : ", absolutePath);

   });
 }

 render() {
   return (
     <button onClick={this.setTabletImages}>
       <span>Log filenames</span>
     </button>
   );
 }
}

6. repo in github

UPD 1

7. If I changes BrowserWindow in main.ts

webPreferences: {
     nodeIntegration: true,
     contextIsolation: false,
     preload: app.isPackaged
       ? path.join(__dirname, 'preload.js')
       : path.join(__dirname, '../../.erb/dll/preload.js'),
},

The issues will gone away, module fs is able to be imported but I receive another error:

Unable to load preload script: .erb\dll\preload.js
(anonymous) @ node:electron/js2c/renderer_init:73
node:electron/js2c/renderer_init:73 Error: contextBridge API can only be used when contextIsolation is enabled
    at node:electron/js2c/renderer_init:45:277
    at Object.exposeInMainWorld (node:electron/js2c/renderer_init:45:359)
    at preload.ts:5:15
    at preload.ts:21:4
    at Object.<anonymous> (preload.ts:21:4)
    at Object.<anonymous> (preload.ts:21:4)
    at Module._compile (node:internal/modules/cjs/loader:1116:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1169:10)
    at Module.load (node:internal/modules/cjs/loader:988:32)
    at Module._load (node:internal/modules/cjs/loader:829:12)

UPD 2

8. I tried to add a line fallback: { "fs": false, path: false }, to webpack.config.base.ts the error after launch have gone but when onClick event is emitted the compiler returns error fs.readdirSync is not a function.

Answer 1

Following https://electron-react-boilerplate.js.org/docs/native-modules/ and https://webpack.js.org/configuration/externals/ helped me resolve the same issue for fsevents added:

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

to my webpack.config.base.ts