<React.Format> error while studying Learning React Book

programming web dev
1

Hi All:
I have run into an error while studying the Kirupa React Book.
In 'JSX Quirks" on p.83 there is a discussion about using <></> as a shortcut for <React.Fragment>. I get a Babel error when I use this syntax. Code is below. Corresponding web page is https://www.kirupa.com/react/meet_jsx_again.htm
Help will be appreciated.
Thanks.

class ShortHandFragment extends React.Component {
        render() {
        return (
            <>
                <p>___</p>
                <p>I am</p>
                <p>returning a Fragmented list</p>
                <p>using the shorthand tag.</p>
            </>
        );
    }
};

The Error is:

Uncaught SyntaxError: Inline Babel script: Unexpected token (52:21)
    50 |                 render() {
    51 |                 return (
    52 |                     <>
    |                         ^
    53 |                           <p>___</p>;
    54 |                            <p>I am</p>
    55 |                             <p>returning a Fragmented list</p>
    at r.l.raise (babel.min.js:27)
    at r.c.unexpected (babel.min.js:27)
    at r.E.jsxParseIdentifier (babel.min.js:28)
...

The code works correctly when I use the <React.Format> tag:

 class ShortHandFragment extends React.Component {
            render() {
            return (
                <React.Fragment>
                    <p>___</p>
                    <p>I am</p>
                    <p>returning a Fragmented list</p>
                    <p>using the shorthand tag.</p>
                </React.Fragment>
            );
        }
    };
2

Make sure you are om the latest react. Version (16.2+) and make sure you import it
import React, { Fragment } from 'react';

Then:

const Conatiner = () => (
  <>
<p>Hello</p>
<p>World!</p>
  </>
)

:cowboy_hat_face:

3

Thanks for the quick reply.
At this point in the book, everything is in a single HTML doc and the libraries are imported from unpkg.com. There are no individual imports of packages in the tutorial thus far.

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

I checked the CDN and the script versions are correct. They suggest adding “crossorigin” to the link, but that didn’t help.

I also added
import React, { Fragment } from 'react';
inside the <script> tag
but it didn’t eliminate the error.

Here is the file. If I understand things correctly, it doesn’t have any external dependencies. Thanks.
07.MoreJSX.html (3.1 KB)

4

What type of error are you getting after adding the fragment import?

5 
Uncaught SyntaxError: Inline Babel script: Unexpected token (52:21)
  50 |                 render() {
  51 |                 return (
> 52 |                     <>
     |                      ^
  53 |                         <p>___</p>
  54 |                         <p>I am</p>
  55 |                         <p>returning a Fragmented list</p>
    at r.l.raise (babel.min.js:27)
    at r.c.unexpected (babel.min.js:27)
    at r.E.jsxParseIdentifier (babel.min.js:28)

If you open the file I uploaded, I think you’ll get the same result.

6

I think it is because you are using script tags that import react which makes you not able to import Fragment globally so that you can use the short version.

7

Because you can do this, you just need to place React.Fragment globally.

<body>
<div id="container">If you see this there is a React Error</div>
<script type="text/babel">
    // JSX is treated like JavaScript
     // The values returned can be dynamically generated. Expressions are wrapped in curly braces.
    // The card component will act as the the container that our Swatch and Label components will live in.  Created with js class.
    
   var x =React.Fragment;
            
    class ShortHandFragment extends React.Component {
    	
            render() {
            		
            return (
                <x>
                    <p>___</p>
                    <p>I am</p>
                    <p>returning a Fragmented list</p>
                    <p>using the shorthand tag.</p>
                </x>
            );
        }
    };
    ReactDOM.render(
        <ShortHandFragment />,
        document.querySelector("#container")
    );
    </script>
</body>
8

That works!
I presume that as I get further into this I won’t run into this problem, but I hate getting stuck when I’m following a tutorial…
Thanks a lot for taking the time to help! :old_key:

9

The <> syntax should work as part of the in-browser libraries. It is strange to see that error. When you go here, does the example work properly: https://codepen.io/reactjs/pen/VrEbjE?editors=1000 ?

Thanks,
Kirupa

10

Yes. That works. The links to the CDN are different in your codepen than in the tutorial. I copied them to my file and they work. Code pasted below.
Thanks!

Tutorial:

<script  src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script  src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script  src="https://unpkg.com/[email protected]/babel.min.js"></script>

Codepen:

<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
11

This has to do with a change in Babel that was fixed after printing.

I will mark this as something to fix in a future printing. Sorry about that. The moving of things inside the libraries is the biggest problem when writing a book on a 3rd party framework like React.

12

Thank you.
This is the first framework that I’ve studied. I’m only at the beginning of the book and this snafu already provides an example of one of the cons of using these frameworks - maintaince requires keeping up with the changes over which one has no control. I appreciate your discussion on this issue in A Future without React.

13

The <> syntax is the only major experimental addition I talk about in the book. You shouldn’t run into any mismatches when talking about the more fundamental APIs that haven’t changed in a long time. Also, check this page for any additional issues that may or may not be fixed in the edition of the printing you are looking at: https://www.kirupa.com/react/errata.htm

I do look forward to a world where some of the best ideas from frameworks like React make their way into the core Web APIs.

Thanks,
Kirupa :stuck_out_tongue: