React使用ListGroup组件遇Module not found错误，求原因排查

你的代码里存在拼写错误，这是ListGroup组件报错的直接原因：

• 所有导入语句里的 react-bootstarp 都少写了一个字母 r，正确的包名是 react-bootstrap

修复后的ProductList组件代码 #

import React from 'react'
// 修正包名拼写错误
import ListGroup from 'react-bootstrap/ListGroup';

function ProductList() {
    return(
        <>
          <div className="list-container">
            <div className="header">
                <h3>Products</h3>
            </div>
            <div className="panel"> {/* React中需用className替代原生class属性 */}
                <ListGroup>
                    <ListGroup.Item>Oppo F9 Pro</ListGroup.Item>
                    <ListGroup.Item>Samsung Galaxy A1</ListGroup.Item>
                    <ListGroup.Item>Lava Lite Pro</ListGroup.Item>
                    <ListGroup.Item>Sony Xperia Lite</ListGroup.Item>
                    <ListGroup.Item>iPhone 13 Pro</ListGroup.Item>
                </ListGroup>
            </div>
          </div>
        </>
    )
}

export default ProductList;

额外补充细节 #

1. React元素的类名属性必须使用className，不能用原生HTML的class，代码中<div class="panel">需同步修正
2. 若使用命名导入方式，同样要保证包名拼写正确：import { ListGroup } from 'react-bootstrap';

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