Recibo este error en mi proyecto Vue 3:
Está ejecutando la compilación esm-bundler de Vue. Se recomienda configurar su paquete para reemplazar explícitamente los indicadores globales de características con literales booleanos para obtener una sacudida de árbol adecuada en el paquete final. Consulte http://link.vuejs.org/feature-flags para obtener más detalles.
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 (); } En este caso, no importa si configuro mix.webpackConfig o no.
Este es 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" } }Leí el enlace provisto, pero no vi una manera de resolver este problema.
Para uso de laravel-mix
mix.webpackConfig(webpack => { return { plugins: [ new webpack.DefinePlugin({ __VUE_OPTIONS_API__: false, __VUE_PROD_DEVTOOLS__: false, }), ], } })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... ..., ], ..., }; };O la alternativa es agregar 2 líneas en el archivo de entrada de la aplicación:
globalThis.__VUE_OPTIONS_API__ = true; globalThis.__VUE_PROD_DEVTOOLS__ = false;Para Laravel 8 agregue .vue() .
https://laravel.com/docs/8.x/mix#vue
Mix instalará automáticamente los complementos de Babel necesarios para la compatibilidad con la compilación de componentes de un solo archivo de Vue cuando se utiliza el método vue. No se requiere configuración adicional
mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ // ]) .vue();Los documentos vinculados especifican dos banderas configurables:
__VUE_OPTIONS_API__(habilitar/deshabilitar la compatibilidad con la API de opciones, predeterminado: verdadero)__VUE_PROD_DEVTOOLS__(habilitar/deshabilitar el soporte de devtools en producción, predeterminado: falso)
Para Webpack, use DefinePlugin para configurar estos indicadores:
const webpack = require('webpack') mix.webpackConfig ({ plugins: [ new webpack.DefinePlugin({ __VUE_OPTIONS_API__: false, __VUE_PROD_DEVTOOLS__: false, }), ], })