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

[Aid19801]

Can't seem to escape this. Ordinarily i'd say it's a default import vs named constant import error but no amount of fiddling seems to be fixing it.

I am doing SSR / Next / Isomorphic and using:-

Next JS 8.0.1
React & ReactDOM 16.8.2

SSR notes suggest this should be straight fwd. But it's proving very difficult. Do you have an example of an SSR use of the component?

My Code:

I have a PageContainer and within that is an advert box, which i'd like to use react-ideal-image for.

PageContainer:

import React, { Component } from 'react';
import { NavBar, AdvertBox } from '../index'; // <-- nav works, advertbox doesnt.
import { Provider } from 'react-redux';

import store from '../../redux/store';

const page = (Page) => {
    return (
        class PageWrapper extends Component {
            render() {
                return (
                    <Provider store={store}>
                        <div className="App">

                            <NavBar /> // <--NavBar renders perfectly
                            <AdvertBox // <--AdvertBox which contains ideal-image errors
                                src="https://via.placeholder.com/300"
                                onClick={() => alert('i go to advertisers' homepage')}
                                />
                        </div>

                        <style jsx>{`
                        .App {
                            text-align: center;
                            justify-content: center;
                            align-items: center;
                            text-align: center;
                            align-content: center;
                            flex-direction: column;
                            width: 100%;
                            border: 1px solid green;
                          }
                        `}</style>

                    </Provider>
                )
            }
        }
    )
}
export default page;

So then in AdvertBox:

import React from 'react';
import PropTypes from 'prop-types';
import IdealImage from 'react-ideal-image'; // this import actually causes no issues by itself
// but using the component in <AdvertBox /> erupts in `element type invalid` errors.

let myProps = {
    srcSet: [{ src: '/static/placeholder.png', width: 3500 }],
    alt: 'foo',
    width: 3500,
    height: 2095,
}
const AdvertBox = props => (

    <div id="advert-box-container" onClick={props.onClick}>
        <IdealImage {...myProps} />
    </div>
);

AdvertBox.propTypes = {
    src: PropTypes.string.isRequired,
    onClick: PropTypes.func.isRequired,
}

export default AdvertBox;

Is this a bug with ideal-image? What am i doing wrong, mate?😕

[clarsen]

I saw this too with same versions: react/react-dom 16.8.2 and next 8.0.1. after digging for a little bit, no idea either.

[Aid19801]

I've abandoned it for Next / SSR. Lost a day trying to resolve it. Will circle-back in a couple of weeks and see if any word from @stereobooster 👍🏻

[karna41317]

downgrade your react-waypoint to 8.0.3. Dint had time to debug why we have to do it. good luck

[tomsarduy]

🤦‍♂