When running npm run development and npm run production I get this output. I am using Node version 17.1 and NPM version 8.1.4.
WARNING in DefinePlugin Conflicting values for 'VUE_OPTIONS_API'
My webpack.mix.js file:
const mix = require('laravel-mix');
require('laravel-mix-bundle-analyzer');
require('laravel-mix-eslint')
mix.js('resources/js/app.js', 'public/js')
.vue({ version: 3 })
.webpackConfig((webpack) => {
return {
output: { publicPath: '/', },
plugins: [
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: JSON.stringify(false)
}),
],
};
})
if (!mix.inProduction()) {
mix.eslint({
fix: false,
extensions: ['js', 'vue']
}).sourceMaps().bundleAnalyzer({ analyzerMode: 'static' });
}
My packages.json:
{
"name": "myapp",
"private": true,
"version": "1.0.0",
"description": "## Getting started",
"main": ".eslintrc.js",
"scripts": {
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"production": "mix --production",
"lint": "eslint 'resources/js/**/*.{js,vue}'",
"lint:fix": "eslint 'resources/js/**/*.{js,vue}' --fix"
},
"dependencies": {
"@vue/compiler-sfc": "^3.2.6",
"vue": "^3.2.6",
"vue-loader": "^16.5.0",
"vue-router": "^4.0.11",
"vuex": "^4.0.2"
},
"devDependencies": {
"@vue/devtools": "^5.3.4",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^7.17.0",
"eslint-webpack-plugin": "^3.0.1",
"laravel-mix": "^6.0.29",
"laravel-mix-bundle-analyzer": "^1.0.5",
"laravel-mix-eslint": "^0.2.0"
}
}
This thread mentions that I need to specify the mode/environment but with Laravel Mix that default env is development.