0

I started the use the web pack version 4.42.0, I can build the web-pack and able to run it. But whenever I include below code. I get an error, Please would anyone can help how to use npm fs in web-pack

Index.js 

var fs = require('fs');
console.log(fs.readFileSync());

and my webpack-config.js 

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   module: {
       rules: [
           {
               test: /\.html$/i,
               loader: 'html-loader',
               options: { minimize: true }
           },
           {
               test: /\.m?js$/,
               exclude: /(node_modules|bower_components)/,
               use: {
                   loader: 'babel-loader',
                   options: {
                       presets: ['@babel/preset-env']
                   }
               }
           },
           {
               test: /\.(png|jpe?g|gif)$/i,
               use: [
                   {
                       loader: 'file-loader',
                   },
               ],
           },
           {
               test: /\.node$/,
               use: 'node-loader'
           }
       ],
   },
   plugins: [new HtmlWebpackPlugin({
       template: "./src/index.html",
       filename: "./index.html"
   },
   )],
   mode: 'development',
   node: { fs: 'empty' },
   target: "node"
};

I am facing the error

Uncaught TypeError: fs.readFileSync is not a function

After removing node and target from webpack-config.js

ERROR in ./src/index.js Module not found: Error: Can't resolve 'fs' in '/Users/nagaraj/gowork/src/github.com/webpack_tutor/src' @ ./src/index.js 1:9-22

   package.json

   "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "babel-loader": "^8.0.6",
    "file-loader": "^5.1.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "node-loader": "^0.6.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "fs": "0.0.1-security",
    "lodash-webpack-plugin": "^0.11.5",
    "webpack-dev-server": "^3.10.3"
  }
Nagaraj M
  • 3
  • 9
  • does this help: https://stackoverflow.com/questions/39249237/node-cannot-find-module-fs-when-using-webpack – ROOT Mar 11 '20 at 07:40
  • if I use that code, I face error while building - configuration.module.rules[3].exclude: The provided value "node_modules" is not an absolute path! – Nagaraj M Mar 11 '20 at 07:48
  • why its so diffcult to use filesystem in webpack – Nagaraj M Mar 11 '20 at 08:17
  • its not really, ok, try to remove `node` and `target` options, if you get another error please update your question with the error you get. – ROOT Mar 11 '20 at 08:32
  • I have updated the question as you mention, I remove the node and target, I get an error as mention above – Nagaraj M Mar 11 '20 at 09:20
  • Maybe you are using an old webpack configuration, in latest versions of webpack and node usually people use `path` module: check this: https://github.com/jinpeng/webpack-tutor/blob/master/webpack.config.js – ROOT Mar 11 '20 at 09:53
  • i am facing same error Module not found: Error: Can't resolve 'fs' with new webpack-config – Nagaraj M Mar 11 '20 at 10:09
  • I fix the above issue, but now i am facing another issue ```external_"fs":1 Uncaught ReferenceError: require is not defined at eval (external_"fs":1)``` – Nagaraj M Mar 13 '20 at 09:05

0 Answers0