Webpack failed to compile error after installing a package

Question

I am using some boilerplate code for Angular 4 and am having an issue. It works fine until I download another package from npm. I get the following error and the command ng serve no longer works. The project already had jquery installed so the error doesn't make sense to me. There was no webpack.config.js file so I added one with the code below. Any help would be appreciated.

webpack.config.js file

var webpack = require('webpack');

var config = {
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
};
module.exports = config;

Error

WARNING in ./~/jsdom/lib/jsdom/utils.js 216:21-40 Critical dependency: the request of a dependency is an expression

WARNING in ./~/jsdom/lib/jsdom/living/xmlhttprequest.js 20:23-30 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./~/ajv/lib/async.js 96:20-33 Critical dependency: the request of a dependency is an expression

WARNING in ./~/ajv/lib/async.js 119:15-28 Critical dependency: the request of a dependency is an expression

WARNING in ./~/ajv/lib/compile/index.js 13:21-34 Critical dependency: the request of a dependency is an expression

ERROR in ./~/jquery/lib/node-jquery.js Module not found: Error: Can't resolve 'xmlhttprequest' in 'E:\\WebstormProjects\\innovation-node-server-2.0\\node_modules\\jquery\\lib' @ ./~/jquery/lib/node-jquery.js 8:28-53 @ ./src/lib.ts @ ./src/main.ts @ multi webpack-dev-server/client? http://localhost:4200 ./src/main.ts

ERROR in ./~/jquery/lib/node-jquery.js Module not found: Error: Can't resolve 'location' in 'E:\\WebstormProjects\\innovation-node-server-2.0\\node_modules\\jquery\\lib' @ ./~/jquery/lib/node-jquery.js 13:24-43 @ ./src/lib.ts @ ./src/main.ts @ multi webpack-dev-server/client? http://localhost:4200 ./src/main.ts

ERROR in ./~/jquery/lib/node-jquery.js Module not found: Error: Can't resolve 'navigator' in 'E:\\WebstormProjects\\innovation-node-server-2.0\\node_modules\\jquery\\lib' @ ./~/jquery/lib/node-jquery.js 17:25-45 @ ./src/lib.ts @ ./src/main.ts @ multi webpack-dev-server/client? http://localhost:4200 ./src/main.ts

ERROR in ./~/jsdom/lib/jsdom/living/xmlhttprequest.js Module not found: Error: Can't resolve 'child_process' in 'E:\\WebstormProjects\\innovation-node-server-2.0\\node_modules\\jsdom\\lib\\jsdom\\living' @ ./~/jsdom/lib/jsdom/living/xmlhttprequest.js 4:18-42 @ ./~/jsdom/lib/jsdom/browser/Window.js @ ./~/jsdom/lib/jsdom.js @ ./~/jquery/lib/node-jquery.js @ ./src/lib.ts @ ./src/main.ts @ multi webpack-dev-server/client? http://localhost:4200 ./src/main.ts webpack: Failed to compile.

Answer 1

Angular cli internally uses packages and installs them so you will not see them in package.json file so delete your wepback config file. If you want to have the whole control over packages use ng eject and you will see webpack config file but you will loose ng --any command. And recheck how you added jquery to your project.