laravel homestead and npm errors - laravel

Im using laravel homestead 0.5.0, I have a fresh install laravel but whenever i try to do npm install--no-bin-links or npm install on the VM or on Powershell or CMD it always give an error.
Maximum call stack size exceeded. windows max path length i guess? anything I can do to avoid this? heres my package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"gulp": "^3.9.1",
"laravel-elixir": "^5.0.0",
"bootstrap-sass": "^3.3.0"
}
}
im using windows 8.1 and virtual box 5
node version is 5.12.0
npm version is 3.10.5
any help is appreciated thanks
screenshot of the error

Related

Laravel mix compile progress stuck (WSL)

I'm not sure if there is an issue here but it's been bothering me for a while. Whenever I'm using Laravel mix the various progress bars never complete and there are big gaps in the output, everything else appears to function correctly but it's just starting to annoy me a little as I'm wondering if something isn't setup quite right, the progress bars always seem to stall at the same point. I've attached an image from vscode console, is this normal? I've also made a stripped back example to test.
package.json
{
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch"
},
"devDependencies": {
"laravel-mix": "^6.0.43",
"sass": "^1.51.0",
"sass-loader": "^12.6.0"
}
}
webpack.mix.js
const mix = require('laravel-mix');
mix
.setPublicPath('dist')
.js('src/app.js', 'dist')
.sass('src/app.scss', 'dist').options({
processCssUrls: false,
});
Win 10 WSL
Node: 16.15.0
NPM: 8.5.5
Looking over some similar issues, this seems to be caused by symlinks. Does WSL use symlinks for anything?
Thanks!

fsevents not accessible from jest-haste-map

