webpack cannot load module jquery

Question

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

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

In the file, I wrote this

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 the 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 gives me cannot find module 'jquery' message.

ts-loader: Using [email protected]
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 somebody tell me what I did wrong?

Nice question etiquette. Very to the point. Loved reading / answering it — basarat
– basarat, Commented Oct 27, 2015 at 4:42

basarat · Accepted Answer · 2015-10-27 04:52:50Z

3

Can somebody tell me what I did wrong?

You need the jquery definitions:

tsd install jquery --save

Also you need to have a 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

edited Oct 27, 2015 at 4:52

answered Oct 27, 2015 at 4:41

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user454232 Over a year ago

I have tried, but it doesn't work. webpack can directly load npm component if I am correct. BTW, I love your youtube video. :)

user454232 Over a year ago

Thanks, It is working now. Still I want to know that, is webpack reading node_modules automatically?

Raiss Over a year ago

you can always create an alias in your webpack config e.g. ' resolve: { alias: { myNpmModule: path.join(__dirname, '/node_module/myNpmModule/dist/myNpmModule.min')'

basarat Over a year ago

is webpack reading node_modules automatically for require calls yes.

Collectives™ on Stack Overflow

webpack cannot load module jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related