I'm trying to use npm file-system to list the files and folders on my server at a given path. I understand that accessing the file system using Javascript is not allowed from the browser (client-side) but that it should be allowed if I run the javascript from the server.

Therefore I've created a ReactJS application that performs server-side rendering by following the tutorial here (or you get git the code and build/run it out of the box here).

I can call basic functions like Date.now() with the browser's javascript disabled proving that javascript is running on the server but when I insert the following code I receive an error.

Why does my server code not recognize fs?

Component Code:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as userActions from '../actions/user'
import { Link } from 'react-router-dom'
import './FirstPage.css'
var fileSystem = require("file-system")

class FirstPage extends Component {

render() {

  fileSystem.recurse('./', ['*.*'], 
    function(filepath, relative, filename) {
    if (filename) {
   console.log("FILE"+filename);
    } else {
    console.log("FOLDER"+filepath);

    }
  });

    let time = Date.now();


    const b64 = this.props.staticContext ? 'wait for it' : window.btoa('wait for it')
    return (
      <div className='bold'>
        <h2>First Page</h2>
        <p>{`Email: ${this.props.user.email}`}</p>
        <p>{`b64: ${b64}`}</p>
        <p>{time}</p>

        <Link to={'/second'}>Second</Link>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  user: state.user
})

const mapDispatchToProps = dispatch => ({
  userActions: bindActionCreators(userActions, dispatch)
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(FirstPage)

Error:

file-system.js:223 Uncaught TypeError: i.readdir is not a function
    at r (file-system.js:223)
    at Object.t.recurse (file-system.js:244)
    at t.value (FirstPage.js:14)
    at p._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:796)
    at p._renderValidatedComponent (ReactCompositeComponent.js:819)
    at performInitialMount (ReactCompositeComponent.js:359)
    at p.mountComponent (ReactCompositeComponent.js:255)
    at Object.mountComponent (ReactReconciler.js:43)
    at performInitialMount (ReactCompositeComponent.js:368)
    at p.mountComponent (ReactCompositeComponent.js:255)
r @ file-system.js:223
t.recurse @ file-system.js:244
value @ FirstPage.js:14
_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:796
_renderValidatedComponent @ ReactCompositeComponent.js:819
performInitialMount @ ReactCompositeComponent.js:359
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
mountChildren @ ReactMultiChild.js:234
_createInitialChildren @ ReactDOMComponent.js:701
mountComponent @ ReactDOMComponent.js:520
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
a @ ReactMount.js:102
perform @ Transaction.js:141
u @ ReactMount.js:124
perform @ Transaction.js:141
batchedUpdates @ ReactDefaultBatchingStrategy.js:60
i @ ReactUpdates.js:95
_renderNewRootComponent @ ReactMount.js:317
_renderSubtreeIntoContainer @ ReactMount.js:399
render @ ReactMount.js:420
(anonymous) @ index.js:15
t @ bootstrap 7ba872b0d973a86c97b4:19
(anonymous) @ main.0dc33d67.js:30531
t @ bootstrap 7ba872b0d973a86c97b4:19
(anonymous) @ bootstrap 7ba872b0d973a86c97b4:65
(anonymous) @ bootstrap 7ba872b0d973a86c97b4:65

You can do it using:

List React component files inside a directory

list-react-files

https://www.npmjs.com/package/list-react-files

Install

$ npm install --save list-react-files

Usage

import listReactFiles from 'list-react-files'

listReactFiles(__dirname).then(files => console.log(files))
1 users liked answer #0dislike answer #01
Harshal Y. profile pic
Harshal Y.

Try using the, list-files npm package, as it can be used to list all the files in a directory with a particular 'string' present in it.

Refer to the link below to know abt it:

https://www.npmjs.com/package/list-files

Installation:

npm i list-files

Sample use case: To find all the files with "pdf" in a particular directory named "dir"

var find = require('list-files');


find(function(result) {
    console.log(result);
}, {
    dir: 'dir',
    name: 'pdf'
});
0 users liked answer #1dislike answer #10
Aman Parmar profile pic
Aman Parmar

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).