How to disable cache babel/webpack react visual studio - reactjs

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" ] }
}

Related

ReactJS project not working on production server using NGINX

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"
}
}

How do I Create Electron App from existing React Project without disturbing the React Project

I have existing React Apps which are published to production web servers but I want to run them from the desktop using Electron. However, I do not want to disturb the React App package.json. I attempted to decouple an existing online tutorial by paachu on Medium but was unsuccessful. It kept failing trying to locate "main...chunk.css" and other resources needed by the React App.
With that said, I have a working React App in directory ./projx/reactApp I would like to create an Electron App in ./projx/electronApp that will build and create a packaged executable using electron-builder. The dev environment is not necessary at this time in that I only need a release package to distribute. Here is a package.json that almost works:
{
"name": "wrappedReact",
"version": "1.0.0",
"main": "./src/electron.js",
"scripts": {
"preclean": "cross-env rm -rf build",
"react-prebuild": "cross-env cp -r ../reactApp/build build",
"build-tsapp": "tsc ./src/electron.ts",
"electron-prebuild": "mv ./src/*.js ../build",
"electron-build": "npm run electron-prebuild && electron-builder",
"build": "npm run preclean && npm run electron-build",
"startdev": "concurrently \"tsc ./src/electron.ts -w\" \"cross-env
NODE_ENV=dev nodemon --exec \"\"wait-on http://localhost:3000 &&
electron src/electron.js\"\""
},
"author": "sfanjoy",
"homepage": "./",
"electron-pack": "build --em.main=build/electron.js",
"build": {
"appId": "com.example.reactApp",
"productName": "ReactApp",
"copyright": "Copyright © 2019 sfanjoy",
"files": [
"build/**/*",
"node_modules/**/*"
],
"directories": {
"buildResources": "assets"
},
"win": {
"target": "portable",
"icon": "assets/app.ico"
}
},
"dependencies": {
"#types/electron": "^1.6.10"
},
"devDependencies": {
"#types/electron": "^1.6.10",
"concurrently": "^4.1.1",
"cross-env": "^5.2.1",
"electron-builder": "^21.2.0",
"electron-is-dev": "^1.1.0",
"nodemon": "^1.19.1",
"typescript": "^3.5.2",
"wait-on": "^3.2.0"
}
}
I think the solution is with electron-builder if it would allow you to inject the ./src/electron.js into the prebuilt reactApp\dist\win-unpacked\resources\app.asar. I could then copy the reactApp/build directory, inject into the asar, and call electron-builder.
This by far (IMO) is the best starting setup (Boilerplate) I have come accross:
https://github.com/nateshmbhat/electron-react-ts-starter/

Parcel + Babel not transpiling ES6 from node_modules?

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!

React Native babelHelpers.asyncToGenerator is not a function (react-native 0.44.0)

I am new to react/react-native/babel world. I am trying to make async/await work.
package.json
{
"name": "App",
"version": "0.0.5",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.0",
"react-native-fs": "^2.3.3"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-preset-react-native": "1.9.2",
"babel-preset-stage-3": "^6.24.1",
"jest": "20.0.3",
"react-test-renderer": "16.0.0-alpha.6"
},
"jest": {
"preset": "react-native"
}
}
.babelrc
{
"presets": ["react-native", "babel-preset-stage-3"],
"plugins": ["transform-async-to-generator"]
}
I tried different ways and at some point it seemed to work on the emulator, though it never worked on a real device. And now it doesn't work on either. I get:
babelHelpers.asyncToGenerator is not a function
I checked out everything including github ticket related to this problem and stackoverflow question (my question is not a duplicate as it's been awhile and I use different react-native version). None of it worked for me.
My question
So what would be a proper and most up-to-date way to enable async/await on React Native app?
install babel-preset-react-native-stage-0 and remove your babel-stage-3 preset
Then you need to build / start your react app with --reset-cache option, and you should be good to go

material-ui installation npm dependencies

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

Resources