Auto-Provide jQuery for Mischievous Packages

just want to achieve jquery / java script - available on webpage. Not somewhere in mystery Encore cloud.

webpack.config.js

1) not working:

new webpack.ProvidePlugin({<br />$: 'jquery',<br />jQuery: 'jquery',<br />});

2) not working

// uncomment if you're having problems with a jQuery plugin<br />.autoProvidejQuery()

app.js
NOT working

import './styles/app.css';
import 'bootstrap';

console.log('whatewer);

import '@popperjs/core';

======================
NOT working

import $ from 'jquery';

========================
NOT working

const $ = require('jquery') ;

let $ = require('jquery');

import 'webpack-jquery-ui';

global.$ = global.jquery = $;

....

each time I render the build dir, clean cache
twig has propper import `

{{ encore_entry_link_tags('app') }}`

{{ encore_entry_script_tags('app') }}

Encore just dont want to be friend. I dont understand the idea of this tool. Everything it does can be achieved SIMPLER.

I got your point, jQuery and Webpack may have problems but it's because there are a few jQuery plugins badly written. You can get more info about it here https://github.com/symfony/webpack-encore/issues/244
A quick workaround would be to add these lines to your webpack.config.js file

const config = Encore.getWebpackConfig();
config.resolve.alias.jquery = path.join(__dirname, 'node_modules/jquery/dist/jquery');

Anyway, Symfony has a component's architecture, it does not force about anything, you can add or remove any Symfony component as you please. If Webpack Encore does not fit your needs, you can remove it and use something else instead

Cheers!

Hi diego, firstly, thank You for your time,

we have progress but not quite.

I have removed nodeJs.14, installed nodeJs 18. - that was main reason for problems.

your workaround is great. Just need to defeat one more yelling information from parser about the proper path

found at <a href="https://webpack.js.org/configuration/output/#outputpath&quot;&gt;webpack path managing</a>

`

module.exports = {

//...
output: {
    path: path.resolve(__dirname, 'public/assets'),
    publicPath: 'https://localhost:8000/build/assets/',
},

};

const config = Encore.getWebpackConfig();
config.resolve.alias.jquery = path.join(__dirname, 'node_modules/jquery/dist/jquery');

`

thx, Cheers!

problem solved, I installed another command "yarn add @algolia/autocomplete-js " instead of "Yarn add autocomplete.js –dev ".
Thanks for your greate courses :)

Hey Lechu85,

Thank you for sharing your solution with others!

P.S. though, you may still want to add "--dev" option to that command as well to install it as a dev dependency :)

Cheers!

Can you tell why --dev must be? After all, autocomplete is also used in production mode :)

Hey Lechu85,

I bet it's explained somewhere in this course ;) But in short, it's not about "must be", but it's just a good practice. That's because all your NodeJS dependencies you install with Yarn are dev-type and nothing is available to the user. Then, the intermediate layer that is Webpack Encore in this case is handle this and compile the final version of those dependencies into the public/build/ folder which in turn is available for users. So, technically, all your JS deps are dev deps and Webpack Encore processes them and compile for users.

I hope it's clearer for you now :)

Cheers!

Thanks for your answer. I understand well.

Hey Anton,

Yes, it should use Webpack's ProvidePlugin behind the scene: https://webpack.js.org/plug... - it's just Encore shortcut for jQuery.

Cheers!

Thanks Victor!

Hey Holger,

Thank you for your feedback! We are really happy to hear this from our users :) And that's why wer're doing screencasts! We want to help our users to understand things better, faster, and save them some time! :)

Cheers!