2

I would like to include both the latest Babel (for async/await syntax support) and the latest ReactJS (for hooks) in my code snippet, but I get the following error:

"message": "Uncaught SyntaxError: Unexpected token '<'",

How do I solve this?

I am aware of the following question ("Why won't this snippet with async await work here on Stack Overflow snippet editor?").

Note: I am aware that ticking the BabelJS/ES2015 checkbox appears to "solve" the immediate problem, but that just masks the problem by overriding the version of Babel included in the snippet. And this can be observed by checking the checkbox and re-running the snippet delivering the following error (which is a failure to parse the async keyword, I think):

"Script error.",

const Foo = () => {
  const [bat, setBat] = React.useState('');
  return (<div>foo</div>)
}

const bar = async () => {
  const bam = await(Promise.resolve())
}

ReactDOM.render(
  <Foo/>,
  document.querySelector('main')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
<main></main>

0

2 Answers 2

2

To use any version other than the one integrated with the Stack Snippets, you have to put your JavaScript code in a script type="text/babel" tag in the HTML panel, not in the JavaScript panel.

More here and here.

0
1

Clicking on the Use BabelJS / ES2015 checkbox in the Snippet editor fixes it for me.

const Foo = () => (<div>foo</div>)

ReactDOM.render(
  <Foo/>,
  document.querySelector('main')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
<main></main>

Here's where it is:

Stack Snippet BabelJS checkbox

5
  • Yes, but does this override my standalone Babel library inclusion?
    – Ben Aston
    Oct 4, 2021 at 10:37
  • Your testcase should demonstrate your issue. if it doesn't you need to create a new testcase in a new question that isn't fixed by clicking on the Babel checkbox. Oct 4, 2021 at 10:41
  • Thank you. I have updated the question. I need both modern React (hooks) and modern JS (async/await syntax)
    – Ben Aston
    Oct 4, 2021 at 10:42
  • Looks like the version of Babel added by the checkbox isn't as out of date as I thought; it's a full version behind (presuming it still hasn't been updated since), but that's nothing too crazy. That said, the post I linked mentions that that version doesn't support async/ await, so if it hasn't been updated, then that would indeed be a problem for OP.
    – zcoop98
    Oct 4, 2021 at 15:09
  • 2
    @zcoop98 It's still 6.10.3, which was released on June 18, 2016. That's an eternity in web dev terms. Oct 4, 2021 at 18:52

Not the answer you're looking for? Browse other questions tagged .