When I start my React application. I get the following error:
ERROR
Class extends value undefined is not a constructor or null
TypeError: Class extends value undefined is not a constructor or null
at ./node_modules/web-streams-node/lib/conversions.js (http://localhost:3000/static/js/bundle.js:187746:28)
at options.factory (http://localhost:3000/static/js/bundle.js:204197:31)
at __webpack_require__ (http://localhost:3000/static/js/bundle.js:203621:33)
at fn (http://localhost:3000/static/js/bundle.js:203854:21)
at ./node_modules/web-streams-node/index.js (http://localhost:3000/static/js/bundle.js:187671:21)
at options.factory (http://localhost:3000/static/js/bundle.js:204197:31)
at __webpack_require__ (http://localhost:3000/static/js/bundle.js:203621:33)
at fn (http://localhost:3000/static/js/bundle.js:203854:21)
at ./node_modules/@comunica/bus-http/lib/ActorHttp.js (http://localhost:3000/static/js/bundle.js:19999:30)
at options.factory (http://localhost:3000/static/js/bundle.js:204197:31)
In components/profile/Container.js and components/friendList/FriendList.js I extended from Component
Container.js:
import React, {Component} from 'react';
import Profile from './Profile';
import styles from "./Profile.module.css";
const string = value => value ? value.toString() : undefined;
export default class ProfileContainer extends Component {
shouldComponentUpdate(nextProps, nextState) {
return !nextProps.pending;
}
render() {
return <div className={styles.profile}>
{this.props.pending ? null : <Profile
webId={this.props.webId}
fullName={string(this.props.fullName)}
imageSrc={string(this.props.imageSrc)}
/>}
</div>
}
}
FriendList.js:
import React, {Component} from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import List from "@material-ui/core/List";
import Friend from "./friend";
import Typography from "@material-ui/core/Typography";
export default class FriendList extends Component {
static defaultProps = {
friends: [], // list of all the friends to be shown
height: 300,
showInitially: 10, // number of friends to show initially
fetchCount: 5 // number of friends to fetch at a time, when scrolling through the list
};
state = {
items: this.props.friends.slice(0, this.props.showInitially),
hasMore: this.props.friends.length > this.props.showInitially
};
fetchMoreData = () => {
const allFriends = this.props.friends;
const shownFriends = allFriends.slice(0, this.state.items.length + this.props.fetchCount);
this.setState({
items: shownFriends,
hasMore: shownFriends.length < allFriends.length
});
};
render() {
return (
<List dense>
<InfiniteScroll
dataLength={this.state.items.length}
next={this.fetchMoreData}
hasMore={this.state.hasMore}
loader={<h4>Loading...</h4>}
height={this.props.height}
>
{this.state.items.map((webId) => (
<Friend key={webId.toString()} webId={webId}/>
))}
</InfiniteScroll>
<Typography variant="caption" style={{margin: 10}}>
{this.state.items.length} / {this.props.friends.length} shown. {this.state.hasMore ? 'Scroll to load more.' : "That's all."}
</Typography>
</List>
);
}
}
Also I have a index.js class for every feature like profile, login or friendList, that will be called at first, when importing a module. My folder structure is as follows:

As an example I pasted the code from components/login/index.js:
import React from 'react';
import {evaluateExpressions, useWebId} from '@solid/react';
import LoginContainer from './Container';
import useProfile from "../profile/useProfile";
export default () => {
const webId = useWebId()
const profile = useProfile(webId)
return <LoginContainer {...profile} />;
}