I am new to React and NPM.
I created a new directory, did npm init, npm install and I installed React.
This is now my package.json:
{
"name": "reactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.0.1",
"react-dom": "^15.0.1"
},
"devDependencies": {
"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"webpack": "^1.12.15"
}
}
The problem is while installing material-ui I got this screen and I can't really understand how I can fix it.
Thanks.
You have installed React v15.
material-ui expects older version of React.
But you shouldn't worry, because material-ui works nicely with React v15.
So just ignore this warnings. They will dissapear after next update of material-ui library by its mainteiners.
Or you can install v0.14 of react
Related
I'm fairly new with getting my react site to run on production, hence this post.
I've a react project working like charm on local, but on nginx server it doesn't work. The title does appear but the whole page is blank. Console error is: Uncaught SyntaxError: Unexpected token '<'. I've setup babel & webpack config as well as created a build too, but doesn't seem to solve the issue.
I also cloned react starter projects from github and configured babel but still doesn't work and i can't see any specific error that can help me to get this running.
my package.json at the moment
{
"name": "helloworld",
"version": "1.0.0",
"description": "--- first, you should install node and npm.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^15.6.2",
"react-dom": "^15.6.2",
"webpack": "^1.15.0",
"webpack-dev-server": "^1.16.5"
}
}
Im starting to learn React through Scrimba, but what the tutor is doing on the screen Im not able to replicate. Ive install npm and have installed react and react-dom, but am getting the error. My code is below:
import React from 'react'
import ReactDOM from 'react-dom'
function Name(){
return (
<p>This is me...</p>
)
}
ReactDOM.render(<Name />, document.getElementById('root'))
And the package.json is as follows:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon app"
},
"author": "",
"license": "ISC",
"devDependencies": {
"nodemon": "^2.0.2",
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
"dependencies": {
"body-parser": "^1.19.0",
"express": "^4.17.1",
"express-session": "^1.17.0",
"mysql": "^2.18.1",
"path": "^0.12.7"
}
}
If anyone knows what Im doing wrong Id really appreciate it, and would really like to know how to fix this
You are using es6 features and also jsx while you haven't requirements to run the code. You have to install and config the webpack and babel transpiler.
I can't seem to get Babel to work with Parcel, although the presets are being installed automatically. It works locally and in Chrome, but it's not transpiling node_modules es6 files, so the output still has const/let/... and it cannot run in Safari.
.babelrc
{
"presets": ["#babel/preset-env","#babel/preset-react"]
}
(I've also tried the env and react ones).
package.json scripts
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html",
Why would this be?
Full package.json (note this is after messing around in order to try to get it working)
{
"name": "my-react-app",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.1.5",
"#babel/preset-env": "^7.1.5",
"#babel/preset-react": "^7.0.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"browserslist": "^4.3.4",
"lodash": "^4.17.11",
"node-sass": "^4.10.0",
"pinyin": "^2.8.3",
"prop-types": "^15.6.2",
"react": "^16.6.1",
"react-dom": "^16.6.1",
"react-notifications": "^1.4.3",
"react-router-dom": "^4.3.1"
},
"devDependencies": {
"cssnano": "^4.1.7",
"sass": "^1.14.3"
}
}
Still getting .js files with const, let. Any ideas what I am missing?
I've found a solution to it from https://github.com/parcel-bundler/parcel/issues/1655#issuecomment-425593377
// .browserslistrc.packages
node 10.11
// package.json
{
"scripts": {
"postinstall": "npm-run-all -p \"postinstall:*\"",
"postinstall:p-retry": "cpy --rename=.browserslistrc .browserslistrc.packages node_modules/p-retry",
"postinstall:query-string": "cpy --rename=.browserslistrc .browserslistrc.packages node_modules/query-string"
}
}
Add a postinstall:package-name for every npm package that you need to add transpilation (in my case, pinyin) and run npm run postinstall after every npm install. Babel should now also transpile that npm package!
ERROR in ./ClientApp/Client.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.
{
"name": "misreact",
"version": "1.0.0",
"description": "",
"path": "^0.12.7",
"main": "HelloWorld.js",
"dependencies": {
"#babel/core": "^7.1.2",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"react": "^16.6.0",
"react-dom": "^16.6.0",
"webpack": "^4.23.1",
"webpack-cli": "^3.1.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"webpack-dev-server": "^3.1.10"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start:dev": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC"
}
As of Babel 7, stages are deprecated. You can use the following package to update automatically (the following command will run the update with installing babel-update on your computer permanently):
npx babel-upgrade --write
This package is going to install all stage-2 updates (each updates is an individual package now). You may want to consider what updates you actually need and remove the rest.
I would upgrade to #babel/env and #babel/preset-react as well, as mentioned in the comments.
I am working on React application with Asp.Net core from Visual Studio .I have used this tutorial at https://blog.pusher.com/how-to-use-react-with-visual-studio-and-asp-net-web-api/ to get started and the sample application works with babel and webpack. However the changes i make in the jsx file does not seem to reflect on the browser when i run the application .After some research i found that babel caches the data and their website advises to disable it using the following command
BABEL_DISABLE_CACHE=1 babel-node script.js
Here is the link -- https://babeljs.io/docs/en/babel-register/#babel-cache-path
I have no idea on how to do that.This is as far as i went before looking for help : i included the following line inside scripts section in my package.json file hoping it would work.
"start": "BABEL_DISABLE_CACHE=1 babel-node script.js"
But no luck.Any help would be appreciated.Here is my package.json file
{
"version": "1.0.0",
"name": "ASP.NET",
"private": true,
"devDependencies": {
"webpack": "1.13.1",
"babel": "6.5.2",
"babel-preset-es2015": "6.9.0",
"babel-preset-react": "6.11.1",
"babel-loader": "6.2.4",
"babel-core": "6.2.4"
},
"dependencies": {
"react": "15.2.1",
"react-dom": "15.2.1"
},
"scripts": {
"build": "webpack --config webpack.config.js",
"start": "BABEL_DISABLE_CACHE=1 babel-node script.js"
},
"-vs-binding": { "AfterBuild": [ "build" ] }
}