1

I can not add a jquery library to my jhipster project, I think it's specific to webpack,

here is an exemple with fullcalendar, but i have the same probleme with all jquery plugin

all is in src/main/webapp/app/layouts/main/main.component.ts & webpack/webpack.common.js

if i try this:

main.component.ts

import $ from 'jquery';
import 'fullcalendar';

webpack.common.js

module: {
rules: [
{ test: /fullcalendar\/dist\/.+\.js/, loader: 'imports-loader?$=jquery' },
{ test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery' },

.... i got an error with: ERROR TypeError: jquery_1.default is not a function

if i try like the exemple on fullcalendar doc:

module: {
rules: [
{ test: /\.tsx?$/, loader: 'awesome-typescript-loader' },
{ enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' },

i got error like :

[at-loader] ./src/main/webapp/app/app.module.ts:18:5 TS2539: Cannot assign to 'FullcalendarExempleAppModule' because it is not a variable.

[at-loader] ./src/main/webapp/app/layouts/main/main.component.ts:9:95 TS2339: Property 'metadata' does not exist on type 'typeof Reflect'.

[at-loader] ./src/main/webapp/app/app.module.ts:18:5 TS2539: Cannot assign to 'FullcalendarExempleAppModule' because it is not a variable.

jquery_1.default is not a function

I tried other tips for hours, but none works ... i dont understand why add a simple jquery plugin seems so hard

i put a jhipster project exemple on github (because i dont know how make a jsfiddle of this project ...) :

https://github.com/brynnlow/jhipster-fullcalendar-exemple.git

Brynnlow
  • 36
  • 4

1 Answers1

0

If I am getting your question, you want to add a jQuery plugin in your jhpster project.

I would suggest you to add all your JS files/ Modules in vendor.ts file by using import command.

import 'path_to_file/file_name.js';

Similarly all CSS related files should be imported to vendor.css or vendor.scss.

You need to make a build of your project by 

yarn run webpack:build

once you are making any changes to your vendor.ts file.

Manish Sharma
  • 31
  • 1
  • add this to my vendor.ts import * as moment from 'moment'; import * as jQuery from 'jquery'; import '../../../../node_modules/fullcalendar/dist/fullcalendar.js'; and remove from main.component.ts but i keep ERROR TypeError: jQuery(...).fullCalendar is not a function – Brynnlow Jul 10 '18 at 08:18
  • In your main.component.ts, no need to import jquery. In place of this: import * as jQuery from 'jquery'; write declare var $: any; then replace your jQuery variable to $. I think this might resolve your issue. – Manish Sharma Jul 10 '18 at 08:57
  • my vendor.ts is now : import * as moment from 'moment'; import * as $ from 'jquery'; import 'fullcalendar'; and my main.component.ts: declare var $: any; but still TypeError: $(...).fullCalendar is not a function, i update the github exemple – Brynnlow Jul 10 '18 at 09:24
  • I think, the problem is in the import. Maybe this can help.. https://stackoverflow.com/a/51213980/8436194 – Arenas V. Jul 11 '18 at 05:00