react-background-slider无法运行，出现React.jsx类型无效警告

报错原因 #

你遇到的type is invalid -- expected a string or a class/function but got: object错误，本质是导入的BackgroundSlider不是有效的React组件，而是普通对象，通常是导入方式与组件实际导出方式不匹配导致的。

解决方案 #

1. 修正导入方式 #

该组件通常为命名导出，将导入代码改为命名导入即可：

import { BackgroundSlider } from "react-background-slider";

2. 验证组件有效性 #

若修改导入后仍报错，可打印导入内容确认结构：

import * as SliderModule from "react-background-slider";
console.log(SliderModule); // 查看模块所有导出项

如果输出结果里存在BackgroundSlider属性，就用命名导入；若只有default属性，则用默认导入import BackgroundSlider from "react-background-slider";。

3. 重装库文件（版本问题备用） #

若上述方法无效，可能是库版本或安装文件损坏，尝试重装：

npm uninstall react-background-slider
npm install react-background-slider

修正后的示例代码 #

import { BackgroundSlider } from "react-background-slider";

import slider1 from "../../../assets/background-page1.jpg";
import slider2 from "../../../assets/background-page2.jpg";
import slider4 from "../../../assets/background-page3.jpg";

const Slider = () => {
  return (
    <div>
      <BackgroundSlider
        images={[slider1, slider2, slider4]}
        duration={10}
        transition={2}
      />
    </div>
  );
};

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