Sage10: Dependencies work in build but not build:production

[ryanemitchell]

I’m not able to get the JS from a NPM package to be included when I yarn build:production. It works with yarn build but it references the js from the package in node_modules, so not production ready.

Perhaps I am missing something fundamental about including JS from packages with Laravel mix. Really stuck with this one, any help is appreciated. Thank you.

I’ll use AOS for an example.

1. New Sage 10 install

2. Add aos package npm install --save aos@next

3. Import aos SCSS into app.scss

   @import "node_modules/aos/src/sass/aos";

4. Import aos in app.js

import 'bootstrap';
import AOS from 'aos';

$(document).ready(() => {
    AOS.init();
});

5. build with yarn build - Works and AOS is defined in window
6. build with yarn build:production does not work. AOS is not defined in window.

[strarsis]

I had similar issues with the purge mix that usually should only clean up unused styles (and scripts maybe, too?).
Or should these external dependencies actually enqueued in WordPress instead being bundled?

[ryanemitchell]

This is similar to the behavior of unused css and purgecss removing what it does not see in blade templates. Wrap the css you want with purgecss ignore comments and you are good to go.

With JS files referenced using import, running build it keeps the import reference and with build:production It appears they are ignored or stripped out. They should be added to app.js or to vendor.js.

Bundling means just one request, so while app.js or vendor.js will be larger with the included dependencies, it helps site speed when the dependencies are used through out the site.

This seems so simple and should work similar to exports in webpack. I bet I’m missing something obvious. Anyone have this working?

[alwaysblank]

@ryanemitchell

• build with yarn build - Works and AOS is defined in window
• build with yarn build:production does not work. AOS is not defined in window.

Are you determining whether or not AOS is loading by attempting to run AOS() in the console or something similar? AFAIK nothing Mix (or the AOS code) does is going to make AOS available in window although I could be wrong (I’ve never used the library before).

I tried adding AOS to a Sage 10 project I’m working on right now, and it seems to work (at least it’s adding its init classes to elements that I’ve added a data-aos attribute to). I followed your steps except for the app.js because I’m not using Bootstrap or jQuery, so mine looks like this:

import AOS from 'aos';

document.addEventListener('DOMContentLoaded', () => {
  AOS.init();
});

Have you checked the code in your compiled files to see if AOS is even being compiled? IIRC our Mix config doesn’t do anything “purge-like” with JavaScript by default, so the results you’re describing definitely shouldn’t be happening.

[ryanemitchell]

@alwaysblank that you for the suggestion of looking closer to be sure that the JS is being compiled, it is, both in app.js and when extracted into vendor.js.

I figured it out, and while relieved, I can’t believe I missed it. It was the CSS. When ignoring an @import the syntax is different.

For anyone that stumbles upon this issue, I found the ‘fix’ here: https://github.com/FullHuman/purgecss/issues/170#issuecomment-559647362

This does not include the css/scss from an @import

@import "node_modules/aos/src/sass/aos";
/* purgecss end ignore */

This does include the @import and all is well:

/*! purgecss start ignore */
@import "node_modules/aos/src/sass/aos";
/*! purgecss end ignore */