Symfony 5 / Encore – Javascript issue

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 !

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *