UNMET PEER DEPENDENCY react#16.0.0 Blueprint - reactjs

Trying to install Blueprint: http://blueprintjs.com/docs/#blueprint.npm-installation
Have tried the manual install. Have tried installing the dependencies manually as mentioned in step 2, but I keep getting:
UNMET PEER DEPENDENCY react#16.0.0
Which makes no sense. My package.json contains "react": "^16.0.0" and I installed react using create-react-app today, so what is going on here?
package.json:
{
"name": "reactdemo",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-scripts": "1.0.14"
},
"dependencies": {
"#blueprintjs/core": "^1.32.0",
"react": "^16.0.0",
"react-addons-css-transition-group": "^15.6.2",
"react-dom": "^16.0.0",
"react-transition-group": "^1.2.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

To quote #adidahiya from BluePrint's own repo:
If you're using React 16, we're currently in an awkward in-between state where we need react-addons-css-transition group for pre-16 support, hence the peer dep warnings. They should be safe to ignore for now. Follow #866 for more updates.
See original issue ticket here, and the issue to follow here.
Hope this helps.

Related

react-scripts build failing when updating from 1.x to 3.0.1

I'm trying to migrate react-scripts from my current version (1.1.4) to the latest 3.0.1 for obvious reasons, but I'm having a hell of a time.
Here's my current, build successful package.json
{
"name": "name",
"version": "0.1.0",
"homepage": ".",
"private": true,
"dependencies": {
"ajv": "^6.9.1",
"axios": "^0.18.0",
"axios-debug": "0.0.4",
"date-fns": "^1.30.1",
"formik": "1.2.0",
"history": "4.7.2",
"moment": "2.22.2",
"localforage": "1.7.3",
"prettier": "1.14.2",
"react": "^16.8.1",
"react-bootstrap": "0.32.4",
"react-checkbox-group": "4.0.1",
"react-datetime": "2.15.0",
"react-dom": "^16.3.2",
"react-render-debugger": "1.0.2",
"react-router-dom": "4.3.1",
"react-scripts": "1.1.4",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.87.1",
"styled-components": "^4.2.0",
"react-router-hash-link": "1.2.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
So I'm using npm so running npm install --save --save-exact react-scripts#3.0.1 installs the new react-scripts version, everything is updated correctly. I updated a few other packages that were needed as deps. No security vulnerabilities, everything was clean and installed correctly.
I'm using maven as a build system to build my app, once it tries to execute npm run build it fails on react-scripts build
The debug log is super unhelpful. The only error displayed is /node_modules/.bin/react-scripts: Permission denied
I've tried changing the permissions using chmod +x /node_modules/.bin/react-scripts but no luck.
I've tried deleting node_modules several times and reinstalling the modules using npm ci. Just about any issue I've found on github I've tried.
I'm not sure what else could be wrong.
Using node v11.9.0 and npm 6.5.0
Do I need to update in smaller version increments? I'm really at a loss
EDIT:
Something is wrong with npm in my case. Manually updating the package versions in package.json seems to work for now... I need to figure out why npm is broken for me

NPM installing nearly 202M of modules - this can't be right

So I am looking at my package.json file - and nothing looks particularly crazy:
{
"name": "application_name",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap-toggle": "^2.2.2",
"classnames": "^2.2.6",
"html-react-parser": "^0.4.6",
"jquery": "^3.3.1",
"react": "^16.4.1",
"react-bootstrap-toggle": "^2.3.1",
"react-cookie": "^3.0.4",
"react-dom": "^16.5.2",
"react-load-script": "0.0.6",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4",
"react-timer-mixin": "^0.13.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && robocopy .\\build ..\\www /MIR",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
I've tried npm install, npm install --production and npm install --express
No matter what npm command I write, I get the following:
added 1425 packages from 862 contributors and audited 14585 packages in 15.876s
It ultimately is 202M - this can't be right, that's a HUGE number of modules
This is for a React project I am working on.
I only made this question because none of the other answers seemed to work for my situation.
Is there a solution to this problem? I am intending on compiling this into a mobile app and 202M is a huge footprint for what is a pretty simple app.
202Mb is almost completely occupied with development dependencies, react-scripts.
react-scripts is a bundle consisting Webpack and other tools that are necessary to run the project. It is provided by Create React App, which is just an executable that creates boilerplate project with react-scripts:
This package includes scripts and configuration used by Create React
App.
node_modules size is adequate for complex configuration that CRA sets up. It doesn't affect the size of compiled application.

Module not found: Can't resolve 'schedule' in 'C:\Users\adcal\dvmtn7\myapp\node_modules\react-dom\cjs'

./node_modules/react-dom/cjs/react-dom.development.js
Module not found: Can't resolve 'schedule' in 'C:\Users\adcal\dvmtn7\myapp\node_modules\react-dom\cjs'
this same error has happened three create-react-apps in a row. It works at first and then just randomly breaks.
I have only installed modules via npm. Here's the package.json
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"dotenv": "^6.0.0",
"express": "^4.16.3",
"express-session": "^1.15.6",
"massive": "^5.3.0",
"react": "^16.5.0",
"react-dom": "^16.5.0",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.5",
"redux": "^4.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Update: I have the "schedules" npm installed in the projects node module folder. Why is it still throwing this error though?
(It happens in all of my projects now.)
Update to the update: I reinstalled create-react-app globally it fixed it.
I think the reason for this error is that there was a problem installing or updating a module.
I solved the problem in the following ways.
Remove package-lock.json and node_modules folder.
Run the npm install command to install a package again.
Run the yarn start command to confirm that the error has been resolved.
It appears that schedule got moved out of react in a later version.
Try
npm install scheduler --save
or updating react
https://www.npmjs.com/package/scheduler

Deploying React to GitHub Pages

I followed these tutorials:
https://pages.github.com/
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment
Right now my repo name is: username.github.io [username replaced with mine].
I am confused on what I am supposed to put on my package.json file because it conflicts with the React deploy tutorial. This is what I have right now [username replaced with mine]:
{
"name": "personal-website",
"homepage": "https://username.github.io",
"version": "0.1.0",
"private": true,
"dependencies": {
"gh-pages": "^1.0.0",
"react": "^15.6.1",
"react-bootstrap": "^0.31.1",
"react-dom": "^15.6.1",
"react-scripts": "1.0.10"
},
"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"
}
}
Every time I load to the username.github.io page, it only displays the README.md file and not the actual React application. My index.html file has to be in the public directory or else npm start will not load properly. Any suggestions on how to solve this?
You can use https://github.com/shinnn/gulp-gh-pages.
I use that lib myself to deploy a react application to github pages: https://github.com/madnight/githut/blob/master/gulpfile.babel.js
I do not want to add an extension to the URL after GitHub. So, I ended up using surge instead:
http://jakewiesler.com/surge-vs-github-pages-deploying-a-create-react-app-project/
It works and is very easy to use.

How to run eslint in create react app

Help to run eslint in create react app.
I created react app with tutorial
Then I installed
babel-eslint
standard
snazzy
and then I added to script in package.json next line
"lint": "standart --verbose | snazzy"
and now I tried to run eslint with command: npm run lint
but I have an error Parsing error: Unexpected token = null
My full package.json is below
{
"name": "square_app_react",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-scripts": "1.0.10"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "standart --verbose | snazzy"
},
"devDependencies": {
"babel-eslint": "^7.2.3",
"standard": "^10.0.2"
}
}
Please help to understand how to fix it or how to correct run eslint in my situation.
Thank you in advance.
Your spelling is off in your package.json script. It should be:
"lint": "standard --verbose | snazzy"
You also need to configure standard to use babel-eslint. Make sure to add this to your package.json.
{
"standard": {
"parser": "babel-eslint"
}
}
To run EsLint inside src folder:
./node_modules/react-scripts/node_modules/.bin/eslint src
I added this following script to scripts in package.json:
"lint": "eslint src --ext .js,.jsx,.ts,.tsx",
Recent React scripts (version 5 at least, it appears) install eslint directly, so you can add the following line to the "scripts" section of package.json:
"lint": "eslint .",
(Omitting the dot causes eslint not to do anything.)

Resources