React-cookie giving "Check the render method of `CookiesProvider`" error

Question

I'm trying to use cookies in my react app but cannot make react-cookie module to work. I'm using example from this page: https://www.npmjs.com/package/react-cookie

but it gives me the following error:

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

Check the render method of CookiesProvider.

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
//cookie
import { CookiesProvider } from 'react-cookie';



const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');

ReactDOM.render(
    <CookiesProvider>
        <BrowserRouter basename={baseUrl}>
            <App />
        </BrowserRouter>
    </CookiesProvider>,
    rootElement);

registerServiceWorker();

app.js:

//cookies
import { instanceOf } from 'prop-types';
import { withCookies, Cookies } from 'react-cookie';

class App extends Component {
    displayName = App.name

    static propTypes = {
        cookies: instanceOf(Cookies).isRequired
    };

    constructor(props) {
        super(props);

        const { cookies } = props;
        this.state = {
            name: cookies.get('name') || 'Ben'
        };
    }

    render() {
        return (
            <Layout>
                <Route exact path='/' component={Welcome} />
                <Route path='/home' component={Home} />
            </Layout>
        );
    }
}

export default withCookies(App);

Answer 1

You downloaded the wrong library. The library's name is react-cookie not react-cookies.