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

Question

在我们的项目中，我们有大约 10 个使用 react-lottie 库并加载了 loadable-component 库的动画。其中一些动画在 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 和

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

你知道我错过了什么吗？

感谢任何建议！

Answer 1

我不确定它是否会解决这个问题，因为我不知道所有的规格，也不知道你的用例，但是这个 export 对我来说似乎很奇怪：

@index.tsx

import loadable from '@loadable/component';

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

export {
  ExchangeInfographic
};

你有没有尝试过类似的东西：

@index.tsx

import loadable from '@loadable/component';

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

export ExchangeInfographic

Answer 2

所以几个月后我决定再次尝试解决这个奇怪的错误。

问题说明：

ExchangeInfographic React 组件有一个这样的文件名ExchangeInfographic.tsx

包含 lottie 动画 json 的 json 文件的文件名如下 exchangeInfographic.json

由于某些原因，当像这样导入组件后 json 文件和 React 组件文件的名称相同（除了 React 组件的大写字母）

import {ExchangeInfographic} from 'path to the file;'

它将return一个对象而不是函数。

为了修复它，我只是将 json 所在的文件的名称更改为例如 exchange.json

这是一种魔法。这是一种 maaagiiic...

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

Some react Lottie Animations code-splitted with loadable crash on Gatsby development but work in prod

reactjs

gatsby

lottie

loadable-component