I try to add Jquery into my web application using Symfony Assetmapper.
As descrived in the doc, i used the following command to add Jquery in the App.js and in the importmap.php :
<code>php bin/console importmap:require jquery
<code>php bin/console importmap:require jquery
</code>
php bin/console importmap:require jquery
Everything works fine, i get the Jquery folder in my assets and Jquery is reported in my importmap file.
When my application is launched, i get this error :
<code>Uncaught TypeError: $(...).collapse is not a function
<code>Uncaught TypeError: $(...).collapse is not a function
</code>
Uncaught TypeError: $(...).collapse is not a function
I respect as recommanded to ” import $ from ‘jquery’.
In my folder , the “importmap:require” only create a file : “jquery.index.js”
It seems than jquery file is incomplete or something is missing.
This is the content of the jquery.index.js file :
* Bundled by jsDelivr using Rollup v2.79.1 and Terser v5.19.2.
* Original file: /npm/[email protected]/dist/jquery.js
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
var e,t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},n={exports:{}};
* jQuery JavaScript Library v3.7.1
* Copyright OpenJS Foundation and other contributors
* Released under the MIT license
* https://jquery.org/license
* Date: 2023-08-28T13:37Z
e=n,function(t,n){e.exports=t.document?n(t,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return n(e)}}("undefined"!=typeof window?window:t,(function(e,t){var n=[],r=Object.getPrototypeOf,i=n.slice,o=n.flat?function(e){return n.flat.call(e)}:function(e){return n.concat.apply([],e)},a=n.push,s=n.........
<code>/**
* Bundled by jsDelivr using Rollup v2.79.1 and Terser v5.19.2.
* Original file: /npm/[email protected]/dist/jquery.js
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
var e,t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},n={exports:{}};
/*!
* jQuery JavaScript Library v3.7.1
* https://jquery.com/
*
* Copyright OpenJS Foundation and other contributors
* Released under the MIT license
* https://jquery.org/license
*
* Date: 2023-08-28T13:37Z
*/
e=n,function(t,n){e.exports=t.document?n(t,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return n(e)}}("undefined"!=typeof window?window:t,(function(e,t){var n=[],r=Object.getPrototypeOf,i=n.slice,o=n.flat?function(e){return n.flat.call(e)}:function(e){return n.concat.apply([],e)},a=n.push,s=n.........
</code>
/**
* Bundled by jsDelivr using Rollup v2.79.1 and Terser v5.19.2.
* Original file: /npm/[email protected]/dist/jquery.js
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
var e,t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},n={exports:{}};
/*!
* jQuery JavaScript Library v3.7.1
* https://jquery.com/
*
* Copyright OpenJS Foundation and other contributors
* Released under the MIT license
* https://jquery.org/license
*
* Date: 2023-08-28T13:37Z
*/
e=n,function(t,n){e.exports=t.document?n(t,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return n(e)}}("undefined"!=typeof window?window:t,(function(e,t){var n=[],r=Object.getPrototypeOf,i=n.slice,o=n.flat?function(e){return n.flat.call(e)}:function(e){return n.concat.apply([],e)},a=n.push,s=n.........
Is there another way to install Jquery using Assetmapper ?
Thank you!
I already change the order of import in my app.js file :
<code>import $ from 'jquery';
* Welcome to your app's main JavaScript file!
* This file will be included onto the page via the importmap() Twig function,
* which should already be in your base.html.twig.
import './styles/app.css';
import 'bootstrap/dist/css/bootstrap.min.css';
<code>import $ from 'jquery';
import '@popperjs/core';
import './bootstrap.js';
/*
* Welcome to your app's main JavaScript file!
*
* This file will be included onto the page via the importmap() Twig function,
* which should already be in your base.html.twig.
*/
import './styles/app.css';
import 'bootstrap/dist/css/bootstrap.min.css';
</code>
import $ from 'jquery';
import '@popperjs/core';
import './bootstrap.js';
/*
* Welcome to your app's main JavaScript file!
*
* This file will be included onto the page via the importmap() Twig function,
* which should already be in your base.html.twig.
*/
import './styles/app.css';
import 'bootstrap/dist/css/bootstrap.min.css';