Symfony 5 / Encore - Javascript 问题

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 !

Answer 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