Module not found: Error: Can't resolve 'fs' in 'C:\path.......\src\components' & node_modules doesn't exist or is not a directory

Question

I don't know why I'm getting this error.

Module not found: Error: Can't resolve 'fs' in 'C:\path.......\src\components' & node_modules doesn't exist or is not a directory

I've tried this code on node:

const fs = require('fs')

const dir = '/Users/MartinG/Desktop/Imagenes'
const files = fs.readdirSync(dir)

    for (let i = 0; i < files.length; i++) {
        const file = files[i]
        const fileName = file.split('.')[0]
        const fileExtension = file.split('.')[1]
        const newFileName = `${fileName}_${i}.${fileExtension}`
        fs.renameSync(`${dir}/${file}`, `${dir}/${newFileName}`)
        console.log(`${file} => ${newFileName}`)
    }

And got a nicely list of the images on the console. So I try to test the same functionality using React, run npx create-react-app, make a "components" folder inside "src" and create the Carga.js component on it:

import style from './Carga.module.css';
import {Link} from 'react-router-dom';
import { FaHome } from "react-icons/fa";
//import fs from 'fs'; I have tried both with import & require, got same results
const fs = require('fs')

const dir = '/Users/MartinG/Desktop/Imagenes'
const files = fs.readdirSync(dir)

export default function Carga() {
  return (
    <>
    <div className={style.header}>      
      <Link to="/"><FaHome className={style.icon} /></Link>
    </div>
    <div className={style.content}>
        {files.map(file => (
          <div className={style.item}>
            <img src={`${dir}/${file}`} alt=""/>
          
        </div>
        ))}
    </div>
    </>
  );
}

....which throws this error:

Failed to compile.

Module not found: Error: Can't resolve 'fs' in 'C:\Users\MartinG\Desktop\test\src\components'
asset static/js/bundle.js 3.14 MiB [emitted] (name: main) 1 related asset
asset index.html 1.67 KiB [emitted]
asset asset-manifest.json 190 bytes [emitted]
cached modules 2.83 MiB [cached] 116 modules
runtime modules 28.1 KiB 13 modules
./src/components/Carga.js 3.18 KiB [built] [code generated]

ERROR in ./src/components/Carga.js 11:11-24
Module not found: Error: Can't resolve 'fs' in 'C:\Users\MartinG\Desktop\test\src\components'
resolve 'fs' in 'C:\Users\MartinG\Desktop\test\src\components'
  Parsed request is a module
  using description file: C:\Users\MartinG\Desktop\test\package.json (relative path: ./src/components)
    resolve as module
      C:\Users\MartinG\Desktop\test\src\components\node_modules doesn't exist or is not a directory
      C:\Users\MartinG\Desktop\test\node_modules doesn't exist or is not a directory
      looking for modules in C:\Users\MartinG\Desktop\test\node_modules
        single file module
          using description file: C:\Users\MartinG\Desktop\test\package.json (relative path: ./node_modules/fs)
            no extension
              C:\Users\MartinG\Desktop\test\node_modules\fs doesn't exist
            .web.mjs
              C:\Users\MartinG\Desktop\test\node_modules\fs.web.mjs doesn't exist
            .mjs
              C:\Users\MartinG\Desktop\test\node_modules\fs.mjs doesn't exist
            .web.js
              C:\Users\MartinG\Desktop\test\node_modules\fs.web.js doesn't exist
            .js
              C:\Users\MartinG\Desktop\test\node_modules\fs.js doesn't exist
            .json
              C:\Users\MartinG\Desktop\test\node_modules\fs.json doesn't exist
            .web.jsx
              C:\Users\MartinG\Desktop\test\node_modules\fs.web.jsx doesn't exist
            .jsx
              C:\Users\MartinG\Desktop\test\node_modules\fs.jsx doesn't exist
        C:\Users\MartinG\Desktop\test\node_modules\fs doesn't exist
      C:\Users\MartinG\Desktop\test\node_modules doesn't exist or is not a directory
      C:\Users\MartinG\Desktop\test\node_modules doesn't exist or is not a directory
      C:\Users\MartinG\Desktop\node_modules doesn't exist or is not a directory
      C:\Users\MartinG\node_modules doesn't exist or is not a directory
      C:\Users\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      looking for modules in C:\Users\MartinG\Desktop\test\node_modules
        single file module
          using description file: C:\Users\MartinG\Desktop\test\package.json (relative path: ./node_modules/fs)
            no extension
              C:\Users\MartinG\Desktop\test\node_modules\fs doesn't exist
            .web.mjs
              C:\Users\MartinG\Desktop\test\node_modules\fs.web.mjs doesn't exist
            .mjs
              C:\Users\MartinG\Desktop\test\node_modules\fs.mjs doesn't exist
            .web.js
              C:\Users\MartinG\Desktop\test\node_modules\fs.web.js doesn't exist
            .js
              C:\Users\MartinG\Desktop\test\node_modules\fs.js doesn't exist
            .json
              C:\Users\MartinG\Desktop\test\node_modules\fs.json doesn't exist
            .web.jsx
              C:\Users\MartinG\Desktop\test\node_modules\fs.web.jsx doesn't exist
            .jsx
              C:\Users\MartinG\Desktop\test\node_modules\fs.jsx doesn't exist
        C:\Users\MartinG\Desktop\test\node_modules\fs doesn't exist
 @ ./src/App.js 7:0-44 28:40-45
 @ ./src/index.js 7:0-24 10:33-36

webpack 5.65.0 compiled with 1 error in 10029 ms

Here it is package.json, I've added "browser": {"[module-name]": false }, as It's suggested on another post, but nothing changes.

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.3"
  },
  "browser": {
    "[module-name]": false   
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

**fs** is a Node.js module. React runs in the browser where there is no such thing. — tromgy, Jan 08 '22 at 14:52
`fs` module is node.js only. You can't use it in the browser. What would be the result of `fs.readFile("path/to/file")` anyways? Trying to read the file on the user's local harddisk? Quite a security nightmare, don't you think? Trying to read that file on the server? How would that work if the code is running in the local browser? — derpirscher, Jan 08 '22 at 14:58
Tnx for your quick response guys! I was trying to build an example App to see how React manage and show files from my hard disk. Just for learning reasons. Is there´s another way to achieve that? — Martin Gonzalez, Jan 08 '22 at 15:10
You can use webpack functionality and `import` the images. But AFAIK it needs to be done individually for each image. — tromgy, Jan 08 '22 at 15:26
For security reasons, javascript running in the browser does not have any access to the local filesystem. The only way to load files from the local filesystem directly in the browser (ie without a backend you can send http requests to) at runtime is using an `` element and let the user select one or more files. Of course if you have a (for instance nodejs) backend, you can send requests from the browser to that backend, load the files there and send the content back to the browser. — derpirscher, Jan 08 '22 at 15:52

Module not found: Error: Can't resolve 'fs' in 'C:\path.......\src\components' & node_modules doesn't exist or is not a directory

0 Answers0