The Vite doesn't work
Os:CentOs7
Laravel: 9.26.1
node: v16.17.0
npm: 8.15.0
I would like use new Laravel Project with React.js.
And try the plug-in Breeze for Authentication
I use the command
composer create-project laravel/laravel new-project
php artisan breeze:install
php artisan breeze:install react
npm install
npm run dev
At first all command successful complete , but when i use
npm run dev
the server told me
/tmp/dev-xxxxxx.sh: line 1: vite: command not found
and i try the solution
https://github.com/vitejs/vite/discussions/5432
and
https://github.com/vitejs/vite/issues/1215
that's all not work for me
this is package.json
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"#headlessui/react": "^1.4.2",
"#inertiajs/inertia": "^0.11.0",
"#inertiajs/inertia-react": "^0.8.0",
"#inertiajs/progress": "^0.2.6",
"#tailwindcss/forms": "^0.5.2",
"#vitejs/plugin-react": "^2.0.0",
"alpinejs": "^3.4.2",
"autoprefixer": "^10.4.2",
"axios": "^0.27",
"laravel-vite-plugin": "^0.5.0",
"lodash": "^4.17.19",
"postcss": "^8.4.6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"tailwindcss": "^3.1.0"
},
"dependencies": {
"vite": "^3.0.9"
}
}
How should I do to resolve this question？
I find the question
i type before npm install
npm config set bin-links false
because CentOs7 have sym link error(bin-link to my laptop)
that can not install complete
so i should set bin-links to true
and
npm install vite
it's would solve the problem
Related
After installing laravel mix via terminal and running the command cp node_modules/laravel-mix/setup/webpack.mix.js ./ I'm getting this error.
cp : Cannot find path 'C:\Users\COBNETCKNN\Local Sites\portofolio\app\p
ublic\wp-content\themes\wp-portofolio\node_modules\laravel-mix\setup\we
At line:1 char:1
+ cp node_modules/laravel-mix/setup/webpack.mix.js ./
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : ObjectNotFound: (C:\Users\COBNET...\webp
ack.mix.js:String) [Copy-Item], ItemNotFoundException
+ FullyQualifiedErrorId : PathNotFound,Microsoft.PowerShell.Comman
ds.CopyItemCommand
I also looked inside node_modules/laravel-mix/setup/ and there was no webpack.mix.js so I couldn't pull it from there, did the directory changed or what happened? Can I copy webpack.mix.js from my previous projects and modify it for my needs?
For non-Laravel standalone projects, you should do the following.
mkdir my-app && cd my-app
npm init -y
npm install laravel-mix --save-dev
Create a Mix config file within the root of your project.
touch webpack.mix.js
Open webpack.mix.js and add the following code:
// webpack.mix.js
let mix = require('laravel-mix');
mix.js('src/app.js', 'dist').setPublicPath('dist');
Compile with npx mix or npm run dev.
Your webpack.mix.js should not be in /node-modules, it needs to be in the root of your project instance.
Your package.json should look more like the following with the latest version of Laravel Mix.
{
"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": {
"#fortawesome/fontawesome-free": "^5.15.2",
"autoprefixer": "^10.2.4",
"browser-sync": "^2.26.14",
"browser-sync-webpack-plugin": "^2.3.0",
"cross-env": "^7.0.3",
"laravel-mix": "^6.0.11",
"postcss": "^8.2.4",
"sass": "^1.32.6",
"sass-loader": "^10.1.1",
"tailwindcss": "^2.0.2",
"vue-template-compiler": "^2.6.12"
}
}
Managed to solve it by lowering version of the Laravel Mix, it looks like in latest version you just don't get webpack.mix.js in your node_modules after installing laravel mix, something that should be tackled by the team... So solution for this is that inside your package.json file copy these dependencies below
"devDependencies": {
"autoprefixer": "^9.8.6",
"browser-sync": "^2.26.13",
"browser-sync-webpack-plugin": "^2.0.1",
"cross-env": "^7.0.3",
"laravel-mix": "^5.0.9",
"postcss": "^7.0.35",
"sass": "^1.30.0",
"sass-loader": "^8.0.2",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.1",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.1"
}
This is from my old project package.json file, after setting this up you just install laravel mix again via npm install laravel-mix --save-dev and then run cp node_modules/laravel-mix/setup/webpack.mix.js ./ which will pull webpack.mix.js from your node_modules
I'm realtively new to react-native. All my projects were running fine in the morning, but somehow they stopped working. When I run react-native start and the react-native run-android, the app gets installed on the device but then this error props up which was not happening before.
Loading dependency graph, done.
DELTA [android, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1)/home/yehyaumar/Documents/dumm/busybee/node_modules/graceful-fs/polyfills.js:285
if (cb) cb.apply(this, arguments)
^
TypeError: cb.apply is not a function
at /home/yehyaumar/Documents/dumm/busybee/node_modules/graceful-fs/polyfills.js:285:20
at FSReqCallback.oncomplete (fs.js:169:5)
I even cloned the repo from from scratch, but still the error persists. Please help out.
RN version: 0.59.2
My package.json file for one project,
{
"name": "projectalpha",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/async-storage": "^1.11.0",
"axios": "^0.18.0",
"react": "16.8.3",
"react-native": "0.59.2",
"react-native-awesome-alerts": "^1.2.0",
"react-native-circle-checkbox": "^0.1.6",
"react-native-circular-progress": "^1.1.0",
"react-native-gesture-handler": "^1.1.0",
"react-native-google-places-autocomplete": "^1.3.9",
"react-native-image-picker": "^0.28.1",
"react-native-maps": "react-native-community/react-native-maps#master",
"react-native-maps-directions": "^1.6.0",
"react-native-onesignal": "^3.2.12",
"react-native-reanimated": "^1.0.0-alpha.12",
"react-native-svg": "^9.4.0",
"react-native-svg-charts": "^5.2.0",
"react-native-swiper": "^1.5.14",
"react-native-tab-view": "^2.0.3",
"react-native-vector-icons": "^6.4.2",
"react-navigation": "^3.6.0",
"unstated": "^2.1.1"
},
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/runtime": "^7.4.2",
"#react-native-community/eslint-config": "^0.0.3",
"babel-jest": "^24.5.0",
"eslint": "^5.15.3",
"jest": "^24.5.0",
"metro-react-native-babel-preset": "^0.53.1",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
}
Ciao, this problem is connected to graceful-fs package. Plase, reinstall graceful-fs:
npm install graceful-fs --save-dev
And problem should be solved.
For me, npm cache clean —force was not working, and graceful-fs is not direct dependency in my project.
OS: Ubuntu
Node: 14.6.0
Npm: 6.14.7
I am still not sure why this error exits, but it works. I found this solution on Flavio Copes's post.
open file /node_modules/graceful-fs/polyfills.js, where the error comes from.
Here’s the function that gives the problem:
function statFix (orig) {
if (!orig) return orig
// Older versions of Node erroneously returned signed integers for
// uid + gid.
return function (target, cb) {
return orig.call(fs, target, function (er, stats) {
if (!stats) return cb.apply(this, arguments)
if (stats.uid < 0) stats.uid += 0x100000000
if (stats.gid < 0) stats.gid += 0x100000000
if (cb) cb.apply(this, arguments)
})
}
}
comment out these lines (line 62-64):
// fs.stat = statFix(fs.stat)
// fs.fstat = statFix(fs.fstat)
// fs.lstat = statFix(fs.lstat)
I've run into this problem while trying to start a react-native development server on one of my old projects - (React Native version 0.59.x). For me, the fix was downgrading the node version from 14 to 10 using nvm
Go to C:\Users(your username)\AppData\Roaming
Delete npm and npm-cache
Try running again if it gives the error again uninstall and delete Nodejs completely, check that those two files above are still nonexistent and then redownload Nodejs.
On one of my computers the first way worked no problems the second one needed to have Nodejs completely replaced and then worked.
here is the solution for it.
Option 1:
Follow this directory
C:\Users(your username)\AppData\Roaming
Delete the npm folder and if there is one mom cache folder.
Run npm clean cache —force ( — force is now required to clean cache)
You should be good now if not do option 2.
Option 2:
Follow this directory
C:\Users(your username)\AppData\Roaming
Delete the npm folder and if there is one mom cache folder.
Run npm clean cache —force ( — force is now required to clean cache)
Make sure everything to do with Nodejs is deleted and uninstalled.
Reinstall Nodejs.
You should be good now
I had to use node 12.3.1 and npm 6.9.0 to fix this error
nvm use 12.3.1
This installed both. npm install working again.
'Github' asked me to update 'webpack-dev-server' to version 3.1.11 or higher for security reasons.
However, 'npm run dev' will not run after the update.
I don't solve this problem
Error: Cannot find module 'webpack-cli/bin/config-yargs'
The code for 'package.json' is as follows.
"dependencies": {
"#vue/cli-plugin-babel": "^3.5.1",
"config": "^3.0.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.1.14",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
You could try changing webpack-dev-server to webpack serve in your npm run script inside package.json
For some reason the webpack team changed the command to webpack serve
Change your package.json:
"start": "webpack serve"
Ref: https://github.com/webpack/webpack-dev-server/issues/2759
The version I am using:
"webpack": "^5.10.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
To fix it just do 2 things.
Install
npm i webpack-cli #webpack-cli/init
Add this to your package.json:
"scripts": {
"start": "webpack-cli serve --mode development"
},
Done!
I agree that you have to upgrade from webpack 3 to 4, but specifically these are the steps I had to do, first, because webpack-cli has been split out into a separate package:
$ npm install webpack webpack-cli --save-dev
As explained here: https://webpack.js.org/guides/getting-started/#basic-setup
Delete package-lock.json file. Change following in package.json.
"webpack": "^4.32.2",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.11.0"
Run npm install
Change webpack-dev-server to webpack serve in package.json file.
e.g.:
"scripts": { "start": "webpack serve --mode development --open" },
It worked for me! ;-)
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
},
Run: npm run start or npm start now
It is because of version of webpack-cli. In some versions, there is no config-yargs.js file. So ^3.3.11 version of webpack-cli worked for me.
Try it:
npm i webpack-cli#^3.3.11
webpack core team says that form version 3+ the compatibility will foucs on webpack 4
so I think you need also to update webpack 3 to webpack 4
this doc may help you to achieve that
https://webpack.js.org/migrate/4
You have to check to find out the latest versions of webpack, webpack-cli and webpack-dev-server and when you have that information edit package.json to reflect those versions and run yarn install --check-files Then you'll have to start the webpack-dev-server with the command "npx webpack serve"
I have my app created with nuxt js. I just want to push my app on Netlify.
So firstly i configure my deploy settings :
Repository on git
Base directory : Not set
Build command npm run build && npm run start
Publish directory .nuxt/dist
My app is build correctly but npm run start just launch on localhost:3000
I decided to modify config Host, I don't know if it's the best solution ?
{
"name": "app-nuxt",
"version": "1.0.0",
"description": "My remarkable Nuxt.js project",
"author": "wyllisMonteiro",
"private": true,
"config": {
"nuxt": {
"host": "https://mywebsite.com"
}
},
"scripts": {
"dev": "HOST=localhost PORT=3000 nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"test": "jest"
},
"dependencies": {
"#nuxtjs/axios": "^5.3.6",
"cookieparser": "^0.1.0",
"cross-env": "^5.2.0",
"js-cookie": "^2.2.0",
"nuxt": "^2.4.0",
"vee-validate": "^2.2.0",
"vuelidate": "^0.7.4",
"vuetify": "^1.5.5",
"vuetify-loader": "^1.2.1"
},
"devDependencies": {
"#vue/test-utils": "^1.0.0-beta.27",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^24.1.0",
"coffee-loader": "^0.9.0",
"coffeescript": "^2.4.0",
"jest": "^24.1.0",
"node-sass": "^4.11.0",
"nodemon": "^1.18.9",
"pug": "^2.0.3",
"pug-plain-loader": "^1.0.0",
"sass-loader": "^7.1.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-jest": "^3.0.3"
}
}
I want to launch in localhost:3000 by executing npm run dev
AND https://mywebsite.com by executing npm run start
Can you tell me if there is some modifications in my package.json or in my deploy settings on Netlify
For anyone that stumbles across this in the future, the problem you're experiencing is due to a misunderstanding with what services Netlify offers.
Specifically, they are primarily a static site host, which means they will host your built files, and serve them for you. They will not run your server, which means nuxt start will not run.
Instead, you should be using nuxt generate to generate the static files of your app, and telling Netlify where the output folder is.
For example, the "build settings" on Netlify:
Repository github.com/example/example
Base directory Not set
Build command npm run generate
Publish directory dist
This will properly deploy a Nuxt app, assuming you haven't changed the default build folder. For clarification, the .nuxt folder contains both client and server files, and can only be used when running your own Nuxt server on an instance of some kind.
As it looks you need to tweak your deployment command. Go to Netlify and try changing it to npm install; npm run build. This should resolve the problem.
I wrote a wrapper library for internal use of webpack with all the needed loaders and config stuff pre-done so I only have to install the wrapper library to every project and add the entry configuration.
So far that worked but for my newest, freshly cloned project it doesn't.
I tried deleting the node_modules folder and the package-lock.json file and do a clean npm i but it's still the same.
webpack-cli is installed, but has webpack as peer-dependency and it says it isn't installed. When I add it to the projects' package.json it works, but then trying to npm run build results in several errors that it couldn't find any of the loaders that should have been installed with the library.
project package.json
"scripts": {
"build": "webpack --progress --colors --hide-modules",
"dev": "npm run build --",
"watch": "npm run dev -- --watch",
"prod": "NODE_ENV=production npm run build"
},
"devDependencies": {
"#namespace/lib": "git+ssh://git#internal:js/lib.git"
},
library package.json
"dependencies": {
"#babel/core": "^7.1.2",
"#babel/preset-env": "^7.1.0",
"autoprefixer": "^9.3.1",
"babel-loader": "^8.0.4",
"copy-webpack-plugin": "^4.5.4",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"image-webpack-loader": "^4.4.0",
"lodash": "^4.17.11",
"node-sass": "^4.9.4",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.23.1",
"webpack-cli": "^3.1.2"
},
"devDependencies": {
"eslint": "^5.8.0",
"standard": "^12.0.1"
}
I deleted the
"#namespace/lib": "git+ssh://git#internal:js/lib.git"
line from the projects' package.json file and did a
npm i -D git+ssh://git#internal:js/lib.git
and now it installed all the libraries' dependencies.
Before that I just ran npm i from the newly cloned project with the existing lines in the package.json. I don't understand why that would make a difference, but it seems it did!
//EDIT:
Another thing that worked:
git reset --hard
rm package-lock.json
rm -rf node_modules # deleting already installed modules from the previous tries
npm i
So from a fresh git clone-perspective it's just deleting the lock-file and then installing again. But without a pre-existing node_modules folder.