V2 - Module not found: Error: Can't resolve 'fs' in CLI

[zzx88991]

Hi, I am using webpack CLI for bundling Angualr2 files, and my config works for webpack CLI.

The I installed webpack-dev-server, but I couldn't get it running because of some exceptions.

Most of the exceptions are caused from running webpack plugins or loaders

I have read about #727 , but the solution doesn't work for CLI

Error message from console(the below is of them, but all of them were caused by Module not found: Error: Can't resolve 'fs' in..

ERROR in ./~/fs.realpath/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\...\node_modules\fs.realpath'
 @ ./~/fs.realpath/index.js 8:9-22
 @ ./~/shelljs/~/glob/glob.js
 @ ./~/shelljs/src/common.js
 @ ./~/shelljs/shell.js
 @ ./~/typedoc/dist/lib/converter/plugins/GitHubPlugin.js
 @ ./~/typedoc/dist/lib/converter/plugins/index.js
 @ ./~/typedoc/dist/lib/converter/index.js
 @ ./~/typedoc/dist/lib/application.js
 @ ./~/typedoc/dist/index.js
 @ ./~/typedoc-webpack-plugin/index.js
 @ ./webpack.common.config.js
 @ ./webpack.smartboard.config.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./webpack.config.js

webpack config

var WebpackNotifierPlugin = require('webpack-notifier');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require("webpack");
var CommonChunks = require("webpack/lib/optimize/CommonsChunkPlugin.js");
var path = require("path");
var nodeExternals = require("webpack-node-externals");
var AotPlugin = require('@ngtools/webpack').AotPlugin;
var Visualizer = require("webpack-visualizer-plugin");
var TypedocWebpackPlugin = require('typedoc-webpack-plugin');

module.exports = {
    entry: {
        main: path.join(__dirname, 'app/main.ts'),
        vendor: path.join(__dirname, 'app/vendor.ts'),
        polyfill: path.join(__dirname, 'app/polyfill.ts'),
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, '/asset')
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    plugins: [
        new AotPlugin({
            tsConfigPath: "./tsconfig-aot.json",
            entryModule: __dirname + "/app/app.module#SomeApp",
            mainPath: __dirname + "/app/main.ts",
        }),
        new CommonChunks({
            name: "common",
            filename: "commons.js",
            minChunks: 2
        }),
        new Visualizer(),
        new WebpackNotifierPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.ENVIRONMENT)
        }),
    ],
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.ts?$/,
                loaders: ['@ngtools/webpack']
            },
            {
                test: /\.html$/,
                loader: 'html-loader',

            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]',

            },
            {
                test: /\.css$/,
                loader: 'raw-loader'
            },
            {
                test: /\.json/,
                loader: 'json-loader',
            },
            {
                enforce: 'pre',
                test: /\.js$/,
                loader: "source-map-loader"
            },
            {
                enforce: 'pre',
                test: /\.tsx?$/,
                loader: "source-map-loader"
            },
        ],
    },
};

webpack related package versions

...
+-- @ngtools/webpack@1.3.0
+-- file-loader@0.11.1
+-- html-loader@0.4.5
+-- html-webpack-plugin@2.28.0
+-- json-loader@0.5.4
+-- raw-loader@0.5.1
+-- source-map-explorer@1.3.3
+-- source-map-loader@0.2.1
+-- style-loader@0.16.1
+-- typedoc@0.5.10
+-- typedoc-webpack-plugin@1.1.4
+-- typescript@2.2.2
+-- webpack@2.4.1
+-- webpack-dev-server@2.4.2
+-- webpack-merge@4.1.0
+-- webpack-node-externals@1.5.4
+-- webpack-notifier@1.5.0
+-- webpack-visualizer-plugin@0.1.11

node v7.9.0
OS: windows 10 Pro

Thanks for taking a look 😄

[TomMettam]

I'm getting the same issue, when using webpack-dev-server in conjunction with html-webpack-plugin

Adding
node: { fs: "empty" }

does not appear to help.

[zzx88991]

I am not very familiar with nodejs. Isn't fs a built-in module for nodejs?

[TomMettam]

Yes, but it's not available in the browser, which is what is triggering this error

[karneaud]

+1

[shellscape]

If someone can provide a simple test repo that we can reproduce this error with, we'd be more than happy to reopen and triage. Until then we're closing this one due to it's age.

[ancyrweb]

Personnally I had this problem using the command :
̀webpack-dev-sever webpack.config.dev.js --open

You must add the --config flag to put in a custom file.
̀webpack-dev-sever --config webpack.config.dev.js --open

Solved it for me.

[zzx88991]

Thanks. I would take a try.