React-cookie: Invariant Violation: The root route must render a single element

Question

I'm using react-cookie package, when I try to set it up at the highest level component, it will throw me these errors:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: symbol.

Invariant Violation: The root route must render a single element

[1] Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: symbol.
[1]     in RouterContext
[1]     in AsyncConnect
[1]     in Connect(AsyncConnect)
[1]     in IntlProvider
[1]     in Connect(IntlProvider)
[1]     in Provider
[1]     in Context.Provider
[1]     in CookiesProvider
[1]     in StyleSheetManager
[1] C:\Users\me\Projects\my-application\node_modules\react-transform-catch-errors\lib\index.js:47
[1]             throw err;
[1]             ^
[1] Invariant Violation: The root route must render a single element
[1]     at invariant (C:\Users\me\Projects\my-application\node_modules\invariant\invariant.js:40:15)
[1]     at Object.render (C:\Users\me\Projects\my-application\node_modules\react-router\lib\RouterContext.js:125:155)
[1]     at processChild (C:\Users\me\Projects\htmmy-application\node_modules\react-dom\cjs\react-dom-server.node.development.js:2959:18)
[1]     at resolve (C:\Users\me\Projects\my-application\node_modules\react-dom\cjs\react-dom-server.node.development.js:2812:5)
    at ReactDOMServerRenderer.render (C:\Users\me\Projects\my-application\node_modules\react-dom\cjs\react-dom-server.node.development.js:3202:22)
[1]     at ReactDOMServerRenderer.read (C:\Users\me\Projects\my-application\node_modules\react-dom\cjs\react-dom-server.node.development.js:3161:29)
[1]     at Object.renderToString (C:\Users\me\Projects\my-application\node_modules\react-dom\cjs\react-dom-server.node.development.js:3646:27)
[1]     at Html.render (C:/Users/me/Projects/my-application/src/helpers/Html.js:29:42)
[1]     at Html.tryRender (C:\Users\me\Projects\my-application\node_modules\react-transform-catch-errors\lib\index.js:34:31)
[1]     at processChild (C:\Users\me\Projects\my-application\node_modules\react-dom\cjs\react-dom-server.node.development.js:2959:18)

// Routes

export default () => (
  <Route path="/:locale/" component={App}>
    ...
    <Route path="login" component={Login} />
  </Route>
);

// LoginPage (Putting like this doesn't work)

@withCookies
@connect(state => ({ auth: state.auth }), { login })
export default class LoginPage extends PureComponent {
  static propTypes = {
    cookies: PropTypes.instanceOf(Cookies).isRequired,
    auth: PropTypes.object.isRequired,
    login: PropTypes.func.isRequired,
  }
  ...

However, if I move it into another component and import it, it will work.

// LoginPage

export default class LoginPage extends PureComponent {
  render() {
    return (
      <div>
        <Login />
      </div>
    );
  }
}

// Login

@withCookies
@connect(state => ({ auth: state.auth }), { login })
export default class Login extends PureComponent {
  static propTypes = {
    cookies: PropTypes.instanceOf(Cookies).isRequired,
    auth: PropTypes.object.isRequired,
    login: PropTypes.func.isRequired,
  }
  ...

I have tried exporting in different ways but still got the same error:

export class LoginPage extends PureComponent {
  ...
}

const App = connect(state => ({ auth: state.auth }), { login })(LoginPage);

export default withCookies(App);

Is there a way I can set up in the highest level component?

Additional info:

// server.js

    const component = (
      <CookiesProvider cookies={req.universalCookies}>
        <Provider store={store} key="provider">
          <IntlProvider>
            <ReduxAsyncConnect {...renderProps} />
          </IntlProvider>
        </Provider>
      </CookiesProvider>
    );

    const html = ReactDOM.renderToString(
      <Html assets={webpackIsomorphicTools.assets()} component={component} store={store} />
    );
    res.status(200);
    res.send(`<!doctype html>\n${html}`);

@GaëlS you mean export default withCookies(connect(state => ({ auth: state.auth }), { login })(LoginPage))? — Jee Mok
@GaëlS Yeap, I have tried export default withCookies(connect(state => ({ auth: state.auth }), { login })(LoginPage)) and it throws the same error — Jee Mok

Gaël S Gaël S · Accepted Answer · 2019-04-30T09:13:23

Following react-cookies server side, the code from the example is like this:

// src/server.js
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { CookiesProvider } from 'react-cookie';

import Html from './components/Html';
import App from './components/App';

export default function middleware(req, res) {
  const markup = ReactDOMServer.renderToString(
    <CookiesProvider cookies={req.universalCookies}>
      <App />
    </CookiesProvider>
  );

  const html = ReactDOMServer.renderToStaticMarkup(<Html markup={markup} />);

  res.send('<!DOCTYPE html>' + html);
}

Don't know if it's related but you do not use ReactDOMServer but ReactDOM, is there a reason ?

React-cookie: Invariant Violation: The root route must render a single element

1 Answers