Cannot find module "fs" - at webpackMissingModule

Question

My server starts and runs correctly, but when I hit the URL in the browser it gives an error "cannot find module 'fs'".

I tried to setting:

1. target: 'node', but it starts another error

2. node: { fs: 'empty' }, but then it gives an error "cannot find exports"

   "use strict";
   
   const webpack = require('webpack');
   const argv = require('minimist')(process.argv.slice(2));
   const DEBUG = !argv.release;
   
   const path = require('path');
   
   var plugins = [
     new webpack.optimize.CommonsChunkPlugin({
       names: ['common', 'vendors'],
       filename: '[name].js',
       minChunks: Infinity
     }),
     new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV':  DEBUG ? '"development"' : '"production"',
       "process.argv.verbose": !!DEBUG
     }),
     new webpack.ProvidePlugin({
       $: "jquery",
       jQuery: "jquery",
       jquery: "jquery"
     })
   ].concat(DEBUG ? [] : [
     new webpack.optimize.DedupePlugin(),
     new webpack.optimize.UglifyJsPlugin({
       minimize: true,
       compress: {
         warnings: true
       }
     }),
     new webpack.optimize.AggressiveMergingPlugin()
   ]);
   
   module.exports = {
     entry: {
       app: path.join(__dirname, '..', 'app', 'app.js'),
       vendors: [
         'react',
         'react-dom',
         'react-bootstrap',
         'react-router',
         'alt',
         'lodash',
         'superagent',
         'react-router-role-authorization',
         'react-validation-decorator'
       ]
     },
   
     output: {
       publicPath: '/js/',
       path: './wwwroot/js/',
       filename: '[name].js',
       chunkFilename: "[id].[name].js"
     },
   
     context: path.join(__dirname, '..'),
   
     plugins: plugins,
   
     cache: DEBUG,
     debug: DEBUG,
     watch: DEBUG,
   
     stats: {
       colors: true
     },
   
     resolve: {
       extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json']
     },
   
     module: {
       loaders: [
         {
           test: /\.js$/,
           exclude: /node_modules/,
           loaders: ['babel-loader']
         },
         {
           test: /\.(less|css)$/,
           loaders: ["style", "css", "less"]
         },
         {
           test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
           loader: 'url-loader?limit=10000'
         },
         {
           test: /\.(eot|ttf|wav|mp3|mp4)$/,
           loader: 'file-loader'
         },
         {
           test: /\.json$/,
           loader: 'json-loader'
         }
       ]
     },
     node: {
       net: 'mock',
       dns: 'mock'
     }
   };
   

It should not give this error and work correctly.

Answer 1

I don't see any mention of the fs module in your posted webpack setup. So, my guess is that your output application (app.js?) is trying to require and use fs. Webpack is building a client-side, front-end application, one that will be loaded in the browser; fs is not available in the browser.

(Double-check and make sure you aren't trying to, for example, read and write files on the user's machine using fs inside your client-side application. That is not possible in a browser-based application. For an intro to the concept of web applications with a front end and back end, check out the article React App With Node Backend.)