React应用启动报错：Class extends value undefined is not a constructor or null

问题描述 #

启动React应用时触发以下错误：

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)

涉及的组件代码及项目结构如下：

components/profile/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>
  }
}

components/friendList/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>
    );
  }
}

项目结构与模块入口 #

每个功能模块（如profile、login、friendList）均以index.js作为导入入口，文件夹结构如下：

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

排查与解决方法 #

从错误栈分析，问题根源并非你的React组件继承代码（组件中Component的导入和继承写法完全正确），而是web-streams-node依赖包的初始化异常，以下是针对性解决步骤：

1. 更新或锁定依赖版本
   web-streams-node与@comunica/bus-http可能存在版本不兼容问题，执行以下命令更新相关依赖：

   npm update web-streams-node @comunica/bus-http
   

   若更新后问题仍存在，尝试锁定web-streams-node到稳定版本：

   npm install web-streams-node@0.4.0 --save
   

2. 添加Streams API polyfill
   部分浏览器环境缺少标准Streams API实现，导致web-streams-node无法正常工作。安装并导入polyfill：

   npm install web-streams-polyfill --save
   

   在项目入口文件（如src/index.js）顶部添加：

   import 'web-streams-polyfill';
   

3. 清理缓存并重启项目
   webpack缓存可能导致依赖加载异常，执行以下命令清理缓存后重启：

   rm -rf node_modules/.cache
   npm start
   

4. 检查@solid/react兼容性
   @solid/react间接依赖web-streams-node，确认其版本与当前React版本兼容，若不兼容则更新：

   npm update @solid/react
   

内容的提问来源于stack exchange，提问作者Keydoo