Mix DefinePlugin Conflicting values for '__VUE_OPTIONS_API__'

376 Views Asked by At

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.

0

There are 0 best solutions below