Develop Reference

tailwind doesn't with npm run dev

I got a task to do which is to create some forms with tailwindcss but When I try to launch : npm run build, it does't work. Could you help me?
npm ERR! code ELIFECYCLE
npm ERR! errno 9
npm ERR! widgets#1.0.0 dev: `tailwind build css/tailwind.css -o build/css/tailwind.css`
npm ERR! Exit status 9
npm ERR!
npm ERR! Failed at the widgets#1.0.0 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! /Users/andresbolivar/.npm/_logs/2022-01-21T16_59_01_550Z-debug.log
this is my package.json
{
"name": "widgets",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "tailwind build style.css -o /css/tailwind.css"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.2",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.15"
},
"dependencies": {},
"description": ""
}

You need to install Tailwind CLI in order to execute tailwind commands:
# Using NPM?
npm install -D tailwindcss
# Using yarn?
yarn add tailwindcss -D
Also, it helps to check the error log (as mentioned in the message printed to your terminal) to find out a full stack trace of the error.

Error while running "npm start": 'next' is not recognized as an internal or external command,

I am having this error while running "npm start" command on terminal as I am trying to build a cryptocurrency tracker using React.js
my package.json file
{
"name": "nextjs-crypto-api",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "11.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"webpack": "^5.51.1"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-config-next": "11.1.0"
},
"description": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).",
"main": "next.config.js",
"author": "",
"license": "ISC"
}
Error:-
'next' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nextjs-crypto-api#0.1.0 start: next start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the nextjs-crypto-api#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\LENOVO\AppData\Roaming\npm-cache_logs\2021-08-20T16_58_19_379Z-debug.log
Please help me with this error

Please read your WARNING first
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
That means you are trying to run the project without installing the node_modules beforehand.
So, you should be doing - first
npm i
and then
npm start

Seems like the issue with modules. I am not sure but try deleting your package-lock.json file and node_modules folder and then try below commands:
npm cache clean --force
and then again run
npm i or npm install

Same issue here until I realized I had an outdated version of Node.js installed.
Make sure to install the latest version of Node.js, then delete both the node_modules folder and package-lock.json file in your project.
Reinstall the node_modules:
npm install
Then run it using:
npm run dev
The above command is different from npm start because you're using Next.js

You should check your dependencies thoroughly, as they are compatible depending on the version of "devDependencies" that is being used. If you are using an outdated version and wish to update to a recent version, it could be the possible cause of your error. Review your package.json file and verify the dependencies. It could be helpful to review your git log and then run
npm install
or
"npm i"
to ensure all dependencies are properly updated.
You can use the "git diff" command in the terminal to view the changes made to a specific file. For example, if you want to see the changes made to the file "example.txt", you can run the command
git diff package.json
Recently, I encountered this problem but I was able to resolve it by carefully reviewing my dependencies and checking which versions were being used. By comparing the versions in my package.json
Here I am showing you the solution that I could give to my project which presented a similar case.
I would recommend checking each of the dependencies necessary for your project.

I am getting 404 error while running "npm publish"

I am trying to publish a package to the npm registry. But when I hit the command npm publish I get this error.
npm WARN prepublish-on-install As of npm#5, `prepublish` scripts are deprecated.
npm WARN prepublish-on-install Use `prepare` for build steps and `prepublishOnly` for upload-only.
npm WARN prepublish-on-install See the deprecation note in `npm help scripts` for more information.
> imojha#1.0.0 prepublish .
> npm run build
> imojha#1.0.0 build /home/suraj/Projects/bitandbang
> node build.js
npm notice
npm notice 📦 imojha#1.0.0
npm notice === Tarball Contents ===
npm notice 1.1kB LICENSE
npm notice 3.6kB bin/output
npm notice 233B bin/card.js
npm notice 996B package.json
npm notice 293B README.md
npm notice === Tarball Details ===
npm notice name: imojha
npm notice version: 1.0.0
npm notice package size: 2.3 kB
npm notice unpacked size: 6.2 kB
npm notice shasum: bb283ae5fe8aed311771f369866c13e24f1eb937
npm notice integrity: sha512-Nzc+Ysmf4RgSi[...]XoT+OGYHNHoSQ==
npm notice total files: 5
npm notice
npm ERR! code E404
npm ERR! 404 Not Found - PUT https://npm.registry.github.com/imojha
npm ERR! 404
npm ERR! 404 'imojha#1.0.0' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/suraj/.npm/_logs/2020-10-24T14_54_01_996Z-debug.log
I have successfully run npm login. Then I am executing npm publish.
I have cloned this repo from GitHub and publishing to the npm. It's actually about creating npx card of your own name, like npx username. I am doing the same.
I have tried giving it a different package-name but couldn't make it. So, Could someone please tell me what I am doing wrong? Here is the package.json file.
{
"name": "suraj-ojha",
"version": "1.0.0",
"description": "A personal card for Suraj Ojha (#suraj)",
"main": "/bin/card.js",
"bin": {
"bitandbang": "./bin/card.js"
},
"repository": {
"type": "git",
"url": "git#github.com:Suraez/npxcard.git"
},
"homepage": "https://bnb.im",
"scripts": {
"prepublish": "npm run build",
"build": "node build.js",
"dev": "npm run build && node ./bin/card.js",
"lint": "standard",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"card",
"npm",
"npm card",
"npx",
"npx card",
"business card"
],
"author": "suraj Ojha",
"license": "MIT",
"files": [
"bin/card.js",
"bin/output"
],
"devDependencies": {
"boxen": "^2.1.0",
"chalk": "^2.4.1",
"standard": "^12.0.1"
},
"bugs": {
"url": "https://github.com/bnb/bitandbang/issues"
},
"dependencies": {},
"publishConfig": {
"registry": "https://npm.registry.github.com/"
}
}

