How to resolve esm-bundler build warning when running vue 3 and laravel 8

When running npm run watch below warning is displayed:

Warning details:

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.

You can add below code in webpack.mix.js to the get rid of this warning

mix.js("resources/js/app.js", "public/js")
     .vue({ version: 3 })
     .webpackConfig((webpack) => {
         return {
             plugins: [
                 new webpack.DefinePlugin({
                     VUE_OPTIONS_API: true,
                     VUE_PROD_DEVTOOLS: false,
                 }),
             ],
         };
     })

Used Define Plugin to set two flags – https://webpack.js.org/plugins/define-plugin/

VUE_OPTIONS_API (enable/disable Options API support, default: true)
VUE_PROD_DEVTOOLS (enable/disable devtools support in production, default: false)

Leave a Comment

Your email address will not be published. Required fields are marked *