Bit - component has no build task defined - reactjs

I am trying to make a test component on bit dev, but I fail.
After succesfully:
creating an app - CRA
initializing bit
installing compiler
adding / building / exporting component
I get a warning when I go to bit dev page of a component (which is exported properly, but preview is not loading):
Note: your component has no build task defined!
To consume components using NPM or Yarn you should define a build environment for your components. Learn more.
And therefore I can't then install this component in other project.
Package.json looks like this:
{
"name": "new-one",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"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"
},
"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"
]
},
"bit": {
"env": {
"compiler": "bit.envs/compilers/react#2.0.0"
},
"componentsDefaultDirectory": "components/{name}",
"packageManager": "npm"
}
}
I search and search, but no one seems to have such a problem. Any idea?
Error during installation in another project:
npm ERR! code ENOVERSIONS
npm ERR! No valid versions available for #bit/maciejwira.main.test
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Maciej\AppData\Roaming\npm-cache\_logs\2021-05-15T14_38_51_258Z-debug.log

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).

yarn start doesn't open react app on chrome but no errors are thrown?

I have a simple react app that I started recently just to study a few things and suddenly, when I try to run it with:
yarn start
it does not throws any error, just stays like this:
yarn run v1.22.19
warning ..\package.json: No license field
$ react-scripts start
and nothing happens, what should i do?
PS: my complete package.json:
{
"name": "prototype",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^13.0.0",
"#testing-library/user-event": "^13.2.1",
"framer-motion": "^7.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"start": "^5.1.0",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.0"
},
"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"
]
},
"devDependencies": {
"eslint": "^8.21.0"
}
}
As you can see in the error message the path of the package.json file is in the warning:
yarn run v1.22.19
warning ..\package.json: No license field
$ react-scripts start
That double dots ..\ saying that the package.json file is one folder up from where you are running the yarn start command. It could be OUTSIDE the project folder you're working on.
So if you go one directory up you will find another package.json file. Either add "license" field into that package.json file or simply delete the file if you do not need it.
This should solve your problem.

npm install does not modify the package.json in react app

I just created React App by "npx create-react-app", and then when I do "npm install redux" or "npm install --save-dev redux" or "npm install --save redux" - it just does not modify the package.json
I tried the same thing with "react-redux", "react-thunk"... And still... The package.json remains the same.
I do not know how to fix this.
Please, help.
"name": "basic_redux_setup",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.8",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.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"
]
}
}
Make sure you are on the right directory while executing the NPM scripts, which must be the same directory where the package.json file is located.

Can't use createRef in latest version of create-react-app

I am learning React using create-react-app, and I'm getting this error in my app:
TypeError: react__WEBPACK_IMPORTED_MODULE_0___default.a.createRef() is not a function
Now, I know that this feature was only introduced in React 16.3, but that seems to be the version I have installed. I initialized everything by typing:
npx create-react-app probando02
If I check my version:
npm view react version
16.13.1
And my package.json file is:
{
"name": "probando02",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"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"
]
}
}
EDIT: my React environment, as shown by npx create-react-app --info:
Environment Info:
current version of create-react-app: 3.4.1
running from C:\Users\paulo\AppData\Roaming\npm-cache\_npx\21716\node_modules\create-react-app
System:
OS: Windows 10 10.0.18362
CPU: (24) x64 AMD Ryzen Threadripper 1920X 12-Core Processor
Binaries:
Node: 12.16.3 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 6.14.7 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.449.0
Internet Explorer: 11.0.18362.1
npmPackages:
react: ^16.13.1 => 16.13.1
react-dom: ^16.13.1 => 16.13.1
react-scripts: 3.4.1 => 3.4.1
npmGlobalPackages:
create-react-app: Not Found
So what's going on?
I am using the same version but it works fine for me.
And also here is my package.json file
{
"name": "example",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"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"
]
}
}
It worked fine for me it was launching the default website in port 3000.
I think its just a update issue or so, just try updating npm.

Why show error [ react-router-dom#5.2.0 requires a peer of react#>=15 but none is installed. You must install peer dependencies yourself.]

I wanna show page on using 'react-router-dom' in react.
And show error
[react-router-dom#5.2.0 requires a peer of react#>=15 but none is
installed. You must install peer dependencies yourself.].
But my react version is "^16.13.1" already.
package.json
{
"name": "pra_hook",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"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"
]
}
}
I got the same issue. But it got resolved when I use the below command:
npm install react-router-dom
Instead of
npm install -g react-router-dom.
Do [npm install react-router-dom] and work

Resources