Laravel Tailwind authentication scaffolding issue - laravel

So I am currently playing around with Laravel and Tailwind. I have created a project and working through some initial views. The next to do was to add auth scaffolding to the project.
I tried Googling around, found https://aregsar.com/blog/2020/create-laravel-project-with-tailwind-ui-and-auth/. I also checked a couple of other results which had the same pointers.
So when I run composer require laravel-frontend-presets/tailwindcss --dev, no problems. Next up I run the following.
php artisan ui tailwindcss --auth
Tailwind CSS scaffolding installed successfully.
Tailwind CSS auth scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
No issues...however, when I try and run npm install, I get the following...
npm install && npm run dev
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency
tree npm ERR! npm ERR! While resolving: undefined#undefined npm ERR!
Found: tailwindcss#2.2.7 npm ERR! node_modules/tailwindcss npm ERR!
dev tailwindcss#"^2.2.6" from the root project npm ERR! npm ERR! Could
not resolve dependency: npm ERR! peer tailwindcss#"^1.3.3" from
#tailwindcss/ui#0.3.1 npm ERR! node_modules/#tailwindcss/ui npm ERR!
dev #tailwindcss/ui#"^0.3" from the root project npm ERR! npm ERR! Fix
the upstream dependency conflict, or retry npm ERR! this command with
--force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See
/home/tam/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in: npm ERR!
/home/xxx/.npm/_logs/2021-07-26T19_33_44_249Z-debug.log
Stuck here. It's a pity as I prefer Tailwind to Bootstrap.

#tailwindcss/ui is no longer needed. Uninstall the #tailwindcss/ui package.
npm uninstall #tailwindcss/ui
Install latest dependencies for Laravel Mix, Autoprefixer, and PostCSS.
npm install -D laravel-mix#latest postcss#latest
autoprefixer#latest tailwindcss#latest
Finally, make sure the line...
require('#tailwindcss/ui'),
Is removed from your tailwind.config.js file.
Continue on with your compilation.
npm install && npm run dev

Related

why instaling type-graphql, #apollo/server and graphql together showing dependency error

I have been trying to install typegraphql with apollo/server in typescript node template but it showing dependency error, I don't know why all new version is not compatible with each other.
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: server#1.0.0
npm ERR! Found: graphql#16.6.0
npm ERR! node_modules/graphql
npm ERR! graphql#"*" from the root project
npm ERR! peer graphql#"^16.6.0" from #apollo/server#4.3.0
npm ERR! node_modules/#apollo/server
npm ERR! #apollo/server#"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! type-graphql#"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: graphql#15.8.0
npm ERR! node_modules/graphql
npm ERR! peer graphql#"^15.3.0" from type-graphql#1.1.1
npm ERR! node_modules/type-graphql
npm ERR! type-graphql#"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
$ npm i #apollo/server express graphql reflect-metadata type-graphql
should forcing it works or will it lead to data-leaks and all?
Thanks in advance for replying
The most recent version of type-graphql only works with graphql version ^15.5.0. Almost all newer versions of #apollo/server and graphql-related libraries, on the other hand, only support graphql version >= 16.
Fortunately, a newer version of type-graphql (version 2.0.0), which is still in beta, is available under the next tag version in npm.
To install it, first uninstall type-graphql and then reinstall it specifying the next tag:
npm uninstall type-graphql
npm install type-graphql#next
PS: If you want to look at a working example project, check out this.

Laravel 9 Install vue router for vue 2.6.12

I try installing vue router with run command "npm install vue-router" but then showing error like this:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined#undefined
npm ERR! Found: vue#2.6.14
npm ERR! dev vue#"^2.6.12" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue#"^3.2.0" from vue-router#4.0.14
npm ERR! node_modules/vue-router
npm ERR! vue-router#"*" from the root project
npm ERR!
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\ACER\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ACER\AppData\Local\npm-cache_logs\2022-03-20T12_19_15_072Z-debug-0.log
please help
I solved it by installing vue-router#3.
npm install vue-router#3 --save
You can just try this.
Because your vue is not the latest version, it gives this error.
Use previous versions of vue-router.
To access old versions of vue-router, use the versions tab
Example : npm i vue-router#3.5.3

Laravel8 npm run dev outputs: ERESOLVE unable to resolve dependency tree

Goal
Avoid error message.
I have been getting the following error message when I run the command npm run dev:
npm notice
npm notice New major version of npm available! 7.6.1 -> 8.1.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.1.4
npm notice Run npm install -g npm#8.1.4 to update!
npm notice
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: acorn#7.4.1
npm ERR! node_modules/acorn
npm ERR! acorn#"^7.0.0" from acorn-node#1.8.2
npm ERR! node_modules/acorn-node
npm ERR! acorn-node#"^1.6.1" from detective#5.2.0
npm ERR! node_modules/detective
npm ERR! detective#"^5.2.0" from tailwindcss#2.2.19
npm ERR! node_modules/tailwindcss
npm ERR! dev tailwindcss#"^2.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional acorn#"^8.5.0" from terser#5.10.0
npm ERR! node_modules/terser
npm ERR! terser#"^5.9.0" from laravel-mix#6.0.39
npm ERR! node_modules/laravel-mix
npm ERR! dev laravel-mix#"^6.0.6" from the root project
npm ERR! terser#"^5.7.2" from terser-webpack-plugin#5.2.5
npm ERR! node_modules/terser-webpack-plugin
npm ERR! terser-webpack-plugin#"^5.2.4" from laravel-mix#6.0.39
npm ERR! node_modules/laravel-mix
npm ERR! dev laravel-mix#"^6.0.6" from the root project
npm ERR! 1 more (webpack)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/ml/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/ml/.npm/_logs/2021-12-02T07_41_55_149Z-debug.log
Quick Solution:
I can avoid the problem / error message with the following command:
npm install --legacy-peer-deps.
Output:
npm WARN deprecated querystring#0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated uuid#3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
added 807 packages, and audited 808 packages in 12s
84 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Question
What do I have to do to run npm install again without getting the error message?
I have the same issue too. I have fixed it using this line
npm i acorn --dev
then run again
npm install && install run dev
npm install npm#latest -g
then
npm install webpack-dev-server --save-dev
working for me
If you are using Laravel Homestead Package for any Vagrant Environment, then don't run the command inside the Vagrant Project Directory.
Go outside to the local directory of the project and run these commands.
image of commands inside vagrant
You should run these here::
image of commands outside vagrant

