__WEBPACK_IMPORTED_MODULE_5_jquery__(...).modal is not a function

Question

I am trying to open bootstrap modal but its not working in fullcalendar angular 2.

dayClick: function(date, jsEvent, view) {
        (<any>$('#myModal33')).modal('show');
        $('#click_date').val(date._d);
      }

I get:

WEBPACK_IMPORTED_MODULE_5_jquery(...).modal is not a function

If I remove this import * as $ from 'jquery'; then the modal is working, but I need jQuery as well.

score 14 · Accepted Answer · answered Nov 01 '17 at 04:56

14

just change:

import * as $ from 'jquery';

as:

import * as $AB from 'jquery';

this solved my problem. now its work like vroom vroom.... yeheeeee.....

answered Nov 01 '17 at 04:56

Jay Patel

305
2
6
20

3

Hey this works really well, but do you know why we have to do this? – Fangming Feb 26 '19 at 15:31
Not sure what exactly it does, but SOLVES the issue!! Thanks! – Anuj Aug 30 '21 at 22:03
jaja, amazing...it works... really, really thank you. – FerMV Sep 08 '21 at 23:38

score 3 · Answer 2 · edited Jun 20 '20 at 09:12

I think this question has been answered. Managing jQuery plugin dependency in webpack.

Use the ProvidePlugin to inject implicit globals

Most legacy modules rely on the presence of specific globals, like jQuery plugins do on $ or jQuery. In this scenario you can configure webpack, to prepend var $ = require("jquery") everytime it encounters the global $ identifier.

custom.typings.d.ts might be needed to prevent typescript errors.

You could install "@types/jquery" and this file might not be needed.

declare var $: any;

webpack.config.js

var webpack = require("webpack");

...

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
]

score 2 · Answer 3 · answered Feb 26 '19 at 15:40

The accepted answer does work but here's my thought why the $AB works, but not the $.

From the @types/jquery page, it says that the package contains global values $, Symbol and jQuery. In this case, you need to import everything from the package but not overriding the three variables themselves.

So, just add the below line into your app.module.ts and you will be able to use the $ mark throughout your application.

import * as AnythingThatIsNotDollarSignOrSymbolOrjQuery from "jquery"

__WEBPACK_IMPORTED_MODULE_5_jquery__(...).modal is not a function

3 Answers3