Webpack cannot load jquery module

Question

I am trying to import jquery into typescript using webpack. This is what I did.

npm init -y npm install -g webpack npm install ts-loader --save touch webpack.config.js 

I wrote this in a file

 module.exports = { entry: './app.ts', output: { filename: 'bundle.js' }, resolve: { extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'] }, module: { loaders: [ { test: /\.ts$/, loader: 'ts-loader' } ] } } 

Then create app.ts and write the following

 import $ = require('jquery'); 

then i npm install jquery --save to load the jquery component.

then when I execute webpack , it does not let me find the message 'jquery' of the module.

 ts-loader: Using typescript@1.6.2 Hash: af60501e920b87c93349 Version: webpack 1.12.2 Time: 1044ms Asset Size Chunks Chunk Names bundle.js 1.39 kB 0 [emitted] main + 1 hidden modules ERROR in ./app.ts (1,20): error TS2307: Cannot find module 'jquery'. 

Can someone tell me what I did wrong?

Answer 1

Can someone tell me what I did wrong?

You need jquery definitions:

tsd install jquery --save

Also you need to have tsconfig.json:

tsc -init will generate one for you. But I recommend:

 { "compilerOptions": { "module": "commonjs", "target": "es5" }, "exclude": [ "node_modules" ] } 

Also you need to install typescript

npm install typescript -save