Hey y’all, it’s embarrassingly simple Sage 9 question time again!
In Sage 8.x we used Bower and, if the dependency included a main section, gulp picked up our dependencies and built them in for us (either compiled with our CSS or minified with our js). How are we doing this in Sage 9? I imagine it’s now npm, but do dependencies get built in automatically?
This might need a new thread, but as of right now even though this Slick Carousel example works, it fails at yarn run build:production due to style lint, if you’re including the slick-theme.scss file.
In case other people reach this page when searching for a solution, I was getting the following error when trying to run yarn run build:production with slick-carousel
I know this is an old thread, but I followed the instructions (even from the book), but there is no asset folder inside “dist/vendor”.
Did something change over the time?
I am using the new Sage theme with wordpress 5.
Tried to add slick-carousel.
Edit: Well still no folders in dist, but it is working.
Nevertheless only on “common.js”, when I try to do a slick call inside a blade.php file it shows an error.
1.) In the book you’re selling under “3rd Party Packages”, there is an example with slick and there is a point
3… After running yarn build from the theme directory, your package will be built with your theme assets. The dist folder will contain a vendor directory that has any assets referenced from your packages.
After running yarn run build from the theme directory, your package will be built with your theme assets. The dist folder will contain a _/node_modules/ directory that has any assets referenced from your packages. The compiled CSS and JS will reference these assets without having to manually edit paths
Which is also not showing up.
3.) When I do your example, ofc it is working, but when I use multiple instances for slick with differents settings, this wouldn’t be helpful right? Isn’t there a way that I can initialize slick inside the blade.php block template?
Hi, I’m trying to import this library Stickybits as reccomended by the developer, placing import stickybits from 'stickybits'; in common.js
The point is that the library works only after yarn build or yarn build:production but not while yarn start. But there is no error in console, in each case.
I also tried to import it in the Sage way (in main.js) or in webpack.config inside ProvidePlugin but in these cases I get console error.
I have no more idea how to get it works. Someone can helps?
Then in resources/assets/scripts/routes/common.js, on the first line, I have:
import ‘smooth-scroll’;
Under finalize(), I have:
finalize() {
// JavaScript to be fired on all pages, after page specific JS is fired
var scroll = new SmoothScroll(‘a[href*=“#”]’);
},
When I yarn build, I get the following error:
error Command failed with exit code 2.
info Visit yarn run | Yarn for documentation about this command.
I run yarn run lint:scripts and it tells me the following:
/var/www/website.com/wordpress/wp-content/themes/websitetheme/resources/assets/scripts/routes/common.js
9:9 error ‘scroll’ is assigned a value but never used no-unused-vars
9:22 error ‘SmoothScroll’ is not defined no-undef
This leads me to believe the Smooth Scroll script is not loading.
I’ve tried the “proper” way that the official documentation states and that doesn’t work either.
I’m wondering if anyone has any idea what’s wrong?
I can’t just download the Smooth Scroll JS file and place it in my assets/scripts folder and enqueue it in setup, because ESlint throws back all sorts of errors.
Should I just enqueue the CDN and create/enqueue a JS file and place this code in it?:
Both of the issues pointed out by the linter are the source of your consternation.
9:9 error ‘scroll’ is assigned a value but never used no-unused-vars
9:22 error ‘SmoothScroll’ is not defined no-undef
1. You aren’t using scroll, but you are setting it.
You are attempting to instantiate SmoothScroll onto a new var scroll, but then you aren’t doing anything with that var. If you aren’t doing anything with it, why save the reference? You can fix this error by changing line 9 to simply be:
new SmoothScroll('a[href*="#"]');
In other words: no reason to save a reference to the SmoothScroll object if you never utilize that reference.
If you do plan on doing further things with the scroll var and just haven’t gotten around to it, then you could do something like this for now:
const scroll = new SmoothScroll('a[href*="#"]'); // (aside: const is probably better than var here)
console.log(scroll); // now we're actually using scroll, which satisfies the linter
This should eliminate the linting error on line 9.
2. SmoothScroll’s import is not working as desired
Line 22’s error is telling you that there is no SmoothScroll object, and here I think your problem is with the library itself, which uses UMD imports and does not support ES6 imports (https://github.com/cferdinandi/smooth-scroll/issues/440). I don’t think Sage 9 supports the dynamic import that Chris suggests but it’s worth a shot.
Otherwise, personally, I’d just find a smooth scroll library that does support ES6 (like https://www.npmjs.com/package/sweet-scroll, although I haven’t used it). There have to be hundreds of these things on npm package search. Or, because this is so simple, it probably isn’t the worst idea ever to just include your own drop-in along the lines of https://gist.github.com/james2doyle/5694700. But I’d start with NPM.