React引入svelte-carousel报InvalidCharacterError无效字符错误如何解决？

云原生阿岚

2026-10-7

错误原因

核心框架不兼容：svelte-carousel是专为Svelte框架开发的组件库，输出的是Svelte组件格式的代码，本身不支持React的JSX语法和组件渲染逻辑，直接在React项目中导入使用就会触发字符解析报错。
报错触发逻辑：React的编译工具（比如Babel、Vite内置转译器）在解析Svelte组件特有的语法标记时，无法识别Svelte专属的模板语法字符，就会抛出InvalidCharacterError: String contains an invalid character错误。

解决方法

可根据场景二选一：

方案1：更换为React生态的轮播组件（推荐）

选择React生态下成熟的轮播库替代，比如react-slick、antd/es/carousel（如果项目已接入Ant Design）、react-responsive-carousel，以下是用react-slick替代的完整示例：

先卸载错误安装的依赖：
npm uninstall svelte-carousel -D
安装react-slick及配套样式依赖：
npm install react-slick slick-carousel -S
替换footer.js代码：

import React from 'react';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";

export default function Footer() {
    const settings = {
      autoplay: true,
      autoplaySpeed: 5000,
      pauseOnFocus: true,
      arrows: false,
    };
    return (
        <div className="c-footer">
            <div className="c-slider-container">
                <Slider {...settings}>
                    <div>Some div</div>
                    <div>Some div2</div>
                    <div>Some div3</div>
                </Slider>
            </div>
            <div className="c-gold-container">
            </div>
            <div className="c-contact-container">
            </div>
        </div>
    );
}