Font-awesome: import tree shaking not working with laravel mix

[michaelmano]

        "@fortawesome/fontawesome": "^1.1.3",
    "@fortawesome/fontawesome-pro-regular": "^5.0.6",

import fontawesome from '@fortawesome/fontawesome';
import {
 faPhone,
 faAngleRight,
} from '@fortawesome/fontawesome-pro-regular';

fontawesome.library.add(faPhone, faAngleRight);



md5-6af956a56fba900f48a6b58aaf080de1



/**
 * Font Awesome settings, Singluar imports due to tree shaking not working
 */
import fontawesome from '@fortawesome/fontawesome';
import faPhone from '@fortawesome/fontawesome-pro-regular/faPhone';
import faAngleRight from '@fortawesome/fontawesome-pro-regular/faAngleRight';

fontawesome.library.add(faPhone, faAngleRight);

That works.. though its annoying.

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

I didn't get if both the snippets don't work or if the first works and the second doesn't or viceversa

Could you please clarify?

[robmadole]

We're working on making this less annoying. Stay tuned @michaelmano

[michaelmano]

@tagliala sorry thought the title made it clear, the first does not work. Its with laravel mix which is based on webpack2

[tagliala]

@michaelmano don't worry. It appears to be a known issue, please stay tuned

[mlwilkerson]

@michaelmano would you like to try your laravel mix scenario with some of our pre-releases that are tuned for tree shaking that Just Works™️ ?

