How to fix [webpack-cli] TypeError: Cannot redefine property?

Question

npm

As soon as I want to compile (convert) files into public / js from the resource folder, this constantly pops up No matter how I install the articles that I read below. I 'll attach the rest in the comments

Laravel Mix - Vue 3
How to setup Vue 3 with Laravel 8 ?
REPOSITORY boussadjra

npm run production

> production
> mix --production

[webpack-cli] TypeError: Cannot redefine property: tap
    at Function.defineProperty (<anonymous>)
    at Object.<anonymous> (D:\install\openserver\domains\apps.local\node_modules\laravel-mix\src\helpers.js:21:8)
    at Module._compile (D:\install\OpenServer\domains\apps.local\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (D:\install\OpenServer\domains\apps.local\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (D:\install\openserver\domains\apps.local\node_modules\laravel-mix\src\bootstrap.js:1:63)
    at Module._compile (D:\install\OpenServer\domains\apps.local\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)

{
    "private": true,
    "scripts": {
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "production": "mix --production"
    },
    "devDependencies": {
        "@vue/compiler-sfc": "^3.0.7",
        "axios": "^0.21",
        "bootstrap": "^4.6.0",
        "cross-env": "^7.0.3",
        "jquery": "^3.6.0",
        "laravel-mix": "^6.0.0-beta.17",
        "lodash": "^4.17.21",
        "popper.js": "^1.16.1",
        "postcss": "^8.2.8",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.8",
        "sass-loader": "^10.1.1",
        "vue": "^3.0.7",
        "vue-loader": "^16.1.2"
    }
}

window._ = require('lodash');

 try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}
 window.axios = require('axios');

 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

//require('./bootstrap');
import { createApp } from 'vue';
import App from './components/App.vue';
createApp(App).mount("#app");

const mix = require('laravel-mix');

 mix.js('resources/js/app.js', 'public/js').vue();
 mix.sass('resources/sass/app.scss', 'public/css');

Answer 1

Should have done this in the webpack.mix.js file instead
of Laravel 8 error - [webpack-cli] TypeError: argument...

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css');

//mix.js('resources/js/app.js', 'public/js').vue();
//mix.sass('resources/sass/app.scss', 'public/css');

{
    "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.7",
        "axios": "^0.21",
        "bootstrap": "^4.6.0",
        "jquery": "^3.6.0",
        "laravel-mix": "^6.0.12",
        "lodash": "^4.17.21",
        "popper.js": "^1.16.1",
        "postcss": "^8.2.8",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.8",
        "sass-loader": "^10.1.1",
        "vue": "^3.0.7",
        "vue-loader": "^16.1.0"
    }
}

And it turned out

npm install && npm run dev

D:\install\openserver\domains\apps.local>npm install && npm run dev

up to date, audited 1331 packages in 4s

98 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> dev
> npm run development


> development
> mix

99% done plugins BuildOutputPlugin



   Laravel Mix v6.0.13


✔ Compiled Successfully in 9383ms
┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬─────────┐
│                                                                                                                                                                                    File │ Size    │
├─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼─────────┤
│                                                                                                                                                                              /js/app.js │ 429 KiB │
│                                                                                                                                                                             css/app.css │ 1 bytes │
└─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴─────────┘

√ Mix
  Compiled successfully in 9.67s

webpack compiled successfully