I'm working on a Symfony5 project, with Yarn & jQuery. I have an error when I try to use the jQuery plugin "isotope-layout" with Webpack Encore.
I try to fix it for many hours but I might not be doing it the right way.
Here is my code :
webpack.config.js
// Same error with or without "autoProvidejQuery"
Encore.autoProvidejQuery();
app.js
import 'jquery';
import 'popper.js';
import 'bootstrap';
import 'isotope-layout';
// start the Stimulus application
import './bootstrap';
custom.js
import jQuery from 'jquery';
import 'isotope-layout';
(function ($) {
// Here is the error :
$(...).isotope({...});
})(jQuery);
Error :
Uncaught TypeError: $(...).isotope is not a function
You don't have to use jQuery when using Isotope. You can use this example from their Webpack documentation:
var Isotope = require('isotope-layout');
var iso = new Isotope( '.grid', {
// options...
});
There is also an example if you want to use jQuery. To install it:
npm install jquery
npm install jquery-bridget
And than:
var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Isotope = require('isotope-layout');
// make Isotope a jQuery plugin
jQueryBridget( 'isotope', Isotope, $ );
// now you can use $().isotope()
$('.grid').isotope({
// options...
});
If you're using modern Javascript (and you're using Webpack, great!), you might not need jQuery in many cases.
Related
I have the following JS in index.js file:
import * as $ from 'jquery';
window.jQuery = $;
$(function () {
$.fn.mapit = function () {
// Do something
}
}
I tried to move the function mapit to another file:
index.js
import * as $ from 'jquery';
window.jQuery = $;
import 'mapit.js'
mapit.js
$(function () {
$.fn.mapit = function () {
// Do something
}
}
But I get an error saying $ is undefined in mapit file.
I am building with webpack and the entry point is index.js
How can I solve this?
You need to reverse your imports. mapit.js is not importing jquery nor does it define it. index.js does.
Perhaps your best course of action is to move jquery to it's own file (jquery.js), import jquery.js into mapit.js, and import mapit.js into index.js
Do an import * as $ from 'jquery'; inside mapit.js too.
That's how modules work in JS, you need to import necessary ones in the file you want to use them in. Its not like traditional <script> tags
I have a React Redux application. Im adding materialize as the CSS framework, but materialize requires jquery. So i installed Jquery and added it to my project via npm. If i import jquery like so
import $ from 'jquery';
No errors are thrown and im able to use it. But only on that component. So i added the wepback plug so i can call $ anymore in my react application. However, when i do this as described on webpacks website, it get the following error.
Line 13: '$' is not defined
Any ideas on why this is ?
app.js
import React from 'react';
import '../styles/index.css';
import Header from './header/Header';
class App extends React.Component {
constructor(props){
super(props);
console.log('Application ready');
}
componentWillMount(){
$('ul.tabs').tabs();
}
render = () => (
<div>
<Header />
<div>
{this.props.children}
</div>
</div>
)
}
export default App;
webpack.config.dev.js
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
jquery: "jquery/src/jquery" // What i added
// $: "jquery/src/jquery"
},
jquery is in the node_modules folder, from the npm install, i didnt add it to any other location.
You've aliased jQuery to the global variable jQuery, not $ - do alias: { $: 'jquery' }.
Wrong, this isn't what alias is for, see https://webpack.js.org/configuration/resolve/
Global variables in (browser) JS are really properties of window. So at the start of your script you could do
import $ from 'jquery';
window.$ = $;
and it'd be available globally after that. Including jQuery in its own <script> tag would do the same thing. But these are both un-webpack, a bit naughty, not modular. The 'correct' thing to do is import $ from 'jquery' in every file where you need it. Yeah this will be tedious if you need it in a lot of places, but it means you know where you need jQuery and where you don't, and if you removed all the components that used jQuery, jQuery would disappear as well.
To add on for Gatsby.js you can npm i jquery and then import jquery in gatsby-browser.js.
import 'jquery/dist/jquery.min';
import 'popper.js/dist/popper.min'; // for navbar animation
import 'bootstrap/dist/js/bootstrap.min';
import $ from 'jquery'; in the relevant files will then detect $
I am trying to import JQuery and JQuery into a project using ES6 syntax using Babel and Browserify to package the code. From what I have been able to figure out the problem is that JQuery UI expects jQuery to be defined as a global variable. I tried setting the global variable after importing jQuery and before importing JQuery UI like this:
import { default as $, default as jQuery} from 'jquery';
wiindow.jQuery = jQuery;
window.$ = $;
import 'jquery-ui';
but it seems browserify puts all imports at the top of the file, so the globals are defined too late. I understand that webpack provides a way to define globals but is there a workaround for browserify?
Try this
window.$ = window.jQuery = import $ from "jquery";
or
import { default as $, default as jQuery} from 'jquery';
window.jQuery = windows.$ = jQuery;
What's the best way to import a javascript jQuery's function (function($) ...)(JQuery) into Angular2?
In the project I'm using the default configuration of AngularCLI so it's using webpack and typescript.
I should import https://github.com/digitalbreed/jquery.fbmessenger that works invoking some function
var element = $('.phone')
// Initialize the plugin
.fbMessenger({
// options go here
});
element.fbMessenger('start', { delay: 1000 })
In the project following some instructions on Internet encounter some problems and I don't know what's the best way to do it:
Using UpgradeModule form the Angular2 Doc there are an error, on #angular\core thare aren't StaticProvider
Importing jquery.fbmessenger like import * as $ from "jquery" how I could refear fbMessenger? import * as fbMessenger from "jquery.fbmessenger" doesn't let me invoke fbMessenger as a function
Like jQuery I have to write a file on #type for the function? Or should I insert an instruction on type.d.ts? So how could I do it?
Thank's for your help.
I'm new to AMD and trying to use react-context-menu library. The docs for the library imports modules like ,
import { ContextMenu, MenuItem, ContextMenuTrigger } from "react-contextmenu";
Now if I were to include the module using define[], how would I do it ?
e.g for including react I would do,
define(["react"], function(React){
});
What should I do if I also want to include react-context-menu and use it's submodules ContextMenu, MenuItem, ContextMenuTrigger?
define(["react", "react-context-menu"], function(React, ??????){
});
Thanks in advance.
Perhaps you should consider using CommonJS modules var $ = require('jquery') in conjunction with a module bundled instead, either webpack or browserify.
define(["react-contextmenu"], function(ReactContextMenu){
var ContextMenu = ReactContextMenu.ContextMenu;
var ContextMenuTrigger = ReactContextMenu.ContextMenuTrigger;
var MenuItem = ReactContextMenu.MenuItem;
});
The sub-modules can be included using .(dot). <module>.<sub-module> worked for me.