CODEWITHSUNDEEP
jquerytypescriptwebpack
demiculus
demiculus

Reputation: 1343

How to prevent jquery from importing twice with webpack & typescript?

I am getting this error

Uncaught TypeError: $(...).dialog is not a function

The reason seems to be because I am importing jquery twice. I couldn't find a way to come over this problem.

Here is my complete error where it says something about bootstrap. 

PopupSelectCard.ts:44 Uncaught TypeError: $(...).dialog is not a function
    at Object.PopupSelectCard (PopupSelectCard.ts:44)
    at Object.defineProperty.value (Index.ts:21)
    at __webpack_require__ (bootstrap 92cf533…:19)
    at Object.defineProperty.value (bootstrap 92cf533…:62)
    at bootstrap 92cf533…:62
PopupSelectCard @   PopupSelectCard.ts:44
Object.defineProperty.value @   Index.ts:21
__webpack_require__ @   bootstrap 92cf533…:19
Object.defineProperty.value @   bootstrap 92cf533…:62
(anonymous) @   bootstrap 92cf533…:62

This is my webpack.config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
    context: __dirname,//another dir +"/app"
    // devtool: debug ? "inline-sourcemap" : null,

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    entry: "./code/client/scripts/Index.ts",
    output: {
        path: __dirname + "/code/client/views",
        filename: "scripts.min.js"
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({mangle: false, sourcemap: false}),
        new webpack.IgnorePlugin(/fs/),
    ],
    node: {
        fs: 'empty',
        child_process: 'empty',
    },

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        alias: {
            vue: 'vue/dist/vue.esm.js'
        },
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },
};

This is how I'm importing in my ts file

import * as $ from "jquery";
import 'jquery-ui';

If I don't import jquery I get compiler errors.

Cannot find name '$'.

How can I solve this?

Upvotes: 2

Views: 2027

Answers (1)

demiculus
demiculus

Reputation: 1343

So I had to do a couple of things.

First of all npm install jquery-ui command doesn't install jquery-ui in a usable way. It needs to be compiled. So instead I used npm install jquery-ui-dist.

Secondly only importing the files doesn't work. I needed the reference path in all of my .ts files that used jqueryui

///<reference path="../../../../node_modules/@types/jqueryui/index.d.ts"/>
import * as $ from "jquery";
import 'jquery-ui';

Third: I added the below code to my webpack.config.ts file.

var webpack = require('webpack');

module.exports = {
    ...
    plugins: debug ? [] : [
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ],
    resolve: {
        alias: {
            'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
        }
    }
    ...
};

Forth I also added the typings npm install @types/jquery & npm install @types/jqueryui

I'm not sure which part was the problem, I did all of this a couple time in different versions until it worked. So if anyone wants to edit my answer to clarify each part be my guest.

Upvotes: 1

Related Questions