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.

Delete your node_nodules folder and reinstall, looks you've got a corrupt package. — James
@James I deleted my node_nodules folder and that worked until I downloaded another package ex. npm install --save @types/mongoose. After this I got the same error. Instead of deleting the folder again I ran npm install and that fixed it. Why would I need to do this everytime? — James Morris
Are you using something like webpack-dev-server or webpack -w? Sometimes they can recompile too early leaving things in a funny state. — James
@James I am not sure. This is something I probably should know.I run ng serve and it works. I didn't see "serve" as the name of a script to run in my package.json file. — James Morris
I'm not familiar with Angular I'm afraid but I presume ng serve (just based on the name) will be doing something similar. Try killing that process and then installing a package and check whether the same problem persists. — James

alexKhymenko alexKhymenko · Accepted Answer · 2017-09-19T13:21:48

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.

Webpack failed to compile error after installing a package

1 Answers