Update: I believe its caused from issues from the .npmrc in your home folder. Messing with the $HOME variable also seems to make it fail. Removing that file, and logging back into npm seems to fix the issue.
Beyond the answer though, Suraj Oberai your question is very well worded with all the necessary information, I don't think you deserve your downvotes.
I've published many npm packages, but this was the first time I had come across this issue myself. It was very strange as there was almost no difference between this one and previous packages I've published. I had to track down the issue by taking one of my working packages and (many useless publishes later) slowly convert it into my attempt that was causing the error, only to get to the point where literally nothing different between the projects. Nothing except the HOME Env variable of the shell.
This is definitely a bug with npm. It seems like the error above is the default error, so its possible my change might not solve this issue for you.

The publishConfig URL might be wrong.
Can you try adding the publishConfig option in package.json:
"publishConfig": {
"registry":"https://npm.pkg.github.com"
},

It worked for with this other registry (maybe they updated it?):
"publishConfig": {
"registry": "https://registry.npmjs.org/"
}

GitHub NPM registry is used for private packages. The package name has to be scoped. "name": "suraj-ojha" won't work for GitHub. It needs to be something like #suraj/ojha or #bnb/bitandbang (since that's your GitHub username and repo name).
If you don't intend to publish a private package and want to publish it to the public, remove the publishConfig section in package.json so npm publish uses the default public registry.

React npm run build is getting failed every time

when I am trying to build my react app. npm run build command is failed every time. When I use npm start command everything works fine,but I can not build the app with the command.
here is my error:
PS G:\self learning\react js\resort-reactjs> npm run build
> resort#0.1.0 build G:\self learning\react js\resort-reactjs
> react-scripts build
Creating an optimized production build...
Failed to compile.
static/js/main.b4300d14.js from UglifyJs
SyntaxError: Unexpected token: operator (>) [./~/contentful/dist/contentful.node.js:3909,0]
npm ERR! Windows_NT 10.0.18362
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\USER\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v12.18.1
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! resort#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the resort#0.1.0 build script 'react-scripts build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the resort package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! react-scripts build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs resort
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls resort
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! G:\self learning\react js\resort-reactjs\npm-debug.log
in my package.json file everything is updated. my package.json file here. :
{
"name": "resort",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-icons": "^3.10.0",
"react-router-dom": "^5.2.0",
"react-scripts": "0.9.5",
"styled-components": "^5.1.1"
},
"devDependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

The package.json file looks fine to me. I think it is a bug, or, at least, a poorly documented error. Try debug or just cleanup unwanted files that you dont need around the project and restart the build.

Using external JS library in React server

I have to use a JS library called 'react-armor' here for my web project. So, created a React powered server as instructed here.
The server is up and running. But, in order to use the react-armor library, the code specifies to import the library into the project JS:
import { obfuscateClassNames } from 'react-armor';
*as in the readme.md tutorial of react-armor github
But, how could I use the package react-armor (examples given in the readme.md) into my react server? I mean, how to integrate the github repo to my server? Just using import something from 'react-armor', so where should react-armor exist?
Update 1:
Added react-armor dependency in server package.json file.
But, sudo npm install --save react-armor gives me errors.
npm http GET https://registry.npmjs.org/react-armor
npm http 404 https://registry.npmjs.org/react-armor
npm ERR! TypeError: Cannot read property 'latest' of undefined
npm ERR! at next (/usr/share/npm/lib/cache.js:687:35)
npm ERR! at /usr/share/npm/lib/cache.js:675:5
npm ERR! at saved (/usr/share/npm/node_modules/npm-registry-client/lib/get.js:142:7)
npm ERR! at /usr/lib/nodejs/graceful-fs/polyfills.js:133:7
npm ERR! at Object.oncomplete (fs.js:107:15)
npm ERR! If you need help, you may report this log at:
npm ERR! <http://github.com/isaacs/npm/issues>
npm ERR! or email it to:
npm ERR! <npm-#googlegroups.com>
npm ERR! System Linux 3.13.0-87-generic
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "install" "react-armor"
npm ERR! cwd /home/local/unixroot
npm ERR! node -v v0.10.25
npm ERR! npm -v 1.3.10
npm ERR! type non_object_property_load
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /home/local/unixroot/npm-debug.log
npm ERR! not ok code 0
Even after adding the dependency in package.json file, the import doesn't work.
This is my package.json in my react server folder:
{
"name": "react-tutorial",
"version": "0.0.0",
"private": true,
"license": "see LICENSE file",
"description": "Code from the React tutorial.",
"main": "server.js",
"dependencies": {
"react-armor": "elierotenberg/react-armor",
"body-parser": "^1.4.3",
"express": "^4.4.5"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"repository": {
"type": "git",
"url": "https://github.com/reactjs/react-tutorial.git"
},
"keywords": [
"react",
"tutorial",
"comment",
"example"
],
"author": "petehunt",
"bugs": {
"url": "https://github.com/reactjs/react-tutorial/issues"
},
"homepage": "https://github.com/reactjs/react-tutorial",
"engines" : {
"node" : "0.12.x"
}
}
Update 1:
It seems like some dependency errors here. But, is it possible to run this on Tomcat instead of NodeJS? Why does everyone recommend using NodeJS for ReactApp instead of Tomcat, despite React being a client side rendered JS lib?

If it's an NPM package, you would run npm install --save react-armor (--save if you want to add it to your down package's dependencies). It will download it and save it into a ./node_modules folder. Node will automatically look in that path (in addition to other preset locations) to find that module.
If it's not hosted on NPM, you can pull it in from GitHub by adding this to your package.json file.
"dependencies": {
"react-armor": "elierotenberg/react-armor"
}
Where the url is user/repo. You would still need to run npm install to actually download it.