I am trying to install flow as docs suggests https://flow.org/en/docs/install/ It requires to install babel-cli to run babel.
I installed babel-cli using below command https://babeljs.io/docs/usage/cli/
npm install --save-dev babel-cli
> npm install --save-dev babel-cli
todo-app#0.1.0 D:\React JS\todo-app
`-- babel-cli#6.24.1
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.0.17 (node_modules\react-scripts\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN enoent ENOENT: no such file or directory, open 'D:\React JS\todo-app\node_modules\acorn-dynamic-import\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'D:\React JS\todo-app\node_modules\create-hmac\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'D:\React JS\todo-app\node_modules\create-hash\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'D:\React JS\todo-app\node_modules\diffie-hellman\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'D:\React JS\todo-app\node_modules\pbkdf2\package.json'
package.json
{
"name": "todo-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.5",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.6.0"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"react-scripts": "1.0.7",
"redux-devtools": "^3.4.0",
"webpack": "^2.6.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
When I run babel command then it gives me an error 'babel' is not recognized as an internal or external command, operable program or batch file.
Update
It is because "local binaries probably aren't found because the local ./node_modules/.bin is not in $PATH" - but do you think Is it good to add node_modules/.bin of all projects in a $PATH ? or Is there any alternative to do ?
PS: I am on windows machine.
Add a babel script in your package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"babel": "babel"
}
Then you can run babel with:
npm run babel
If you want to pass arguments when running from the command line, separate them from the command with -- (more info). For example:
npm run babel -- --help
This way you run the version of babel specified in package.json and installed by npm and you do not need to edit your PATH variable.
Note: This is the same approach as flow recommends for itself in its installation instructions,. (Switch it to npm at the top then scroll down to "Setup Flow")
Related
Can anyone tell me what's incorrect here? I am trying to install the mui search bar component.
npm i --save material-ui-search-bar
However I do receive the following:
PS Z:\WebDev\ApplyWithin\frontend> npm i --save material-ui-search-bar
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: new#0.1.0
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR! peer react#"^16.8.0 || ^17.0.0" from #material-ui/core#4.12.3
npm ERR! node_modules/#material-ui/core
npm ERR! peer #material-ui/core#"^4.0.0" from material-ui-search-bar#1.0.0
npm ERR! node_modules/material-ui-search-bar
npm ERR! material-ui-search-bar#"*" from the root project
npm ERR! peer #material-ui/core#"^4.0.0" from #material-ui/icons#4.11.2
npm ERR! node_modules/#material-ui/icons
npm ERR! #material-ui/icons#"^4.11.2" from the root project
npm ERR! 1 more (material-ui-search-bar)
npm ERR! 2 more (react-dom, #material-ui/icons)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.8.0" from material-ui-search-bar#1.0.0
npm ERR! node_modules/material-ui-search-bar
npm ERR! material-ui-search-bar#"*" 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.
My package.json is:
{
"name": "new",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.7.0",
"#emotion/styled": "^11.6.0",
"#fontsource/roboto": "^4.5.1",
"#material-ui/icons": "^4.11.2",
"#mui/icons-material": "^5.2.4",
"#mui/material": "^5.2.3",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"framer-motion": "^4.1.17",
"gsap": "^3.9.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-intersection-observer": "^8.33.1",
"react-scripts": "4.0.3",
"react-typewriter-effect": "^1.1.0",
"styled-components": "^5.3.3",
"typewriter-effect": "^2.18.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}
Does anyone have a clue here?
Issue seems to be related to peer dependency of material-ui-search-bar. Having a peer dependency means that your package needs a dependency that is the same exact dependency as the person installing your package.
As stated in the error posted by you. It needs react version ^16.8.0 or lower to run.
But in your project you have specified an bigger version of react - ^17.0.2.
What you can do is lower your react version. Then you should be able to install the said package without any issues.
working with Laravel + Vue js. but when I try to start vue js using npm run serve command. it is en counting following error command in my cmd .
npm ERR! Missing script: "serve"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
how could I fix this problem?
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": "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 --disable-host-check --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": {
"axios": "^0.24.0",
"cross-env": "^7.0",
"laravel-mix": "^6.0.39",
"lodash": "^4.17.19",
"resolve-url-loader": "^3.1.0",
"sass": "^1.15.2",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.14"
},
"dependencies": {
"vue": "^2.6.14",
"vue-axios": "^3.3.7",
"vue-router": "^3.5.2",
"vue-sweetalert2": "^5.0.2"
}
}
This is not only vue js app. you are using vue with Laravel
If you want to create production build you have to run npm run prod.
If you working local then you should use npm run watch. it will use hot reload so it will detect file changes and create complied filed.
Note : you have to add resourse js & css file to webpack.mix.js file and define the destination to store complied file in public folder.
You don't have to use npm run serve because you are using vue js in laravel.
Check if you have the below content inside the package.json, if not add it and then try running the commands
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
// other commands
},
Edit:
If you are using cmd in windows.
Follow the below steps
Try deleting the node_modules folder and after that run npm i from the cmd.
Then try running npm run serve again and see if it works this time
if the above two steps don't work then install vue/cli service globally by running the command npm install #vue/cli-service -g and then follow step 1 and 2 sequentially
I did every steps and when i run npm run serve i got this:
PS C:\WINDOWS\System32\WindowsPowerShell\v1.0> npm run serve
npm ERR! Missing script: "serve"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Make Users\AppData\Local\npm-cache_logs\2023-01-23T15_13_24_934Z-debug-0.log
package.json:
"devDependencies": {
"tailwindcss": "^0.7.4"
},
"scripts": {
"tailwind:css": "tailwind build src/css/tailwind.src.css -c tailwind.js -o src/css/tailwind.css",
"start": "npm run tailwind:css && react-scripts start",
"build": "npm run tailwind:css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
error:
sh: 1: tailwind: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! client#0.1.0 tailwind:css: `tailwind build src/css/tailwind.src.css -c tailwind.js -o src/css/tailwind.css`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the client#0.1.0 tailwind:css script.
Even though (in my experience) some heroku deployments seem to somehow get away with tailwind in the devDependencies, moving it into your dependencies does fix this issue.
This can affect more than just tailwind, so you might need to move more than just tailwind across for your build to work.
I have a lerna repo. There is devDependency to concurrently package from my root package.json. When I type "lerna bootstrap" to command line, it works properly and install all root and subPackages` dependencies to root node_modules folder. But when i type "npm start" it says: 'concurrently' is not recognized as an internal or external command. When i check node_modules/concurrently folder it exists without problem.
My start script is concurrently --kill-others "npm run start-client" "npm run start-server".
This situation same with webpack-dev-server. How can i fix this problem except reinstalling everything.
package.json:
{
"name": "x-workspace",
"private": true,
"workspaces": [
"packages/*"
],
"devDependencies": {
"concurrently": "3.5.0",
"lerna": "^2.11.0"
},
"scripts": {
"start": "concurrently --kill-others \"npm run start-client\" \"npm run start-server\"",
"build": "webpack --hot",
"start-client": "npm --prefix ./packages/client-app start",
"start-server": "cd ./packages/server-app && dotnet run",
"clean": "rimraf node_modules package-lock.json ./packages/client-app/package-lock.json"
}
}
I found problem. There is no .bin folder in root node_modules folder. This is result of updating yarn to 1.8.0. When i return back to yarn 1.6.0, it works perfectly.
Thanks to David R. and other users.
I believe you don't have the concurrently package installed globally, To confirm try executing the below command and check if it returns anything,
npm list -g concurrently
If you've received an --(empty) response, then you'll have to install it globally.
npm install -g concurrently
Hope this helps!.
I've been using node.js/npm to deploy my React website to GitHub Pages but an error keeps showing up and not sure how to approach it. I have been looking around for solutions but there doesn't seem to be anything for this particular scenario:
I run the npm run build command for the completed application and add the correct GitHub Pages scripts in my package.json file below -
{
"name": "portfolio",
"version": "0.1.0",
"homepage": "https://darstnfrd.github.io/portfolio",
"private": true,
"dependencies": {
"bootstrap": "^4.0.0",
"gulp-sass": "^3.1.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"gh-pages": "^1.1.0"
}
}
Afterwards, I run npm install --save-dev gh-pages. From here, when I run npm run deploy this error below keeps emerging -
> portfolio#0.1.0 deploy C:\Users\darren\Desktop\react2018\portfolio
> gh-pages -d build
events.js:183
throw er; // Unhandled 'error' event
^
Error: spawn git ENOENT
at _errnoException (util.js:1022:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:190:19)
at onErrorNT (internal/child_process.js:372:16)
at _combinedTickCallback (internal/process/next_tick.js:138:11)
at process._tickCallback (internal/process/next_tick.js:180:9)
at Function.Module.runMain (module.js:686:11)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! portfolio#0.1.0 deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the portfolio#0.1.0 deploy 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! C:\Users\darren\AppData\Roaming\npm-cache\_logs\2018-03-12T02_09_20_837Z-debug.log
My GitHub Pages repository is ready to go. Additional actions I've tried are npm rm -rf node_modules, npm cache clean and reinstalling bootstrap dependency.
What exactly is the error? If any more information is needed, please let me know. Thank you very much!