React.Children.only expected to receive a single React element child error

You have a space here:

                               ↓
<Provider store={store}><App /> </Provider>

JSX is kinda picky about spacing on single lines. The above essentially gets interpreted as:

<Provider store={store}><App />{' '}</Provider>

(In fact, Prettier will produce pretty much this exact output)

You can either remove the space:

<Provider store={store}><App /></Provider>

Or break it up on to multiple lines:

<Provider store={store}>
    <App />
</Provider>

I had a similar problem and it turns out I had converted my App root from a function to a class, which means I had to change the syntax from this:

ReactDOM.render(
  <Provider store={store}>
    { App }
  </Provider>,
  document.getElementById('root')
);

To this:

ReactDOM.render(
  <Provider store={store}>
    { <App /> }
  </Provider>,
  document.getElementById('root')
);

Related