Modules: require() & import()

You are a hero! Nice video's my man!

the .js and .css files are getting built in the build directory but console.log is not working it seems. No output on console after successfull build

Hey CloudCreators

Can you double-check that the CSS and JS files are being requested in your browser? You can check by opening the web debug toolbar and inspect the requests. A second thing to do is to do a hard refresh on your Browser (Usually Ctrl + F5)

Cheers!

Now I find this in my console suddenly :

GET https://127.0.0.1:8000/favicon.ico 404 not found

Hey Shubham,

It's minor, and you can completely ignore this error for now while develop a project for learning purposes, but it's bad for production of course. If you want to fix it - make sure you have that favicon.ico file in your public/ directory. If not - create an .ico file and put it there, and try again. Or, if you have that ico file in a different dir - point the link in your base.html.twig to it. But I'd not recommend you to place it in a different place or handle this file via Webpack Encore - this is something that should be called favicon.ico and be stored in the public/ dir, think of this as a defacto standard :)

Cheers!

MY APP.JS FILE

import '../styles/app.css';
import getNiceMessage from './get_nice_message';
console.log(getNiceMessage(5));
// start the Stimulus application
import '../bootstrap';

MY GETNICEMESSAGE.JS FILE

export default function(exclamationCount){
// console.log('Hello Webpack Encore! Edit me in assets/js/app.js'+'!'.repeat(exclamationCount));
return 'Hello Webpack Encore! Edit me in assets/js/app.js'+'!'.repeat(exclamationCount);
};

THE background color changes as specified in .css but no console log printed.

The css is working the background colour changes but no output on console which I put in my .js file. I tried the hard refresh too.

Is it possible to integrate the Material Components Web from material.io into Encore?

Hey Niki,

Yes, it should just work out of the box as soon as it works with Webpack. I see in their docs that to use the "@material/textfield" component you just need to import it as:

import {MDCTextField} from '@material/textfield/index';

So, just try to follow their installation steps in docs: https://github.com/material-components/material-components-web#using-npm

I hope this helps! If you have any problems with Encore during those steps - just let us know and we would try to help!

Cheers!

Okay thank you. Is there a way to use Angular Material only instead of Material Components in non-Angular App?

Hey Niki,

Well, I'm not familiar with Angular Material unfortunately, so don't know, probably better to just google this :)

Cheers!

Hello, first thanks a lot for this amazing course !!! I discover so much cool things ! But I have a problem, I can't import external jquery library.
I tried with jquery nicescroll and jquery circle progress but I have always an error $(...).niceScroll is not a function or $(...).circleProgress is not a function...
No problem for using jquery and no problem for using bootstrap functions like dropdown for example but other external libraries don't work :(

I installed it with yarn and imported it like that :

'use strict';
import $ from 'jquery';
import 'bootstrap';
import 'jquery.nicescroll';
import 'jquery-circle-progress';

// and next my code

// this code is ok

$(".side-navbar li a").click(function(event) {
$(".collapse").collapse('hide');
});

// this code makes an error nicescroll not a function

$(".sidebar-scroll").niceScroll({
// some options
});

Thanks a lot for your help

Hey danslacabanedelilie

That's a problem coming from bad written Jquery plugins. I recommend you to watch this episode where Ryan talks about it and shows a solution: https://symfonycasts.com/sc...

Cheers!

Thanks MolloKhan for your response. I've watched this episode and the autoProvidejQuery() is in my webpack.config.js but not better. And it's not a "jQuery is not defined" error that I have but it's $(...).niceScroll is not a function or $(...).circleProgress is not a function.
I don't understand why it's not working. Here is my config file :

var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')

.addEntry('register', './assets/js/register.js')
.addEntry('default', './assets/js/default.js')
.addEntry('ecole', './assets/js/ecole.js')
.addEntry('projet', './assets/js/projet.js')

.splitEntryChunks()

.enableSingleRuntimeChunk()

.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())

.configureBabel(() => {}, {
useBuiltIns: 'usage',
corejs: 3
})

.enableLessLoader()

.autoProvidejQuery()

.copyFiles({
from: './assets/img',
to: 'img/[path][name].[hash:8].[ext]'
})
;

module.exports = Encore.getWebpackConfig();

Hey Danslacabanedelilie,

I see you have ".autoProvidejQuery()" in your webpack config - that's good! So, the question is how you import things in your JS files? IN you file where, e.g. you want to circleProgress plugin you need to import jQuery first, and then import the plugin, i.e. something like this:
import $ from 'jquery';<br />import 'jquery-circle-progress';

So, only import the jQuery is NOT enough, you have to also import the plugins you are going to use, and do it AFTER jQuery is imported. Also, it depends on plugins, you may need different workarounds for different plugins, I'd recommend you to look into official plugin repositories - search in docs or search for issues where people describe how to import the plugin with Webpack and do the same.

I hope this helps!

Cheers!

Hello victor thanks for your response.
As I said in my first comment I installed it with yarn and imported it like that in my js file :

`
'use strict';
import $ from 'jquery';
import 'bootstrap';
import 'jquery.nicescroll';
import 'jquery-circle-progress';
import 'chart.js';

// and next my code

// this code is ok
$(".side-navbar li a").click(function(event) {
$(".collapse").collapse('hide');
});

// this code makes an error nicescroll not a function
$(".sidebar-scroll").niceScroll({
// some options
});

// this code makes an error circleprogress not a function
$('.circle').circleProgress({
value: 0.87,
size: 150,
startAngle: -Math.PI / 2,
thickness: 14,
lineCap: 'round',
emptyFill: '#f0eff4',
fill: {
gradient: ['#f9a58d', '#e76c90']
}
}).on('circle-animation-progress', function (event, progress) {
$(this).find('.percent').html(Math.round(87 * progress) + '<i>%</i>');
});
`

I also use chart.js and I have no problem with it but it's written in vanilla...
It seems it's only with jquery plugins, I've tried with some others and it's the same.
I looked into official repo for circle progress for example and it needs no specific configuration so I really don't understand...
I will open an issue in plugins repo maybe someone will know what's happen

Interesting... try adding this to your webpack.config.js file

...
const config = Encore.getWebpackConfig();

// see https://github.com/symfony/webpack-encore/issues/244
config.resolve.alias.jquery = path.join(__dirname, 'node_modules/jquery/dist/jquery');

module.exports = config;
// end of file

MolloKhan OMG you saved my life !!! I was on vacation, I just tried and magic it works now ! I will look at the issue to understand the trick, thanks thanks thanks !!!

#assets/app.js
import $ from 'jquery';
import 'carousel';
import 'bootstrap'; //adds functions to jquery

$(document).ready(function () {
var owl = $('#owl-slide');
owl.on('changed.owl.carousel', function (event) {
var element = event.target;
$('div[id="slide-shortcuts_"]').hide();

});
owl.owlCarousel({
items: 1,
nav: true,
autoplay: true,
autoplayHoverPause: true,
autoplayTimeout: 4000,
navText: [
"prev",
"next"
],
dotsContainer: '.owl-pagination'
});
});

It says to me owlcarousel is not a function also with pushmenu he tells me to install it with npm, I've done that and he says the same thing over over. I'm not sure if use encore or going back to the imports without it, it's so boring

Hey Giacomo,

Did you follow their quick start: https://github.com/OwlCarou... ? I see they say to import it as 'owl.carousel'.

Cheers!