question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Babel not rendering JSX in Chrome but works in Firefox

See original GitHub issue

Bug Report

Current Behavior Babel isn’t working correctly in Chrome but is working in Firefox. Details below:

Backgroundr I’m following along a Treehouse ReactJS introduction course and were asked to add this script to our html file so we could render JSX using Babel. I’ve seen several people post about this in the Treehouse support forum - but thought I would reach out to the Babel team to let you know, incase there’s a particular fix I can let the instructor know about.

This is the script we were told to paste into out html file https://unpkg.com/babel-standalone@6/babel.min.js

SO

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

I updated my script type to include babel

<script type="text/babel" src="./app.js"></script>

However in Chrome (Version 80.0.3987.149 (Official Build) (64-bit) for Mac When I render, the component doesn’t show up at all.

When I view in Firefox (74.0 (64-bit) for Mac it all works perfectly.

Component Code Here is an example of the component and the JSX

const Counter = () => { return( <div className="counter"> <button className="counter-action decrement"> - </button> <span className="counter-score"> 35 </span> <button className="counter-action increment"> + </button> </div> ); }

  • I’m not sure of the Babel version - have pasted the code into index.html file
  • Using Visual Studio Code
  • Python [V2.3] for local server
  • OS: [e.g. OSX 10.14.4,]

Additional context/Screenshots Here is the screenshot from the console in Chrome + Firefox

Chrome-console Firefox-console

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
oliverdunkcommented, Apr 6, 2020

Hi @Feisty-er! The link @nicolo-ribaudo provided was to an HTML page, which lets you browse the package. Can you try putting https://unpkg.com/@babel/standalone@7.9.4/babel.min.js (the link to the raw file) as your script’s src?

That said, I wasn’t able to reproduce the bug in either version. It might be useful if you could produce a simple test case, including an index.html and app.js that you can send over in full.

0reactions
szpxcommented, Nov 6, 2020

Hi @oliverdunk working for me, thks

Read more comments on GitHub >

github_iconTop Results From Across the Web

React app works on Chrome, but not Firefox - Stack Overflow
I had Redux DevTools installed on Chrome, but not Firefox. The site works fine after installing it on Firefox.
Read more >
My React app works fine in Chrome but not in firefox-Reactjs
Coding example for the question My React app works fine in Chrome but not in firefox-Reactjs.
Read more >
Writing efficient React code - Firefox Source Docs - Mozilla
As a start let's discuss about how React renders normal plain components, that don't use ... Component { // Note: this syntax, new...
Read more >
babel/preset-env
babel /preset-env` is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, ......
Read more >
A guide to features and updates in React DevTools
Why is React DevTools not showing up in Chrome DevTools? ... It slows down your application a bit, but it works great in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found