Module not found: Error: Can't resolve 'fs' Using Webpack

Question

Hi im using socket io in my application. Which is requiring fs. when i try to bundle my javascript using below webpack config. im getting error can not resolve 'fs'.

Module not found: Error: Can't resolve 'fs' in 'my application path/node_modules/socket.io/lib'

i found by adding target:'node' and node:{fs:'empty'}. this issue got resolved.

But there is an issue in sass-loader. Getting below error.

ERROR in javascript/bundle.js from UglifyJs
Unexpected token: name (zlibLimiter) [javascript/bundle.js:60019,4]
Child extract-text-webpack-plugin ../../../node_modules/extract-text-webpack-plugin/dist ../../../node_modules/css-loader/index.js??ref--2-2!../../../node_modules/sass-loader/lib/loader.js!s

running the application ignoring above error. getting below error.

external "crypto":1 Uncaught ReferenceError: require is not defined
    at Object.__decorate (external "crypto":1)
    at __webpack_require__ (bootstrap 93620a17882f7a2aa1d3:19)
    at Object.byteToHex (rng.js:4)
    at __webpack_require__ (bootstrap 93620a17882f7a2aa1d3:19)

Below is my webpack config and versions. Can some one please help me to resolve this issue.

"webpack": "~3.6.0", npm -v 5.8.0 node -v v8.4.0

const webpack = require('webpack');
const env = process.env.NODE_ENV;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const extractSass = new ExtractTextPlugin({
  filename: 'css/[name].css',
  allChunks: false
});


let output = {
  path: __dirname + '/src/main/resources/static/',
  filename: 'javascript/[name].js'
};

if (env === 'debug' || env === 'nondev') {
  output = {
    path: __dirname + '/target/classes/static/',
    filename: 'javascript/[name].js'
  };
}

let config = {
  context: __dirname + '/app/js/src',
  entry: {
    bundle: './index.jsx',
    application: './static/scss/application.scss',
    'application-pdap': './static/scss/application-pdap.scss'
  },
  output: output,
  devtool: 'cheap-module-source-map',
  module: {
    rules: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {presets: ['es2015', 'react']}
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg|png|jpg|gif)$/,
        loader: 'file-loader?limit=1024&name=images/[name].[ext]'
      },
      {
        test: /\.(scss|css)$/,
        include: [path.resolve(__dirname, 'app/js/src/static/scss')],
        use: ExtractTextPlugin.extract({
          publicPath: '../',
          use: [
            {
              loader: 'css-loader',
              options: {
                minimize: true,
                sourceMap: false
              }
            },
            {loader: 'sass-loader'}
          ],
          fallback: 'style-loader'
        })
      }
    ]
  },
  plugins: [extractSass],

};

if (env === 'production' || env === 'nondev') {
  config.devtool = 'nosources-source-map';

  config.plugins.push(
    new webpack.DefinePlugin({
      'process.env': {NODE_ENV: '"production"'}
    })
  );

  config.plugins.push(new webpack.optimize.UglifyJsPlugin({
    compress: {warnings: false},
    comments: false,
    sourceMap: false,
    minimize: false
  }));
}

module.exports = config;

Answer 1

The solution depends on the type of application you want to build. Usually front-end and back-end JavaScript code are bundled separately, effectively creating two output bundles.

Front-end

For a frontend/web project, add the socket.io client libary to your app bundle. There is no need to include any node dependencies (fs) or mock entries like node: { fs:'empty' }. You can choose target:'web' or leave it out, as it is the default.

Back-end

Pick target:'node' and install socket.io server library. You do not need to specify externals: ["fs"] as shown in the other answer, because target: 'node' will take care of not bundling path, fs and other built-in modules.

Better avoid npm i fs - this is a needless escape hatch and a security risk. There have already happened cases of malicious npm packages with common package names.

You could even deliberate about, wether a node backend bundle is needed at all. An alternative is to install webpack-node-externals, which treats either all or specific npm packages as "externals" and excludes them from the bundle:

var nodeExternals = require('webpack-node-externals');

module.exports = {
  target: 'node', // ignore built-in modules like path, fs, etc.
  externals: [nodeExternals()], // ignore all modules in node_modules folder
  // ...
};

This makes sense for the back-end, as all dependencies are installed in node_modules at server start time and don't need to be included in the bundle.

Exclude files from loaders

To exclude files from certain loaders and their transformations, you can use exclude module rule. An example is to omit node_modules from babel-loader transformations:

{ test: /\.(jsx|js)$/, exclude: /node_modules/, loader: "babel-loader" }

Further reading

Answer 2

Just install fs (npm i fs), and add at your webpack config

externals: ["fs"],