Error on a React Fragment

[mcampourcy]

Hi ! I have an error with the scoped styles when my component is nested in a Fragment :
Invalid prop data-v-4e235659 supplied to React.Fragment

How can I avoid it ?

Thanks !

[gaoxiaoliangz]

I cannot produce the error here with the newest version. Can you provide a more detailed example with code and what version are you using?

[mcampourcy]

I'm using gxl/react-scripts 2.2.6.

Here is my code, which is the basic create-react-app App file :

class App extends Component {
  render() {
    return (
      <Fragment className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <Link
            className={styles['App-link']}
            to="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </Link>
        </header>
      </Fragment>
    );
  }
}

Here is the console error :

Warning: Invalid prop `className` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.
    in Fragment (at App.jsx:9)
    in App (at src/index.js:7)

[gaoxiaoliangz]

In react-scoped-css it won't add data-v attribute to <></> or <React.Fragment></React.Fragment>. But if you write something like const { Fragment } = react, it won't know for sure it is a react fragment. Because anything could be assigned to that Fragment variable. So it would add data-v to Fragment.

And also there is one problem with your code, react fragment doesn't accept any props other than key or children.

So you should change your code to this:

class App extends Component {
  render() {
    return (
      <>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <Link
            className={styles['App-link']}
            to="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </Link>
        </header>
      </>
    );
  }
}