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

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
Have node-16.15.0 and npm-8.5.5
Installed electron-react-boilerplate
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"
BrowserWindow in main.ts has
webPreferences: {
preload: app.isPackaged
? path.join(__dirname, 'preload.js')
: path.join(__dirname, '../../.erb/dll/preload.js'),
},
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>
);
}
}
repo in github
UPD 1
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
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