Symfony 5 / Encore - Javascript issue

Question

I'm a beginner with Symfony and I just finished my first website. The website I built is based on Bootstrap and I'm using some jquery for additional js files I made.

I'm having some trouble with Webpack and Encore as neither my Bootstrap JS or jQuery are working. I'm having no problem with my SCSS and my homemade js are working (except that they don't get jQuery).

What I did :

npm install --save-dev jquery
npm install --save-dev popper.js
npm install --save-dev bootstrap

In my webpack.config.js (Encore) :

.setOutputPath('public/build/')
.setPublicPath('/build')

.addEntry('js/ad', './assets/js/ad.js')
.addStyleEntry('css/app', './assets/css/app.scss')

.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabelPresetEnv((config) => {
    config.useBuiltIns = 'usage';
    config.corejs = 3;
})
.enableSassLoader()

I tried also with and without

.autoProvidejQuery()

In my app.js

import $ from 'jquery';

global.$ = global.jQuery = $;

import 'bootstrap';

In my base.html.twig

<script src="{{ asset('build/js/app.js') }}"></script>

When everything is fine, I'm finally running in the console

npm run dev

or

npm run build

After that, my js features are not working. On the pages requiring jQuery, I'm having an error in the console.

Uncaught ReferenceError: jQuery is not defined
    at bootstrap-datepicker.min.js:7
    at bootstrap-datepicker.min.js:7
book:94 Uncaught ReferenceError: $ is not defined
    at book:94

I'm a bit lost and I don't know what to try. If I manually add my js files without using Encore, everything works fine.

Thanks in advance for helping !

Nadim Al Abdou · Accepted Answer · 2020-03-30 05:20:39Z

1

with the update encore you need to import the css and the jquery in your js like this

//your css files
import '../css/yourCss.css';
//jquery just the $ sign 
const $ = require('jquery');

then you need to make one entry in your webpack config file like

 //you have to make it one word like app, ad 

.addEntry('ad', './assets/js/ad.js')

for using the js and css in your twig files you need to add the css with this builtin function of encore without the normal link tag just this line

{{ encore_entry_link_tags('ad') }} // ad = the entry name

for using java script you need to use this function

{{ encore_entry_script_tags('ad') }} // ad = the entry name

if you are using vs code i recommende to use this extension https://marketplace.visualstudio.com/items?itemName=nadim-vscode.symfony-extension-pack

with this extension you type just encorecss in your twig file and the extension will auto complete the function for you

answered Mar 30, 2020 at 5:20

Nadim Al Abdou

8588 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Maxime Delgado Over a year ago

It worked perfectly, thank you ! I'm also using some external JS though CDN and jQuery didn't work for them. I added the line global.$ = global.jQuery = $; and now everything works

Nadim Al Abdou Over a year ago

i'm very happy to be able to help you happy coding

Collectives™ on Stack Overflow

Symfony 5 / Encore - Javascript issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related