Not able to publish my react components as private npm package - reactjs

I have created a new organisation on npm and I am trying to publish my react component as a scoped package so that my team can use the same component in-house in all other apps.
On running npm publish command I am getting the following
npm ERR! code EPRIVATE
npm ERR! This package has been marked as private
npm ERR! Remove the 'private' field from the package.json to publish it.
npm ERR! A complete log of this run can be found in:
my package.json looks like this
{
"name": "my-package-name",
"version": "1.0.0",
"private": true,
"main": "dist/AllExports.js",
"module": "dist/AllExports.js",
"dependencies": {
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.4.0",
"axios": "^0.21.0",
"package1217721": "^1.2.7",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-hook-form": "^6.13.0",
"react-redux": "^7.2.2",
"react-scripts": "4.0.1",
"redux": "^4.0.5",
"redux-persist": "^6.0.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "set NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/components --out-dir dist",
"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"
]
},
"proxy": "http://localhost:5000",
"devDependencies": {
"#babel/cli": "^7.12.10",
"#babel/preset-react": "^7.12.10"
}
}
And .babelrc file looks like this
//.babelrc
{
"presets": [
"#babel/preset-react"
]
}
And .npmrc looks like this
registry=http://registry.npmjs.org/
scope=myscopename
#myscopename:registry=http://registry.npmjs.org
And I have also tried
login out and then login in again.
uninstalled node_modules and then re-installed them.
did npm update
cleared npm cache as well

I have solved the issue. I was trying to use .npmrc to set scope but that was not working the way I wanted it to work.
But running the command "npm init --scope=your-scope" did the job. This command rebuilds the package.json file. I was not running the command at the first place because I was not sure if I need to run "npm init" if I already have a package.json in place. And I was afraid that it might reset the dependencies of my package but that is not the case. It keeps the dependencies intact.

Set private field (at 3rd line) in package.json file to false.

Related

Uncaught ReferenceError: process is not defined at ./node_modules/process-nextick-args/index.js

Here is my package.json:
{
"name": "new-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^14.4.3",
"buffer": "^6.0.3",
"dotenv": "^16.0.3",
"guardian-wallet": "^0.0.6-rc.30",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"web-vitals": "^3.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"preinstall": "npx npm-force-resolutions"
},
"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"
]
},
"devDependencies": {
"react-error-overlay": "^6.0.11"
},
"resolutions": {
"//": "See https://github.com/facebook/create-react-app/issues/11773",
"react-error-overlay": "6.0.9"
}
}
My app.js :
import logo from './logo.svg';
import './App.css';
import GuardianWallet from "guardian-wallet";
I have tried many the solutions I came across nothing helped:
I have tried upgrade react-scripts to its latest version.
Tried npm install --save-dev react-error-overlay#6.0.9 --force.
Tried adding resolution.
Deleted node_modules and package.lock.json and then used npm cache clean --force and then
did npm install.
process is a Node.js global; process is not defined in a React application most likely means that you're trying to use an NPM package that was written for Node.js, not a browser environment.
Depending on your specific environment and needs, there are a few approaches you could take to fix it: You could replace the NPM package that you're using with one that's written for browsers, or submit a request or PR to add browser support to the NPM package you're using, or set up polyfills in your bundler (see, e.g., here).

npm start can't detect tsx file

I tried to create a react app and add typescript to it.
But when I run the app, it seems like npm start is not detecting the typescript file and not generating tsconfig.json automatically.
Here is what I did:
1. npx create-react-app my-app
2. cd my-app
3. npm install --save typescript #types/node #types/react #types/react-dom #types/jest
4. rename index and app to tsx file
4. npm start
The error I got:
Module not found: Error: Can't resolve './App' in
'C:\WebDev\threeJs\01-tutorial\src'
I assume it is because it's looking for App.jsx not App.tsx. But I'm not sure what is the reason for that.
Here is some warning I got when npm start:
DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option...
My npm version: 6.14.15
Here is my package.json file:
{
"name": "01-tutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.4.0",
"#types/node": "^17.0.17",
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"typescript": "^4.5.5",
"web-vitals": "^2.1.4"
},
"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"
]
}
}
I had the same error, I was in the root folder but my package.json file was a step ahead. I cd into the folder where my package.json file was and it worked for me.

struggling to install node-sass in react-app

