Using FS in CRA + Electron

Is this a bug report?

Unsure.

I’m trying to use create-react-app + electron.js to make a cross-platform desktop app. In that app, I want to save and load the user’s files, like Word or Excel. To do so, I need believe I need to use node.js’s fs module, which I believe is somehow blocked in CRA, but I also need to use electron.js’s dialog as well. Requiring that module throws an error when electron itself can’t use fs.

I don’t know if this is an error in how I’m thinking about the app, an error in how I’ve configured my app, an error in react, create-react-app, or electron, or if it’s something else. Any help would be appreciated.

I have not ejected the app.

Did you try recovering your dependencies?

Yes. I rebuilt the project essentially from scratch here: https://github.com/arcandio/fstest2

Which terms did you search for in User Guide?

I’ve looked for

• react fs empty
• react electron fs
• react use fs
• create-react-app fs

Environment

System: OS: Windows 10 CPU: x64 AMD FX™-8350 Eight-Core Processor Binaries: Yarn: 1.15.2 - C:\Users\arcan\AppData\Roaming\npm\yarn.CMD npm: 5.6.0 - C:\Program Files (x86)\nodejs\npm.CMD Browsers: Edge: 44.17763.1.0 Internet Explorer: 11.0.17763.1 npmPackages: react: ^16.8.4 => 16.8.6 react-dom: ^16.8.4 => 16.8.6 react-scripts: 2.1.8 => 2.1.8 npmGlobalPackages: create-react-app: Not Found

Steps to Reproduce

(Write your steps here:)

1. clone or download repo https://github.com/arcandio/fstest2
2. run npm run electron-dev
3. observe error inside electron when attempting to access electron’s dialog via the remote

Expected Behavior

Expected no error on require: https://electronjs.org/docs/api/dialog, as that documentation indicates that const { dialog } = require('electron').remote should be valid outside electron’s main process.

Actual Behavior

App throws an error:

TypeError: fs.existsSync is not a function
getElectronPath
F:/freelance/repos/creative-ontology-editor/node_modules/electron/index.js:8
   5 | var pathFile = path.join(__dirname, 'path.txt');
   6 | 
   7 | function getElectronPath() {
>  8 |   if (fs.existsSync(pathFile)) {
   9 |     var executablePath = fs.readFileSync(pathFile, 'utf-8');
  10 | 
  11 |     if (process.env.ELECTRON_OVERRIDE_DIST_PATH) {

Reproducible Demo

https://github.com/arcandio/fstest2

[agat]

@arcandio, @heyimalex I found solution without eject, with https://www.npmjs.com/package/@craco/craco.

craco.config.js

module.exports = {
    webpack: {
        configure: {
            target: 'electron-renderer'
        }
    }
};

And check that BrowserWindow has nodeIntegration: true property:

new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        nodeIntegration: true
    }
});

[heyimalex]

Pretty certain you’ll need to eject. The relevant line is here; we mock out fs because it’s not available in the browser. This probably will not change; create-react-app is built for running in a normal browser environment. But I feel your pain, as our electron app at work uses ejected cra 😂