Working with create-react-app, while npm start is running, if I inspect an app, in Chrome DevTools I can find my project files only inside the Webpack-internal folder. Is that normal?
Further more if I open Source tab, this is what I see:
It seems that the ES6 code is changed to ES5 and also there are __source: tags every where.
I thought if I disable SourceMap for JavaScript in my DevTools settings, those __source tags will disappear, they didn't. Even refreshing the browser or relaunching the Dev server with npm start, didn't remove them.
This make it very hard debuggin the code. Are you facing the same issue? Any solution?
Babel is part of the build process, it is responsible for transpiling ES6 into ES5 so your app can work on browsers that don't support ES6 properly.
You can read more about it here https://babeljs.io/
You won't really be able to see your precompiled code in the browser. You should use an extension called React Developer Tools, you can get it for Chrome here https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
With the extension you can see much more relevant information about your React app.
Related
I am trying to figure out how Babel gets used.
In one of my current projects, I see that I have a Babel file, but I never set up any configuration as far as I can tell that deals with Babel. So I want to know if it is actually being used or if I just have it installed.
When I deploy my React app to somewhere like AWS Amplify or Heroku, is Babel automatically being used and this is how my browser can understand React? Or would my browser understand React even without Babel?
You can not be sure that all versions of all browsers understand modern JavaScript. That is why, even if you write modern JS in your code, Babel will automatically turn it to plain vanilla JS so that it is compatible with almost every browsers.
This links I attached below, are of highlighted texts. Please give it a read as I believe it will clear up your confusions somewhat.
https://www.freecodecamp.org/news/jsx-in-react-introduction/#:~:text=But%20the%20browser,JavaScript%20compiler/transpiler.
https://create-react-app.dev/docs/getting-started/#:~:text=You%20don%E2%80%99t%20need,good%20to%20go.
I have the following query. When deploying a React app, what is being deployed is the .js and .css bundles produced By Webpack. However, by using Chrome dev tools under Sources tab, I am able to see all the source code - every single file being used during development. So, the question is how is that possible and who is responsible for that?
Moreover, it seems Chrome debugger has some issues with these source files e.g. skips lines when debugging using F10, cannot recognize some variables in watch window etc. At the same time, everything works fine locally during development. I suspect the second question has to do with the first one. Do I miss something?
Webpack uses plugins which "map" your JS for the devtools, you can read more about it here.
tldr; How do I configure my CRA project so that the yarn start yields a build compatible with an older browser?
Not sure what I'm doing wrong, but I'm essentially using TypeScript with CRA, and would like to run the development version on an older Chrome. To be precise, it's Chrome 53 running on a Smart TV. As I'm developing an app to run on a TV, and would like to test on the one I have available, running the a build compatible with that TV is crucial.
When I run the current development version on the TV, the browser complains about a syntax error. Probably because of the advanced JS features contained in the build (arrow functions, const, ...).
So the first thing I did was to update tsconfig.json to target es3 instead of what it currently sits at: es5. I was not expecting this to make a difference as ES5 should clearly run well on Chrome 53.
Then, I tried customising the browserlist in package.json to include that version of Chrome, or even copying the production setting to the development ones, but to no avail. When I inspect the JavaScript generated on my desktop, it still contains ES6 features.
Clearly, I'm very unfamiliar as to how TypeScript and CRA (hear Babel) work together. I tried to inspect CRA's source code, and to eject the application to explain my attempts do not work, but I'm lost.
(Noting that the project was created from the CRA's TypeScript template a few days ago, so it's really up to date.)
Well, it turns out that the problem is easier than it appeared. The NPM cache needs to be cleared after modifying package.json. I'll admit that I did not notice the mention of this in the documentation.
When editing the browserslist config, you may notice that your changes don't get picked up right away. This is due to an issue in babel-loader not detecting the change in your package.json. A quick solution is to delete the node_modules/.cache folder and try again.
Supported browsers
How can I see what I´m building on my Chrome browser?
I know how to see PHP through local server, see HTML website through normal ways and with Gulp but can´t seem to understand this.
I would suggest you look into create-react-app, it comes handy with a few things that are already prebuilt https://github.com/facebookincubator/create-react-app
Here's a tutorial on it: https://medium.com/#diamondgfx/learning-react-with-create-react-app-part-1-a12e1833fdc
You can load the build from your project on 'create-react-app' into your PHP project.
I built my polymer project and deployed it with the firebase command. I followed the instruction on the polymer site. In Chrome on my Mac it works, but on my mobile(Chrome and Safari) and Safari on my Mac it display an empty page.
Can anybody help me out?
best regards
UPDATE: the dependency problem has been fixed with v0.16.0 which deployed this evening 8/24/2016. I have kept the below workaround just for reference.
This is a known issue: https://github.com/Polymer/polymer-cli/issues/347
includeDependencies stipulated in polymer.json is not being processed.
Here's the remedy for now:
The 'polymer build' process is not including the polyfill in the build even when you include it in the polymer.json dependencies.
This polyfill is necessary for browsers which do not support web components.
Therefore until it is fixed it needs to be added manually...
After running 'polymer build':
open the app's bower_components folder
copy the webcomponentsjs folder
open the build folder
paste the webcomponentsjs folder in the bundled/bower_components and unbundled/bower_components
run firebase deploy
(Do this for all dependencies you require.)