Parcel 2 + Vue 3 - How to set global feature flags ? Vue Devtools disabled

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 is indicated only how to set these flags on webpack, rollup and Vite. Searched the web for configure them in Parcel and found nothing.

Please help, I really need the Vue Devtools to work.

Answer 1

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