React.createElement type is invalid / Uncaught error: element type is invalid - Error related to require(COMPONENT) in babel v7 (@babel/core)

Question

I know this has been asked multiple times, but (once again) i've tried everything several times.

I'm using ReactJS.NET for server side rendering and React Router.

This is how my App.jsx looks like

import ListPage from './pages/ListPage/ListPage.jsx';

<Route
    path="/list" component={ListPage}
/>

If i try to click on the button for that path i get errors such as :

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

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

bundle.js:48324 The above error occurred in the <div> component:
    in div (created by ListPage)
    in div (created by ListPage)
    in ListPage (created by Route)
    in Route (created by HomeComponent)
    in Switch (created by HomeComponent)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by HomeComponent)
    in HomeComponent

I'm exporting my component like this ->

export default class ListPage extends Component {

Does it have something to do with the SSR from ReactJS.NET or am i missing something here? I even checked my past projects (on pure JS react) and i used to define the routes the same way...

Here's my ListPage.jsx as requested

import { Component } from 'react';
import NoSSR from 'react-no-ssr';

//let Shimmer;
let IRFList;
export default class ListPage extends Component {
    constructor(props) {
        super(props);

        this.state = {
            showIrfList: false,
        }
    }

    componentDidMount() {
        IRFList = require('./IRFList.jsx');
        this.setState({ showIrfList: true });
    }

    _getShimmerStyles = () => {
        return {
            shimmerWrapper: [
                {
                    backgroundColor: '#deecf9',
                    backgroundImage: 'linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #c7e0f4 50%, rgba(255, 255, 255, 0) 100%)'
                }
            ]
        };
    }
    render() {
        return (
            <div>
                <div className="appStart">
                    {
                        this.state.showIrfList ? <IRFList listItems={this.props.listItems} spToken={this.props.sharepointToken}/> : 
                        <NoSSR>
                            <div>Loading...</div>
                        </NoSSR>
                    }

                </div>
            </div>
        );
    }
}

And this is for the IRFList.jsx

//import * as React from 'react';
import React, { Component, Fragment } from 'react';
import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
import SharePointList from '../../components/list/sharepointList.jsx';
import './IRFList.css';

initializeIcons(/* optional base url */);

export default class ListItems extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
        }
    }

    componentDidMount() {
        this.setState({ isLoading: false });
    }

    render() {
        const isLoading = this.state.isLoading;
        return (
            <div>
                {isLoading ?
                    <Fragment>
                    </Fragment>
                    :
                    <Fragment>
                        <SharePointList listItems={this.props.listItems} spToken={this.props.spToken}/>
                    </Fragment>
                }
            </div>
        )
    }
}

Edit: Ok so the problem is most likely because of my require from ListPage.jsx.

Without it i will get an error such as "window is not defined" since SSR doesnt wait for the client to load. Is there something else that i could do here? Why can't i use require anymore after upgrading to Babel V7 (@babel/core) ?

Answer 1

Ok so the error was indeed because of require(component). Apparently the new Babel needs a bit more information because Babel threats default exports as named exports so changing this to require(component).default did the trick.

https://github.com/babel/babel/issues/9087