If I were to start with the code from your original post and redo for the pre-release package names and versions (as today's living-on-the-edge versions, that is), I think it would be:

        "@fortawesome/fontawesome-svg-core": "^1.2.0-10",
    "@fortawesome/pro-regular-svg-icons": "^5.1.0-7",

import { library } from '@fortawesome/fontawesome-svg-core';
import {
 faPhone,
 faAngleRight,
} from '@fortawesome/pro-regular-svg-icons';

library.add(faPhone, faAngleRight);

If you try it, please let us know how it goes.

[robmadole]

@hal869 we have new packages for the icon contents:

• @fortawesome/free-solid-svg-icons
• @fortawesome/free-regular-svg-icons
• @fortawesome/free-brands-svg-icons

Also you do not need @fortawesome/fontawesome any longer. Have a look at the upgrading guide: https://github.com/FortAwesome/Font-Awesome/blob/master/UPGRADING.md

[robmadole]

@hal869

Run this instead:

yarn add \
 @fortawesome/fontawesome-svg-core@prerelease \
 @fortawesome/free-solid-svg-icons@prerelease \
 @fortawesome/free-regular-svg-icons@prerelease \
 @fortawesome/free-brands-svg-icons@prerelease \

And then in your code example:

import { library, dom } from '@fortawesome/fontawesome-svg-core';
import {
    faBars,
    faExclamationCircle,
} from '@fortawesome/free-solid-svg-icons';

library.add(
    faBars,
    faExclamationCircle,
);

dom.watch()

[mlwilkerson]

re-joining the convo here, just one simple observation:

Note, if I do what the doc says to

import library.add(fas);

That's a typo in the doc. I'm putting in a fix for that now.

It should just be:

library.add(fas);

[mlwilkerson]

@hal869 As for the replace/remove question, what we intend is that, where you previously had
@fortawesome/fontawesome, instead now use @fortawesome/fontawesome-svg-core.

In your original comment, your yarn add included both of those packages.

[mlwilkerson]

@hal869 Do you have a running example I could look at in the browser? Either on a staging site somewhere, or with codesandbox.io?

[mlwilkerson]

I'd like to see what's contained in the JS bundles the browser is loading for starters. And possibly run it under a debugger.

Or maybe you could reproduce your situation in a little demo GitHub repo that I could clone and investigate?

[jbelien]

Nice, I'll try to upgrade to 5.1.0 ! 👍
It would be also nice to update https://fontawesome.com/how-to-use/use-with-node-js but I guess it's already planned ! 😄

EDIT (1) : I tried the above but it doesn't work, no icon is displayed (I use webpack) ...
EDIT (2) : Well, now I'm confused ... I tried again the same thing and now the icons are displayed ... but I have all the icons in my resulting .js file ...
EDIT (3) : Okay, I understood why it didn't work the first time. I didn't put the dom.watch() because I followed the UPGRADING.md file. I created 2 PR : #13009 #13010.
So it does work but all the icons are in the file generated by webpack instead of only the imported icons and that makes quite a big file.
EDIT (4) : My mistake, to "enable" tree shaking in webpack, the mode: production flag has to be set (see https://webpack.js.org/guides/tree-shaking/#minify-the-output). So everything is good and works ! 🎉

Sorry, for the noise ; I hope it will help others if they have the same issue as I did !

[robmadole]

@jbelien sorry you got busy on this before I could share this link:

https://fontawesome.com/preview/how-to-use/use-with-node-js

We have some pre-release docs up (which I wish I could have gotten to you in time.)

Thanks for the PRs on the UPGRADING.md. Really appreciate you slogging through this, it's super helpful to us.

[robmadole]

@hal869 you were very close: https://codesandbox.io/s/k53zqoqox3

What was missing was the dom.watch().

[jbelien]

@robmadole Not a problem at all ; took me some time but it's always good to debug things to see how it works :)

https://fontawesome.com/preview/how-to-use/use-with-node-js

Watch out, the dom.watch() is missing in the documentation as well !

Thanks for the PRs on the UPGRADING.md. Really appreciate you slogging through this, it's super helpful to us.

You're more than welcome, a pleasure to help !

[robmadole]

@hal869 I have a PR out to improve that documentation in how-to-use/use-with-node-js. Thanks for the pointer there.

Thanks for sharing your bundle above. It's useful to see the file sizes and to see the output from your build but it's really hard for us to debug or help solve the issue unless the problem is reproducible. Anything else is really just a shot in the dark (a guess) as to what the issue is.

There are a lot of factors involved. Errant code, webpack version, webpack build config, transpiler, etc. It's just too difficult to help unless we have a reproducible example.

Perhaps you can put up a GitHub gist that strips down your project and illustrates the problem? I'd be overjoyed to help you solve it from there. But I need to be able to examine the whole forest and not the pinecones that are shaking off the tree (pun totally intended).

[robmadole]

@hal869 not trying to be a pain here (I know you're working hard to try and provide the information that we are asking for) but I need to be able to git clone something, run yarn, and then yarn build (or some command that runs Webpack). There is still just too much missing information here. I need the whole ball of wax that I can run locally.

[jbelien]

I see webpack --env development --progress.

As mentioned in my previous comment, webpack only "enables" tree shaking in production mode (see https://webpack.js.org/guides/tree-shaking/#minify-the-output).

[robmadole]

@hal869 https://gist.github.com/robmadole/93ea58b5aff804cfb61bd6670bf2cc37

Clone that and follow the instructions in the README.md. Tree shaking is working in that very simple example. I'm wondering if your UglifyJSPlugin could be breaking tree shaking for you. Can you confirm that other libraries you are using (non FA) are being tree shaken?

[edmorley]

Does adding --display=verbose to the webpack-cli command when running in production mode shed any insight? For example perhaps the CJS jquery require might be causing the bailout?

For what it's worth @robmadole's example works for me (and TIL it's possible to git clone multi-file gists!).

[edmorley]

Sorry missed that - add stats: "verbose" to your webpack configuration object instead :-)

(See: https://webpack.js.org/configuration/stats/)

Are you simply assuming whatever the defaults of the embedded webpack dev server are?

I don't use the webpack dev server

This might just be a ~typo -- but note that webpack-dev-server doesn't play a role in any of this, since tree shaking is only relevant for production mode, where dev server shouldn't be being used.

[robmadole]

@hal869 I'm not going to spend any more time on trying to reproduce your setup. I have illustrated that tree shaking does work with our library. If you'd like to share what you have I'll be happy to help. Otherwise I've gone as far as I'm willing to go in order to debug this in the dark with you.

[ghost]

Who's leaving whom in the dark is a matter of opinion.

But if you're not interested in selling your product, fine with me. Good luck.

[luchaos]

1. followed step by step https://github.com/FortAwesome/Font-Awesome/issues/12429#issuecomment-386124097

import {dom, library} from '@fortawesome/fontawesome-svg-core';
import {faArrowRight} from "@fortawesome/free-solid-svg-icons";
library.add(faArrowRight);
dom.watch();

1. npm run watch:

/js/icons.js     495 kB       1  [emitted]  [big]  /js/icons

1. npm run production:

/js/icons.js    30.9 kB       1  [emitted]         /js/icons

1. happiness. works like a charm with laravel mix now - thanks!

[michaelmano]

@mlwilkerson mlwilkerson Thanks so much for that, Sorry I did not get back to you sooner, Some reason the issue was muted.

I have tried it out and it works like a dream :3