importing jquery through webpack error - module not found: can't resolve jquery

Question

I'm new to typescript and trying to learn it through online example and getting started tutorials, I'm following tutorial from https://www.codingforentrepreneurs.com/blog/typescript-setup-guide/ everything worked fine for me except when I tried to import jquery and tried to use it in my typescript file, it started giving error for module not found. Following is my code chunks which I'm running:

my main.ts file is

import * as $ from 'jquery'
import {MustHaveCoffee} from './getcoffee'
class SweetSweetClass{
    constructor(){
        console.log("Even sweeter");
        $('body').css('background-color', 'red');//here error occures
    }
}
let basil = new SweetSweetClass();
let coffee = new MustHaveCoffee();

webpack.config.js file is

var path = require('path');
module.exports = {
    entry: './main.ts',
    resolve: {
        extensions: ['.webpack.js', '.web.js', '.ts', '.js']
    },
    module:{
        loaders: [
            { test:/\.ts$/, loader: 'ts-loader' }
        ]
    },
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

my tsconfig.json file is

{
    "compilerOptions":{
        "module":"commonjs",
        "outDir":"dist/",
        "noImplicitAny":true,
        "removeComments":true,
        "preserveConstEnums":true
    }, 
    "include":[
        "./typings/*"
    ],
    "exclude":[
        "node_modules",
        "**/*.spec.ts"
    ]
}

Following is error which I'm getting while running 'webapack' command

E:\learning-typescript-by-examples>webpack
ts-loader: Using [email protected] and E:\learning-typescript-by-examples\tsconfig.json
Hash: 3a411aca489fbed8710d
Version: webpack 3.0.0
Time: 1659ms
Asset     Size  Chunks             Chunk Names
bundle.js  3.34 kB       0  [emitted]  main
[0] ./main.ts 402 bytes {0} [built]
[1] ./getcoffee.ts 235 bytes {0} [built]

ERROR in ./main.ts
Module not found: Error: Can't resolve 'jquery' in 'E:\learning-typescript-by-examples'
@ ./main.ts 3:8-25

Also, I've added jquery as global module through typings by running

typings install dt~jquery --global --save

and it worked correctly. I followed every step mentioned it tutorial but started getting the stated error. May be I'm missing something but unable to figure it out. I've searched the problem and found some solution (like one here webpack Module not found: Error: Can't resolve 'jquery') but the solutions doesn't seems to be fit in my situation as I'm not using bower for dependency management etc. Any help would be highly appreciated.Thanks

UPDATE

I've added now jquery through using 'npm install --save-dev @types/jquery' and detailed error is following

ts-loader: Using [email protected] and E:\learning-typescript-by-examples\tsconfig.json
Hash: d72ca1c2dd5c6319254c
Version: webpack 3.0.0
Time: 2233ms
Asset     Size  Chunks             Chunk Names
bundle.js  3.35 kB       0  [emitted]  main
[0] ./main.ts 410 bytes {0} [built] [2 errors]
[1] ./getcoffee.ts 235 bytes {0} [built]


ERROR in ./main.ts
(1,20): error TS2306: File 'E:/learning-typescript-by-examples/node_modules/@types/jquery/index.d.ts' is not a module.

ERROR in ./main.ts
(1,20): error TS6137: Cannot import type declaration files. Consider importing 'jquery' instead of '@types/jquery'.

ERROR in ./main.ts

Module not found: Error: Can't resolve '@types/jquery' in 'E:\learning-typescript-by-examples'

resolve '@types/jquery' in 'E:\learning-typescript-by-examples'

  Parsed request is a module

  using description file: E:\learning-typescript-by-examples\package.json (relative path: .)

    Field 'browser' doesn't contain a valid alias configuration

  after using description file: E:\learning-typescript-by-examples\package.json (relative path: .)

    resolve as module

      E:\node_modules doesn't exist or is not a directory
      looking for modules in E:\learning-typescript-by-examples\node_modules

        using description file: E:\learning-typescript-by-examples\package.json (relative path: ./node_modules)

          Field 'browser' doesn't contain a valid alias configuration
        after using description file: E:\learning-typescript-by-examples\package.json (relative path: ./node_modules)

          using description file: E:\learning-typescript-by-examples\node_modules\@types\jquery\package.json (relative path: .)
            no extension

              Field 'browser' doesn't contain a valid alias configuration

             E:\learning-typescript-by-examples\node_modules\@types\jquery is not a file
            .webpack.js

              Field 'browser' doesn't contain a valid alias configuration

              E:\learning-typescript-by-examples\node_modules\@types\jquery.webpack.js doesn't exist
            .web.js

              Field 'browser' doesn't contain a valid alias configuration

              E:\learning-typescript-by-examples\node_modules\@types\jquery.web.js doesn't exist
            .ts

              Field 'browser' doesn't contain a valid alias configuration

              E:\learning-typescript-by-examples\node_modules\@types\jquery.ts doesn't exist
            .js

              Field 'browser' doesn't contain a valid alias configuration

              E:\learning-typescript-by-examples\node_modules\@types\jquery.js doesn't exist
            as directory
              existing directory

                using path: E:\learning-typescript-by-examples\node_modules\@types\jquery\index

                  using description file: E:\learning-typescript-by-examples\node_modules\@types\jquery\package.json (relative path: ./index)
                    no extension

                      Field 'browser' doesn't contain a valid alias configuration

                      E:\learning-typescript-by-examples\node_modules\@types\jquery\index doesn't exist
                    .webpack.js

                      Field 'browser' doesn't contain a valid alias configuration

                      E:\learning-typescript-by-examples\node_modules\@types\jquery\index.webpack.js doesn't exist
                    .web.js

                      Field 'browser' doesn't contain a valid alias configuration
                      E:\learning-typescript-by-examples\node_modules\@types\jquery\index.web.js doesn't exist
                    .ts

                      Field 'browser' doesn't contain a valid alias configuration
                      E:\learning-typescript-by-examples\node_modules\@types\jquery\index.ts doesn't exist
                    .js

                      Field 'browser' doesn't contain a valid alias configuration
                      E:\learning-typescript-by-examples\node_modules\@types\jquery\index.js doesn't exist

[E:\node_modules]

[E:\learning-typescript-by-examples\node_modules\@types\jquery]

[E:\learning-typescript-by-examples\node_modules\@types\jquery.webpack.js]

[E:\learning-typescript-by-examples\node_modules\@types\jquery.web.js]

[E:\learning-typescript-by-examples\node_modules\@types\jquery.ts]

[E:\learning-typescript-by-examples\node_modules\@types\jquery.js]

[E:\learning-typescript-by-examples\node_modules\@types\jquery\index]

[E:\learning-typescript-by-examples\node_modules\@types\jquery\index.webpack.js]

[E:\learning-typescript-by-examples\node_modules\@types\jquery\index.web.js]

[E:\learning-typescript-by-examples\node_modules\@types\jquery\index.ts]

[E:\learning-typescript-by-examples\node_modules\@types\jquery\index.js]
@ ./main.ts 3:8-32

Solution

You're trying to import type definitions instead of the module itself. The error reflects that and suggests that you import jquery instead.

(1,20): error TS6137: Cannot import type declaration files. Consider importing 'jquery' instead of '@types/jquery'.

The actual module is jquery, that means you need to import it as such.

import * as $ from 'jquery';

Of course you need to have it installed first, which might have been your initial problem. You can install it with:

npm install --save jquery

You might be wondering why you need two different packages to use jQuery. The reason is that jquery is a JavaScript module and TypeScript is generally not happy when it doesn't have any type information for a module and jquery doesn't provide them. You don't need the types to use the module, but you need to somehow satisfy the TypeScript compiler. Because it would be tedious to create your own type definitions, there are many type definitions for popular libraries that are made by the community. They can be found in the DefinitelyTyped repository and each of them is published to npm as @types/<package-name>.

The tutorial you're using suggests to use typings, but that is not used anymore since TypeScript 2.0 (see Deprecation Notice: Regarding [email protected]). The tutorial seems to be outdated, even at the time of the writing, and it doesn't really cover more (or in more detail) than the official webpack docs Webpack - TypeScript.