TypeError: Class extends value undefined is not a constructor or null. (React application)

271 views Asked by At

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: enter image description here

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} />;
}
0

There are 0 answers