TypeError: Cannot redefine property: tap - laravel

i'm receiving this error whenever i try to run npm run dev
[webpack-cli] TypeError: Cannot redefine property: tap
at Function.defineProperty (<anonymous>)
at Object.<anonymous> (C:\xampp\htdocs\Themes\Storefront\node_modules\laravel-mix\src\helpers.js:21:8)
at Module._compile (C:\xampp\htdocs\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (C:\xampp\htdocs\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Object.<anonymous> (C:\xampp\htdocs\Themes\Storefront\node_modules\laravel-mix\src\index.js:3:1)
at Module._compile (C:\xampp\htdocs\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
my package.json file
"scripts": {
"rtlcss": "rtlcss",
"postinstall": "lerna bootstrap",
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"cross-env": "^6.0.2",
"eslint": "^4.9.0",
"eslint-config-spatie": "^2.0.3",
"eslint-plugin-import": "^2.7.0",
"glob": "^7.1.2",
"laravel-mix": "^6.0.13",
"laravel-mix-merge-manifest": "^0.1.2",
"lerna": "^4.0.0",
"postcss": "8.1",
"rtlcss": "^2.4.0",
"sass": "^1.25.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11",
"webpack-dev-server": "^3.11.2",
"webpack-shell-plugin": "^0.5.0"
},
"dependencies": {
"schema-utils": "^3.0.0",
"webpack": "^5.24.2",
"webpack-cli": "^4.5.0"
}
a suggested solution on Laravel-mix github is to change versions but that didn't solve it for me. any reason for that error?

Related

webpack-cli: TypeError: Cannot redefine property: tap

i'm receiving this error whenever i try to run npm run dev
npm run development
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
> development
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js
[webpack-cli] TypeError: Cannot redefine property: tap
at Function.defineProperty (<anonymous>)
at Object.<anonymous> (C:\Users\dell\Downloads\fay\Modules\Votes\node_modules\laravel-mix\src\helpers.js:21:8)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (C:\Users\dell\Downloads\fay\Modules\Votes\node_modules\laravel-mix\src\index.js:16:1)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
My package.json
"scripts": {
"rtlcss": "rtlcss",
"postinstall": "lerna bootstrap",
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#babel/preset-env": "^7.16.4",
"cross-env": "^6.0.3",
"eslint": "^4.9.0",
"eslint-config-spatie": "^2.0.3",
"eslint-plugin-import": "^2.7.0",
"glob": "^7.1.2",
"laravel-mix": "^6.0.39",
"laravel-mix-merge-manifest": "^0.1.2",
"lerna": "^2.9.0",
"rtlcss": "^2.4.0",
"sass": "^1.25.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11",
"webpack-shell-plugin": "^0.5.0"
},
"dependencies": {
"webpack": "^5.74.0",
"yarn": "^1.22.19"
}
}
a suggested solution on Laravel-mix github is to change versions but that didn't solve it for me. any reason for that error?
i also delete node_module and package_lock.json and again run
npm install
but it still same

webpack.js is not found in laravel vue app?

i am using vue in laravel and trying run npm run dev but it is giving me this error
code: 'MODULE_NOT_FOUND',
requireStack: [
'G:\\laravel-vuetify-spa-starter\\node_modules\\webpack-cli\\bin\\utils\\convert-argv.js',
'G:\\laravel-vuetify-spa-starter\\node_modules\\webpack-cli\\bin\\cli.js',
'G:\\laravel-vuetify-spa-starter\\node_modules\\webpack\\bin\\webpack.js'
]
npm ERR! # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpa
ck.config.js`
Package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#babel/core": "^7.11.1",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/preset-env": "^7.11.0",
"#babel/preset-react": "^7.0.0",
"and": "0.0.3",
"babel-cli": "^6.26.0",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"eslint": "^5.9.0",
"install": "^0.12.2",
"jest": "^23.6.0",
"npm": "^6.4.1",
"sass": "^1.26.10",
"sass-loader": "^7.3.1",
"vue": "^2.6.11",
"vue-router": "^3.4.3",
"vue-template-compiler": "^2.6.11",
"vuetify": "^2.3.9",
"vuetify-loader": "^1.4.3",
"vuetify-toast-snackbar": "^0.6.1",
"vuex": "^3.5.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"cross-env": "^7.0.2",
"css-loader": "^1.0.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"resolve-url-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"webpack-dev-server": "^3.1.10"
}
}
How i can solve this issue ?
The development script in your package.json is attempting to load the webpack config from laravel-mix and you don't have it installed
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules
--config=node_modules/laravel-mix/setup/webpack.config.js",
Just install laravel-mix or create your own webpack config
npm i laravel-mix
And make sure that you have webpack.mix.js on the root directory if you decide to use the mix wrapper
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');

Issue with babel dynamic imports and laravel-mix

when running npm run watch I get the following warning which makes compilation fail.
WARNING in ./resources/js/app.js 19:9-58
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
# multi ./resources/js/app.js ./resources/sass/app.scss /js/app[0]
This is my package.json file:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"babel-eslint": "^8.2.6",
"babel-plugin-dynamic-import-webpack": "^1.1.0",
"babel-preset-env": "^1.7.0",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"laravel-mix": "^4.0.14",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.17.2",
"sass-loader": "^7.1.0"
},
"dependencies": {
"vue": "^2.6.7",
"vue-template-compiler": "^2.6.7",
"axios": "^0.18",
"jquery": "^3.2",
"lodash": "^4.17.4",
"tomtom-sdk": "^1.0.0",
"vue-moment": "^4.0.0",
"vue-parallaxy": "^1.1.1",
"vue2-datepicker": "^2.6.4",
"vue2-editor": "^2.6.6",
"vuex": "^3.1.0",
"vuex-persistedstate": "^2.5.4"
}
}
My .babelrc file which is currently inside my .vscode folder, dunno if that's the best place...
{
"plugins": ["#babel/plugin-syntax-dynamic-import"]
}
OF COURSE if I remove System.import for import I get the following error:
https://i.imgur.com/UEhxaOh.png
which doesn't makes much sense to me since I have already added the plugins section to my babelrc file...
You're not attach your webpack.mix.js config. But I think your problem will solve with the link below.
Laravel-mix Webpack Public Path

Force usage of webpack-dev-server 2.9.4 instead 2.7.0

Some packages of laravel 5 such Spoon can with a package.json and when run yarn get error
yarn install v1.3.2
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.7.0.tgz: Request failed \"404 Not Found\"".
info If you think this is a bug, please open a bug report with the information provided in "/Users/abkrim/Sites/spoon/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
I see a regresion of version 2.7.0 of webpack-dev-server. Only possible use 2.7.1 or up.
I read my package.json
{
"private": true,
"scripts": {
"css-lint": "stylelint \"resources/assets/css/**/*.css\" --fix",
"js-lint": "eslint resources/assets/js --ext .js,.vue --fix && exit 0",
"dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"dependencies": {
"axios": "^0.16.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.6.0",
"eslint": "^4.3.0",
"eslint-config-spatie": "^2.0.1",
"jest": "^20.0.4",
"laravel-mix": "^1.4",
"lodash": "^4.17.4",
"postcss-cli": "^4.1.0",
"postcss-cssnext": "^3.0.2",
"postcss-easy-import": "^2.1.0",
"stylelint": "^8.0.0",
"stylelint-config-standard": "^17.0.0",
"vue": "^2.4.0"
},
"devDependencies": {
"cross-env": "^5.1.1",
"webpack-dev-server": "^2.9.4"
}
}
Any way for solution this headache?
Try this command ?
yarn add -D webpack-dev-server#2.9.4

Laravel: unable to find font dependencies

I have a fresh installation of Laravel, and I can't get npm run dev to successfully run:
These dependencies were not found:
bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot
in
./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2
in
./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff
in
./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf
in
./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.svg
in
./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
Browsing the Internet for answers, I found issue #289 on Github but the fix proposed doesn't work:
Last line of _variables.scss:
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
App.scss:
// Fonts
#import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Variables
#import "variables";
// Bootstrap
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
#import "_app";
My package.json:
{
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.15.3",
"babel-core": "^6.23.1",
"babel-loader": "^6.4.0",
"babel-preset-env": "^1.2.1",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"css-loader": "^0.27.1",
"jquery": "^3.1.1",
"laravel-mix": "^0.8.8",
"lodash": "^4.17.4",
"md5": "^2.2.1",
"node-sass": "^4.5.0",
"postcss-loader": "^1.3.3",
"resolve-url-loader": "^2.0.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.13.2",
"vue": "^2.1.10",
"webpack": "^2.2.1"
}
}
Any ideas? Thank you in advance!
I managed to get it to work by reverting to the previous version of package.json. You can find it here: https://github.com/laravel/laravel/blob/c1643bf0c59b6864fc55e09cce3bfafc67d29e2a/package.json

Resources