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

Question

in our project we have around 10 animations that are using react-lottie library and are loaded with loadable-component library. Some of these animations are crashing on Gatsby development environment. I have managed to narrow down which ones are failing on my end and there were 2.

The component is built like this:

@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} />
);

Then we use code splitting:

@index.tsx

import loadable from '@loadable/component';

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

export {
  ExchangeInfographic
};

Then we import the component into the module like this:

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;

The error that I get in the console is:

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`.

I have check the possible reasons for this error message and found this thread: https://github.com/facebook/react/issues/13445 and Code splitting/react-loadable issue

but it doesn't look as if the dynamic import would fail. The confusing part is that, why would it only crash on some animations and the other work fine every time. O.o

Would you have an idea what am I missing?

Thanks for any suggestions!

Answer 1

So after few months I decided to give it another try at this weird bug.

Explanation of the issue:

ExchangeInfographic react component had a file name like this ExchangeInfographic.tsx

The json file containing json for the lottie animation had a file name like this exchangeInfographic.json

For some reason when the name of the json file and react component file was the same (except for capital letter for react component) after importing the component like this

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

It would return an object instead of function.

To fix it, I just changed the name of the file where json was to for example exchange.json

It's a kind of magic. It's a kind of maaagiiic...

Answer 2

I'm not sure if it will fix the issue because I don't know all the specs nor your use-case, but this export seems odd to me:

@index.tsx

import loadable from '@loadable/component';

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

export {
  ExchangeInfographic
};

Have you tried something like:

@index.tsx

import loadable from '@loadable/component';

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

export ExchangeInfographic