运行npm start时无法解析react-infinite-scroller模块的解决方法

每次执行npm start都会报错，提示无法在当前目录找到'react-infinite-scroller'模块。已安装@types/react-infinite-scroller类型包，但React会在当前目录查找该包，而react-router-dom这类同方式导入的包却能正常从node_modules加载。

报错信息 #

ERROR in ./src/components/pages/ChatRoomShowPage.tsx 11:0-53
Module not found: Error: Can't resolve 'react-infinite-scroller' in '/Users/yuhaogao/workspace/matching_c2c/front/src/components/pages'

ChatRoomShowPage.tsx 代码 #

import { useContext, useEffect, useMemo, useState } from "react";
import "styles/pages/MyPage.css";
import ActionCable from "actioncable";
import { AuthContext } from "App";
import { useParams } from "react-router-dom";
import { getMessages } from "lib/api/calls";
import InfiniteScroll from "react-infinite-scroller";

export const ChatRoomShowPage = () => {
  const { currentUser } = useContext(AuthContext);
  // TODO 自分のメッセージは右で、それ以外の人のメッセージは左にする

  // const navigate = useNavigate();

  const { id } = useParams();
  // 最新のメッセージが先頭に来る
  const [receivedMessages, setReceivedMessages] = useState<Array<string>>([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [inputMessage, setInputMessage] = useState<string | undefined>();
  const [subscription, setSubscription] = useState<ActionCable.Channel>();
  const cable = useMemo(
    () => ActionCable.createConsumer("ws://localhost:3001/cable"),
    []
  );

  useEffect(() => {
    (async () => {
      const res = await getMessages(String(id), 1);
      setReceivedMessages((prevMessages) => prevMessages.concat(res.data));

      const sub = cable.subscriptions.create(
        { channel: "ChatChannel", chat_id: id },
        {
          received: (res) => {
            return setReceivedMessages(res.content);
          },
          broadcastMessage: (chatId: string, content: string) =>
            sub.perform("broadcast_message", {
              chat_id: chatId,
              content: content,
            }),
        }
      );
      setSubscription(sub);
    })();
  }, [cable, id]);

  const loadMore = async (_page: number) => {
    const res = await getMessages(String(id), _page);

    if (res.data.length < 1) {
      setHasMore(false);
      return;
    }
    setReceivedMessages((prevMessages) => [...prevMessages, ...res.data]);
  };

  // TODO pagination
  // スクロールするように
  // メッセージmarginを長くして

  const receivedMessagesTemplate = receivedMessages
    .reverse()
    .map((receivedMessage: any) => (
      <div style={{ margin: "2rem 0" }} key={receivedMessage.id}>
        {receivedMessage.content} {receivedMessage.createdAt}
      </div>
    ));

  const handleSubmit = async (e: React.MouseEvent<HTMLInputElement>) => {
    e.preventDefault();

    subscription?.perform("broadcast_message", {
      chat_id: "1",
      content: inputMessage,
    });
  };

  return (
    <div>
      <h2>チャットルーム</h2>

      <div style={{ height: "500px", overflow: "scroll" }}>
        <InfiniteScroll
          loadMore={loadMore}
          hasMore={hasMore}
          // loader={loader}
        >
          {receivedMessagesTemplate}
        </InfiniteScroll>
      </div>

      <form>
        <input
          type="textarea"
          id="message-input"
          placeholder="入力欄"
          onChange={(event) => setInputMessage(event.target.value)}
        />

        <input type="submit" value="送信" onClick={handleSubmit} />
      </form>
    </div>
  );
};

tsconfig.json 配置 #

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src"
  },
  "include": ["src"]
}

解决方案 #

1. 安装核心包而非仅类型包
   你只安装了类型定义包@types/react-infinite-scroller，但缺少实际运行需要的react-infinite-scroller核心包。执行以下命令安装：

npm install react-infinite-scroller

类型包仅用于TypeScript的类型提示，运行时必须依赖核心包的代码。

2. 检查baseUrl的解析影响（可选）
   你的tsconfig.json设置了baseUrl: "src"，会让模块解析优先从src目录查找。如果安装核心包后仍有问题：

• 确认node_modules目录下存在react-infinite-scroller文件夹
• 暂时注释baseUrl配置，重启开发服务测试是否恢复正常
• 若必须保留baseUrl，可在compilerOptions中添加paths配置明确指定包的查找路径：

"paths": {
  "react-infinite-scroller": ["../node_modules/react-infinite-scroller"]
}

3. 清理缓存并重启服务
   安装完成后，清理npm缓存并重启开发服务器：

npm cache clean --force
npm start

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