一些反应 Lottie Animations 代码拆分与 Gatsby 开发中的可加载崩溃但在生产中工作

编程问答 2022-05-27

问题描述

在我们的项目中，我们有大约 10 个使用 react-lottie 库并加载了可加载组件库的动画。其中一些动画在 Gatsby 开发环境中崩溃。我设法缩小了哪些失败的范围，有 2 个。

组件是这样构建的：

@LottieComponent.tsx
import React,{ CSSProperties } from 'react';
import Lottie from 'lottie-react';
import json from './lottieAnimation.json';

interface Props {
  styles?: CSSProperties;
}

export default ({ styles }: Props) => (
  <Lottie style={styles} animationData={json} />
);

然后我们使用代码拆分：

@index.tsx

import loadable from '@loadable/component';

const ExchangeInfographic = loadable(
  () => import('./animationComponents/ExchangeGraphic')
);

export {
  ExchangeInfographic
};

然后我们像这样将组件导入到模块中：

import { ExchangeInfographic } from '../../components/Infographic';

const ExampleComponent = () => {
  const [animationWasRendered,setAnimationWasRendered] = useState(false);
  return (
    <ReactVisibilitySensor
      onChange={(isVisible) => {
        isVisible && setAnimationWasRendered(true);
      }}
      partialVisibility
    >
      <SectionCustomComponent>
        <Container>
            <Col>
              {animationWasRendered ? <ExchangeInfographic /> : <></>}
            </Col>
          </Row>
        </Container>
      </Section>
    </ReactVisibilitySensor>
  );
};
export default ExampleComponent;

我在控制台中得到的错误是：

react-dom.development.js:23966 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `InnerLoadable`.

我检查了此错误消息的可能原因并找到了这个线程： https://github.com/facebook/react/issues/13445 和 Code splitting/react-loadable issue

但看起来动态导入不会失败。令人困惑的部分是，为什么它只会在某些动画上崩溃而其他动画每次都能正常工作。哦

你知道我错过了什么吗？

感谢您的任何建议！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

gatsbyloadable-componentlottiereactjsreactjs