Как исправить ошибку [webpack-cli] TypeError: Cannot redefine property?

Question

[Speakermen]

Как только хочу из папки resource скомпилировать (преобразовать) файлы в public/js вылазит вот это постоянно Какими бы способами я не устанавливал статьи которые читал ниже. Остальные прикреплю в комментарии

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');

Comments

[JhaoDa]

Ты хоть немного понимаешь, что делаешь? Зачем тут куски PHP и HTML?

[Speakermen]

Статьи
Laravel 8 Single Page Application (SPA) with Vue JS
Basic Setup Inertia JS with Laravel 8 And Vue 3
Git Upgrade to Mix 6
Setting up Vue in Laravel 8

[JhaoDa]

Использовать env() в любом коде, кроме конфигов — дурной тон.

[Speakermen]

JhaoDa, если честно не очень у меня каша полная. Как я понял пакетный менеджер npm собирает из файла package.json
npm install и потом запускаю "scripts": {
"development": "mix",

npm run development

до этого была команда npm run install & run dev

[Speakermen]

JhaoDa, спасибо вам буду исправлять

[Speakermen]

JhaoDa, эх я криворукий(((

https://laracasts.com/discuss/channels/laravel/lar...

//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.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"
    }
}

D:\install\openserver\domains\apps.local>npm install

added 78 packages, removed 26 packages, changed 1 package, and audited 1331 packages in 11s

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

found 0 vulnerabilities

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

> dev
> npm run development


> development
> mix

9% setup compilation vue-loader-plugin[webpack-cli] TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (D:\install\openserver\domains\apps.local\node_modules\webpack\lib\NormalModule.js:179:10)
    at D:\install\openserver\domains\apps.local\node_modules\vue-loader\dist\pluginWebpack5.js:37:26
    at Hook.eval [as call] (eval at create (D:\install\OpenServer\domains\apps.local\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:206:1)
    at Hook.CALL_DELEGATE [as _call] (D:\install\OpenServer\domains\apps.local\node_modules\tapable\lib\Hook.js:14:14)
    at Compiler.newCompilation (D:\install\OpenServer\domains\apps.local\node_modules\webpack\lib\Compiler.js:993:26)
    at D:\install\OpenServer\domains\apps.local\node_modules\webpack\lib\Compiler.js:1035:29
    at Hook.eval [as callAsync] (eval at create (D:\install\OpenServer\domains\apps.local\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:22:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:\install\OpenServer\domains\apps.local\node_modules\tapable\lib\Hook.js:18:14)
    at Compiler.compile (D:\install\OpenServer\domains\apps.local\node_modules\webpack\lib\Compiler.js:1030:28)
    at D:\install\OpenServer\domains\apps.local\node_modules\webpack\lib\Compiler.js:473:12

[jazzus]

JhaoDa, это не "дурной тон", а после кеширования конфигов env будет возвращать null

[JhaoDa]

jazzus, да ладно?! Вот уж не знал...

[jazzus]

JhaoDa, ну так надо документацию читать)

[JhaoDa]

jazzus, документация для лохов, спроси вон хотя бы автора вопроса — он не лох, поэтому не читает её.

[Speakermen]

JhaoDa, я прочту документацию просто хотел потренироваться в Vue и Laravel вместе теперь можно спокойно изучить доки

Answer 1

[Speakermen]

Надо было так сделать в файле webpack.mix.js вместо

Ошибка Laravel 8 - [webpack-cli] TypeError: аргуме...

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"
    }
}

И получилось

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