Frontend Development

How to remove warning in vue to configure feature flags to esm module bundling: Laravel Mix

In Laravel, when using Laravel mix to bundle assets and utilizing Vue 3 for your frontend, you may run into a warning in your console that can be confusing:

app.js:31032 You are running the esm-bundler build of Vue. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.

Obviously, you want proper tree shaking to take place, so how do you do that with Laravel mix?

You need to update your webpack configuration in your projects webpack.mix.js file using the DefinePlugin.
After mix is declared, add the following:

mix.webpackConfig(webpack => {
    return {
        plugins: [
            new webpack.DefinePlugin({
                __VUE_OPTIONS_API__: true, // If you are using the options api.
                __VUE_PROD_DEVTOOLS__: false, // If you don't want people sneaking around your components in production.

As you see, it is pretty simple, and ensures you will get proper tree shaking in the final bundle as well as get rid of that annoying console warning.

Chris Wray website logo

Trying to do my part in making the world a better place.

This site is hosted for free, so I am thanking the services I am using by adding a link to their websites here in the footer.

© 2020 Chris Wray. All rights reserved.