Errors on "npm run dev" (after Laravel clean install)

I'm very excited to learn Laravel and create a webapp based on a bootstrap template I bought (OneUI). I successfully installed Laravel (the /public route returns the default view to my browser correctly). Now i'm following the install guide of the template, and i'm experiencing problems with npm commands that return errors that I can't understand (I'm not familiar with npm).
I'd really appreciate if somebody could help me to find what's wrong so I could finally using Laravel with the Templates.
As requested in the OneUI documentation, i copy the public & resources folders, the routes/web.php file, and the webpack.mix.js file. Then, i install the npm dependencies running the following command :
npm i browser-sync browser-sync-webpack-plugin sass sass-loader bootstrap#^4.5.3 jquery#^3.5.1 jquery-scroll-lock#^3.1.3 jquery.appear#^1.0.1 js-cookie#^2.2.1 popper.js#^1.16.1 simplebar#^5.3.0 -D
This seems to run OK with a few warnings about some deprecated packages.
Then i run :
npm run dev
I get this return :
> # dev /volume1/web/dev/myproject
> npm run development
> # development /volume1/web/dev/myproject
> mix
events.js:287
throw er; // Unhandled 'error' event
^
Error: spawn npx ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
at onErrorNT (internal/child_process.js:469:16)
at processTicksAndRejections (internal/process/task_queues.js:84:21)
Emitted 'error' event on ChildProcess instance at:
at Process.ChildProcess._handle.onexit (internal/child_process.js:273:12)
at onErrorNT (internal/child_process.js:469:16)
at processTicksAndRejections (internal/process/task_queues.js:84:21) {
errno: 'ENOENT',
code: 'ENOENT',
syscall: 'spawn npx',
path: 'npx',
spawnargs: [
'webpack',
'--progress',
'--config=node_modules/laravel-mix/setup/webpack.config.js'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # development: `mix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /var/services/homes/admin/.npm/_logs/2021-01-25T22_32_54_150Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /var/services/homes/admin/.npm/_logs/2021-01-25T22_32_54_340Z-debug.log
This is on Linux, directly on my Synology (I don't use anything like a VM/Docker).
To install Laravel, I simply did this :
Installed php7.4 + libraries
Installed composer
Went into my web folder and entered the command : composer create-project laravel/laravel myproject
Added write access to my http user on the storage folder
I tryied this already without success :
As advised on other websites:
rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear --force
npm install
npm run dev
I tryied to do a npm install and npm run dev on a clean Laravel Install (before the install of all the packages required by the OneUI templates) to try to see if it's related to the OneUI files or the npm dependencies I installed. I have the same errors. So I understand it's not related to the OneUI install, but an issue with npm / my Laravel files (?).
In advance, thanks a lot for your help !

Mac npm erroring with ENOENT

I'm a recent convert to Mac from Windows, and currently just trying to get my tools setup.
I first installed node using homebrew, which was giving me errors (same as what I still have). I later removed node using homebrew and installed using the pkg from the node website.
I can access node in the command line and npm. The problem is when I try to install modules on the project locally I get something like:
npm install grunt-contrib
Error extracting archive { [Error: ENOENT, open '/Users/davidmckeown/dev/adt-com/node_modules/grunt-contrib/node_modules/grunt-contrib-qunit/node_modules/grunt-lib-phantomjs/node_modules/phantomjs/tmp/phantomjs-1.7.0-macosx.zip']
errno: 34,
code: 'ENOENT',
path: '/Users/davidmckeown/dev/adt-com/node_modules/grunt-contrib/node_modules/grunt-contrib-qunit/node_modules/grunt-lib-phantomjs/node_modules/phantomjs/tmp/phantomjs-1.7.0-macosx.zip' }
Another message just above that contains:
npm ERR! phantomjs#0.2.6 install: `node install.js`
npm ERR! `sh "-c" "node install.js"` failed with 8
npm ERR!
npm ERR! Failed at the phantomjs#0.2.6 install script.
npm ERR! This is most likely a problem with the phantomjs package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node install.js
npm ERR! You can get their info via:
npm ERR! npm owner ls phantomjs
npm ERR! There is likely additional logging output above.
npm ERR! System Darwin 12.2.1
npm ERR! command "node" "/usr/local/bin/npm" "install" "grunt-contrib"
npm ERR! cwd /Users/davidmckeown/dev/adt-com
npm ERR! node -v v0.10.0
npm ERR! npm -v 1.2.14
npm ERR! code ELIFECYCLE
Any help figuring out what is causing problems here would be fantastic. This happens with other modules too, from what I can tell.
npm cache clean
or if installed under su
sudo npm cache clean
There was an issue 5 months ago with grunt qunit package - https://github.com/gruntjs/grunt-lib-phantomjs/issues/5.
Try to install this specific package:
sudo npm install grunt-contrib-qunit
The package that you installed is a bundle of many packages. The qunit package version was not updated explicitly to the latest version in this bundle, that's why clearing the npm cache might solve this issue.

Resources