fs.readdirSync is not a function - electron + react.js

Question

I'm trying to write a electron app with React.js and this app accesses file system.

Here is my fileWalker.js:

const path = require('path');
const fs = require('fs');

function *walkFolders (folder, recurseLevel = 0) {
  try {
    const files = fs.readdirSync(folder);

    for (const file of files) {
      try {
        const pathToFile = path.join(folder, file);
        const stat = fs.statSync(pathToFile);
        const isDirectory = stat.isDirectory();
        if (isDirectory && recurseLevel > 0) {
          yield * walkFolders(pathToFile, recurseLevel - 1)
        }
        else {
          yield {
            rootDir: folder,
            fileName: file,
            isDir: isDirectory,
            stat: stat
          }
        }
      }
      catch (err) {
        yield {
          rootDir: folder,
          fileName: file,
          error: err
        }
      }
    }
  }
  catch (err) {
    yield {
      rootDir: folder,
      error: err
    }
  }
}

export default walkFolders;

Then in my App.js, I wrote:

  getFolders(absolutePath) {
    let folders = [];
    // check incoming arg
    if (!absolutePath || typeof absolutePath !== 'string') {
      return folders
    }
    for (const fileInfo of walkFolders(absolutePath, false)) {
      // all files and folders
      console.log(fileInfo);
      if ('error' in fileInfo) {
        console.error(`Error: ${fileInfo.rootDir} - ${fileInfo.error}`);
        continue
      }
      // we only want folders
      if (!fileInfo.isDir) {
        continue
      }
      const node = this.createNode(fileInfo)
      folders.push(node)
    }
    return folders
  }

   ...
  componentDidMount() {
    this.getFolders("E:/gits");
  }
  constructor(props){
    super(props);
    this.getFolders=this.getFolders.bind(this);
    ...
  }
...

But I get this error:

TypeError: fs.readdirSync is not a function

How can I resolve this?

user_8579855 · Answer

It seems Webpack config error. The default value of target in webpack is 'web'. In electron js, it should be electron-renderer.

If you are created a react app by using create-react-app, Then you have to eject the webpack configurations and update the configurations.

Or, If you are not positioned to eject the webpack means, there are some options are there.

By using react-app-rewired we can override the webpack configurations.

1) Install react-app-rewired

For create-react-app 2.x with Webpack 4:

$ npm install react-app-rewired --save-dev

For create-react-app 1.x or react-scripts-ts with Webpack 3:

$ npm install react-app-rewired@1.6.2 --save-dev

2) Create a config-overrides.js file in the root directory

module.exports = function override(config, env) {
  config.target = 'electron-renderer';
  return config;
}

3) 'Flip' the existing calls to react-scripts in npm scripts for start, build and test

/* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}

Then start the server. It might be work. :-)

fs.readdirSync is not a function - electron + react.js

1 Answers