It all began after installing locomotive-scroll. I have been trying to install node-sass in my react app. I tried npm install node-sass but I got an error ERR_SOCKET_TIMEOUT I can't even run npm start command, it gives these errors
./node_modules/locomotive-scroll/src/locomotive-scroll.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./node_modules/locomotive-scroll/src/locomotive-scroll.scss)
To import Sass files, you first need to install node-sass.
Run `npm install node-sass` or `yarn add node-sass` inside your workspace.
Require stack:
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\sass-loader\dist\getDefaultSassImplementation.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\sass-loader\dist\getSassImplementation.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\sass-loader\dist\index.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\sass-loader\dist\cjs.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\loader-runner\lib\loadLoader.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\loader-runner\lib\LoaderRunner.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\webpack\lib\NormalModule.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\webpack\lib\NormalModuleFactory.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\webpack\lib\Compiler.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\webpack\lib\webpack.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\react-scripts\scripts\start.js
I tried npm cache clean, npm audit fix, then tried with --force both of them. Deleted node_modules, run npm install, updated all packages with ncu -u. I tried npm clean cache, but it didn't work too.
Here is my package.json
{
"name": "react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.4.2",
"emailjs-com": "^3.2.0",
"framer-motion": "^4.1.17",
"gsap": "^3.8.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-gsap": "^3.2.1",
"react-icons": "^4.3.1",
"react-loading": "^2.0.3",
"react-locomotive-scroll": "^0.2.0",
"react-router-dom": "^5.3.0",
"react-scripts": "^4.0.3",
"react-scroll": "^1.8.4",
"styled-components": "^5.3.1",
"use-in-view": "^1.0.15",
"web-vitals": "^2.1.2"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"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"
]
},
"devDependencies": {
"gh-pages": "^3.2.3"
}
}
So, node-sass is deprecated.
I'd like to think replacing node-sass with sass will solve your issue.
You should replace it by doing:
npm rm node-sass
npm i sass
If the project still throws errors, or demands/requires you install node-sass during runtime, try creating an alias in package.json that points to sass to bypass that error:
"node-sass": "npm:sass#^1.54.4"

React Component not reload in browser after save the changes in localhost

I created a new react project using Create-React-App. In the old projects, Whenever I did the changes in the component and save the component it will reflect in the browser, but in the new project when I saved the changes in the code the browser did not reload and not reflect the changes. So I stopped the running process and again giving the npm start
Here is my package.json file.
{
"name": "new-application",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"redux": "^4.0.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"redux-devtools": "^3.5.0",
"webpack": "^4.41.5"
}
}
Can I add something in package.json to reload the browser automatically whenever I done changes?
I had a similar (or event the same) problem and I changed starting command in the package.json file by adding following flags: --watch --watch-poll to the webpack-dev-server:
{
//...
"scripts": {
"start": "webpack-dev-server --env.ENVIRONMENT=development --content-base src/ --mode development --watch --watch-poll",
// ...
}
// ...
}
Now, using npm start and then changing src files I can see changes in the browser.
Please here https://webpack.js.org/configuration/watch/ for more options.
Install your app again using :
npx create-react-app appname
And don't edit package.json
If you prefer not modifying the package.json you can reinstall your project.
Two ways for that.
With git:
Push your project on git
Clear the project's folder on your computer
git clone https://github.com/my-account/my-project.git
npm install
Without git:
Back up the content of your project except for node_modules
Clear the project's folder except for package.json
npm install
Paste the files you backed up

multi module npm build with common dependency in parent package.json

I have a project with reactjs which has parent folder and subfolder. Parent folder and each sub folder contains package.json.
When doing npm install on parent I am building subfolders also. But the problem is npm istall is taking more time because, in subfolder package.json has duplicate entry as parent package.json.
ParentFolder
--SubFolder1
package.json
--SubFolder2
package.json
package.json
Parent package.json
{
"name": "parent",
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.0"
},
"scripts": {
"subfolder1-build": "cd SubFolder1 && npm install && npm run-script build",
"subfolder2-build": "cd SubFolder1 && npm install && npm run-script build"
}
}
Subfolder1 package.json
{
"name": "Subfolder1",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
In subfolder1 package.json i have duplicate dependencies as parent package.jso
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.0"
I am newbie to npm. Is it possible to add the common dependency in parent package.json and add only required dependency in subfolder package.json and how to refer the parent npm module in subfolder package.json?

Resources