When i deploy my app from github.com to heroku. I get the following message error: fsevents not accessible from jest-haste-map.
Could you help me solve this issue.
This is my package.json
{
"name": "app-clean",
"version": "0.1.0",
"private": true,
"main": "index.js",
"dependencies": {
"#reduxjs/toolkit": "^1.6.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"bootstrap": "^5.0.1",
"bootstrap-icons": "^1.5.0",
"json-server": "^0.16.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "json-server db.json -p 5000 -w -d 0"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Thanks
So it seems that there are some internal dependencies that depend on the fsevents module. The general consensus seems to be to make this dependency optional, which should fix your problem (on Windows at least).
Try:
npm i fsevents#latest -f --save-optional
That fixed the dependency issue for me.
I have the same issue with the GitHub Actions (is being used for style-checking and testing).
The error message appears while executing command npm ci:
fsevents not accessible from jest-haste-map
If I replace the npm ci by npm install, I receive the error about the lockfile version:
This version of npm is compatible with lockfileVersion#1, but package-lock.json was generated for lockfileVersion#2
Therefore, the reason of the issue is upgraded lockfile version to 2.
If you have the same issue, check the npm version (command) and package-lock.json (file). If the "lockfileVersion" is 2, npm must be at least 7.x.
To fix that in GitHub action I added npm-upgrading step. So, my steps looks like:
# ...
steps:
# ...
- name: Upgrade NPM
run: npm install -g npm
- name: Install dependencies
run: npm ci
- name: Build project
run: npm run build
Thus, if you have issue like "it works on my PC, but does not work in CI/CD runner", try to use described solution.
Try:
Deleting package-lock.json and node_modules
Running npm install locally, which should generate a new package-lock.json
Committing and pushing the new package-lock.json
I usually try this whenever I get strange npm errors like this relating to the dependencies.
I had this problem in bitbucket.org pipelines.
We was using Docker image with Node in version 14.17.0 (npm was included in version 6.14.13).
Updating only npm to version 8.1.3 did not help.
But updating Docker image of Node to new LTS version (16.13.0, with npm 8.1.0) fixed this problem and npm ci started working properly.
I saw this error this week. I changed package versions, then the error has gone. Here are my versions that seem related to this error. I'm not sure this is the correct way to fix it.
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^13.1.9"
The same issue happen to me when build the package using ./github/worflows
Run npm ci
npm ERR! fsevents not accessible from jest-haste-map
1 - To resolve, I install in my local:
npm i fsevents#latest -f --save-optional
2 - Push the package.json into github again.
The workflows(view from github repository-> tab Actions) is triggered, the result shows the build is success.

Deploying a Laravel app on CPanel from Github - the right way

I'm new to shared hosting deployment and I need help to deploy an app on a shared hosting server that uses CPanel.
I have deployed thee same app before on a CPanel shared hosting, by zipping my files and uploading them to the subdomain. But as far as I am concerned, that is very wrong since all my development files are exposed to anybody
Second time I tried, I copied the files from the git repo via SSH, and the installing composer, but when I try to install node to use npm and run the command npm install and npm run dev. Surprise! I had errors such as Javascript heap out of memory Zone allocation failed and Aborted.
So I would like to know:
How to install properly node dependencies from a laravel package.json file on CPanel, without breaking down the server or misconfiguring something
Any help would be very appreciated. I there's a way to granmt or reward anyone here, I would like you to show me how.
I have to get this working before next saturday, therefore any help would be very nice.
This is my package.json, just in case you need it:
{
"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": {
"#tailwindcss/custom-forms": "^0.2.1",
"#tailwindcss/forms": "^0.2.1",
"#tailwindcss/typography": "^0.3.0",
"alpinejs": "^2.7.3",
"autoprefixer": "^10.0.2",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"laravel-mix-merge-manifest": "^2.0.0",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"postcss-import": "^12.0.1",
"tailwindcss": "^2.0.1"
},
"dependencies": {
"sweetalert2": "^10.16.0"
}
}
Thanks in advance.
So what happened here, is that I had to delete all node_modules folder. Then, I ran npm update --legacy-peer-deps command in order to have all packages according to the package.json file. After that, I could run
node_modules/.bin/webpack --config=node_modules/laravel-mix/setup/webpack.config.js
without further complications.

Vue DevTools inspection is not available

Im using laravel 5.2
Package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.0.0",
"gulp": "^3.9.1",
"laravel-elixir": "^5.0.0",
"laravel-elixir-webpack": "^1.0.1",
"laravel-elixir-webpack-official": "^1.0.2",
"laravel-mix": "^2.1.14",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3",
"webpack": "^2.7.0"
},
"dependencies": {
"get-ssl-certificate": "^2.1.2",
"laravel-elixir-webpack-official": "^1.0.2",
"vuedraggable": "^2.16.0"
}
}
I tried both firefox and google chrome extension which says its disabled
This is the line that restrict this
devtools: process.env.NODE_ENV !== 'production'
to my two sense this must NOT happen.
Steps I took till now :
1- remove node_models install it again using npm install
2- replacing the vue file with a version provided in Vuejs.org
the icon is there colorful but no Veo devtool, when i use CDN on top of my header instead i get the devtools!
What is causing this conflict! Im confused
thanks for any help
Okay long story short the problem caused because it was not compiling my files and devmode was off in the version it was complied before.
I was trying to use vue on laravel 5.2 , faced many problems so i decided to install
laravel 5.3 by :
composer create-project --prefer-dist laravel/laravel myapp "5.3.0"
after that I executed :
npm install
and it started to install the dependencies and all , when it was done I tested gulp command to see if its a success compile which it was. so I moved package.json package-lock.json and gulpfile.js from my Laravel 5.3 to laravel 5.2 run npm install again and all Done!

VS2015's npm support can't deal with #types?

I just found out that VS2015 has support for npm even in normal ASP.NET 4 projects - that's great.
The first thing I tried after jquery was to get types:
{
"version": "1.0.0",
"name": "aspnet",
"private": true,
"devDependencies": {
"jquery": "3.1.1",
"#types/jquery": "^2.0.34"
}
}
This says
npm ERR! 404 'types/jquery' is not in the npm registry.
I know it is, because executing
npm install
in the directory of the package.json file then installs it correctly.
That's a bug in VS2015's npm support, right? Is there a fix?

Resources