How to set global feature flags?

Question

Starting a new project with Vue.js v3 and Parcel.js v2. Everything went fine for setting up and launching a humble Hello World app, except this warning in the browser's console:

Feature flags __VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__ are not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.
For more details, see http://link.vuejs.org/feature-flags.

Also, the Vue Devtools are disabled in the console.

In the link, it is indicated only how to set these flags on Webpack, rollup and Vite.

Answer 1

It looks like these warnings are generated when there are no global variables named __VUE_OPTIONS_API__ and __VUE_PROD_DEVTOOLS__ (see code).

In a webpack setup, you can inject global variables at build time with the Define Plugin. Unfortunately, I'm not aware of any parcel2 plugin (yet) that does this (although it would be pretty simple to write). However, you could just create them yourself by writing this near the beginning of your app's entry .js file:

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

If you wanted there to be different values in development or production, you could take advantage of Parcel's node emulation feature, like this:

if (process.env.NODE_ENV === "development") {
   globalThis.__VUE_OPTIONS_API__ = true
   globalThis.__VUE_PROD_DEVTOOLS__ = true;
} else {
   // different values for production.
   globalThis.__VUE_OPTIONS_API__ = false;
   globalThis.__VUE_PROD_DEVTOOLS__ = false;
}

Answer 2

For everyone which go through it and have issue not for Parcel but Webpack...

You can use the DefinePlugin webpack for define those 2 global value like this :

plugins: [
    new DefinePlugin({
        __VUE_OPTIONS_API__: true,
        __VUE_PROD_DEVTOOLS__: true
    }),
],

or if you use webpack with Webpack Encore symfony, do like this :

.addPlugin(new webpack.DefinePlugin({
    __VUE_OPTIONS_API__: true,
    __VUE_PROD_DEVTOOLS__: true
}))

• need install webpack package separatly for import it into webpack.config.js file and call webpack.DefinePlugin