Некоторые реагируют на код Lottie Animations, разбитый на загружаемый сбой при разработке Gatsby, но работают в продакшене.

В нашем проекте у нас есть около 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 и разделение кода / проблема с загрузкой реакции

но не похоже, что динамический импорт завершится ошибкой. Непонятная часть заключается в том, почему он вылетает только на некоторых анимациях, а другие работают нормально каждый раз. О.о

Не могли бы вы понять, что мне не хватает?

Спасибо за любые предложения!


reactjs gatsby lottie loadable-component
person Digital Dom    schedule 02.02.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не уверен, что это решит проблему, потому что я не знаю ни всех спецификаций, ни вашего варианта использования, но это 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
person Ferran Buireu    schedule 02.02.2021
comment
Спасибо, что заглянул, Ферран. :) Итак, в index.ts мы экспортируем 10 компонентов следующим образом: export {ExchangeInfographic, AnotherInfographic, AndAnotherInfographic} Я попытался экспортировать только неисправный, но он все равно вылетает. Спасибо за проявленный интерес :) Я помню вас по другим gatsby stackoverflow. :) - person Digital Dom; 02.02.2021
comment
Это работает без разделения кода? - person Ferran Buireu; 02.02.2021
comment
Он также не работает без разделения кода. O.o Так это исключит загружаемый, не так ли? Я даже проверял, возможно, эти файлы json как-то повреждены. Меня просто поражает, почему именно эти 2. Я проверил файлы по json-форматеру, и он показывает, что с файлом все в порядке. - person Digital Dom; 03.02.2021
comment
Да, титульный лист можно получить правильно, но Лотти может его неправильно истолковать. В любом случае, идея состоит в том, чтобы попробовать его с загружаемым, а затем применить разделение кода - person Ferran Buireu; 03.02.2021