I'm making a react app using Babel and Webpack and I want to use the file-exists
package from npm. I already installed and saved the package as a dependency for my project. After running npm start I get this error:
ERROR in ./~/file-exists/index.js
Module not found: Error: Cannot resolve module 'fs' in C:\GitHub\CryptoPrices\node_modules\file-exists
@ ./~/file-exists/index.js 3:9-22
file-exists
uses fs
as a dependency but for some reason it is not working. Npm starts and runs without any issues if I don't require file-exists
anywhere.
here is my webpack config file:
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
// exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
I'm new to Webpack and Babel so I'm a little bit lost.
To solve the "Cannot find module fs or its corresponding type declarations" error, install the types for node by running the command npm i -D @types/node . You can then import fs with the following line of code import * as fs from 'fs' .
After some research, it seems that 'fs' (which is used to interact with file system) was removed from react-scripts 5. So the only solution is to either use react-scripts 4.0. 3, or use another Excel library.
To solve the "Module not found: Can't resolve" error in React, make sure to install the package from the error message if it's a third-party package, e.g. npm i somePackage . If you got the error when importing local files, correct your import path.
This module is for handling the file system, as fs stands for the file system. There is no need to install this module, as it is available as a built-in module that comes with the installation of Node. js.
node: {
fs: 'empty'
}
try to add the code above to your webpack config file and the error should disappear.
It looks like you're calling the fs
file-exists
method in your index.js
file. I'm not sure in what context you're calling the method, but this looks like a client-side call to a server-side method. I ran into a similar issue just recently.
From what I understand, the main issue seems to be that you can't call server-side (Node) methods in browser-interpreted client-side (front end) code. You have to call them from a server.
Webpack can load the fs
module code into your front end, but the browser can't actually interpret those Node methods and run them; only a Node environment can do that. (more here)
You could fix the core issue by modifying the call to fs
methods to happen somewhere server-side, or by finding an equivalent browser-supported package that offers the same functionality as the fs
methods you need but that can be run in a browser.
A quick search for "fs module for browser" brings up a variety of options that might work for what you need, like fs-web, browserify-fs or filer.
Here is a similar question with some insight. Use fs module in React.js,node.js, webpack, babel,express
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With