18

I am getting this error on my Vue 3 project:

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. See http://link.vuejs.org/feature-flags for more details.

webpack.mix.js

const mix = require ('laravel-mix');
const path = require ('path');

mix.webpackConfig ({
    output: {
        chunkFilename: 'js/chunks/[name].[chunkhash].js'
    },
    module: {
        rules: [
            {
                test: /node_modules(?:\/|\\).+\.js$/,
                loader: 'babel-loader',
                options: {
                    presets: [['@babel/preset-env', {targets: 'last 2 versions, ie >= 10'}]],
                    plugins: ['@babel/plugin-transform-destructuring', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-transform-template-literals'],
                    babelrc: false
                }
            },
            {
                enforce: 'pre',
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
      alias: {
        vue: "vue/dist/vue.esm-bundler.js"
      },
    },
    optimization: {
        providedExports: false,
        sideEffects: false,
        usedExports: false
    }
});

mix.js ("resources/js/entry-point.js", "public/js").vue({})
.postCss ("resources/css/app.css", "public/css", [
    require ("tailwindcss"),
]);

mix.extract (['vue']);

if (mix.inProduction ()) {
    mix
    .version ();
}

In this case, it does not matter whether I set mix.webpackConfig or not.

This is package.json:

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.5",
    "autoprefixer": "^10.2.4",
    "axios": "^0.21",
    "cross-env": "^5.1",
    "css-loader": "^5.0.2",
    "eslint-plugin-vue": "^7.5.0",
    "file-loader": "^6.2.0",
    "laravel-mix": "^6.0.6",
    "mini-css-extract-plugin": "^1.3.6",
    "postcss": "^8.2.6",
    "resolve-url-loader": "^3.1.2",
    "tailwindcss": "^2.0.3",
    "url-loader": "^4.0.0",
    "vue-loader": "^16.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.19.0",
    "eslint-config-google": "^0.14.0",
    "eslint-loader": "^4.0.2"
  },
  "dependencies": {
    "vue": "^3.0.5",
    "vue-router": "4.0.3"
  }
}

I read the provided link, but I did not see a way to solve this issue.

4 Answers 4

26

The linked docs specify two configurable flags:

  • __VUE_OPTIONS_API__ (enable/disable Options API support, default: true)
  • __VUE_PROD_DEVTOOLS__ (enable/disable devtools support in production, default: false)

For Webpack, use the DefinePlugin to set these flags:

const webpack = require('webpack')

mix.webpackConfig ({
  plugins: [
    new webpack.DefinePlugin({
      __VUE_OPTIONS_API__: false,
      __VUE_PROD_DEVTOOLS__: false,
    }),
  ],
})
0
6

webpack.config.js

const Webpack = require('webpack');

module.exports = (env, options) => {
    return {
        ...,
        module : {
            ...,
        },
        plugins : [
            ...,
            new Webpack.DefinePlugin({ __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: true }), // to remove warn in browser console: runtime-core.esm-bundler.js:3607 Feature flags __VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__ are not explicitly defined...
            ...,
        ],
        ...,
    };
};

Or alternative is to add 2 lines into app entry file:

globalThis.__VUE_OPTIONS_API__ = true;
globalThis.__VUE_PROD_DEVTOOLS__ = false;
1

For laravel-mix use

mix.webpackConfig(webpack => {
    return {
        plugins: [
            new webpack.DefinePlugin({
                __VUE_OPTIONS_API__: false,
                __VUE_PROD_DEVTOOLS__: false,
            }),
        ],
    }
})
0

For Laravel 8 add .vue().

https://laravel.com/docs/8.x/mix#vue

Mix will automatically install the Babel plugins necessary for Vue single-file component compilation support when using the vue method. No further configuration is required

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    .vue();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.