[Vuejs]-Runtime Vue error Laravel 8 and Jetstream VUE_PROD_DEVTOOLS not defined

by

2👍

✅

I ran into this same error, and was able to resolve it by ensuring ‘webpack.config.js’ has the following:

const webpack = require('webpack')

module.exports = {
plugins: [
new webpack.DefinePlugin({
__VUE_PROD_DEVTOOLS__: 'false'
})
],
};

This is in addition to whatever else you have in your webpack.config.js file.

Also note that npm run prod may be different than npm run production

I found this solution at https://github.com/visualfanatic/vue-svg-loader/issues/136

👤George Brotherston

1👍

Both George Brotherston and WeAreModus from Laracasts are right, fbloggs.

When using Vue 3.0.0-rc.3 you need to set __VUE_PROD_DEVTOOLS__ explicitly.

This bug fixed in v3.0.7.

See Github issue resolution

See docs

Bundler Build Feature Flags
Starting with 3.0.0-rc.3, esm-bundler builds now exposes global feature flags that can be overwritten at compile time:

VUE_OPTIONS_API (enable/disable Options API support, default: true)

VUE_PROD_DEVTOOLS (enable/disable devtools support in production, default: false)
The build will work without configuring these flags, however it is strongly recommended to properly configure them in order to get proper tree-shaking in the final bundle. To configure these flags:

webpack: use DefinePlugin

Rollup: use @rollup/plugin-replace

Vite: configured by default, but can be overwritten using the define option

Note: the replacement value must be boolean literals and cannot be strings, otherwise the bundler/minifier will not be able to properly evaluate the conditions.

👤Azamat Ali

Leave a comment