[英]Some react Lottie Animations code-splitted with loadable crash on Gatsby development but work in prod
in our project we have around 10 animations that are using react-lottie library and are loaded with loadable-component library.在我们的项目中,我们有大约 10 个使用 react-lottie 库并加载了可加载组件库的动画。 Some of these animations are crashing on Gatsby development environment.
其中一些动画在 Gatsby 开发环境中崩溃。 I have managed to narrow down which ones are failing on my end and there were 2.
我设法缩小了我失败的范围,有 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我检查了此错误消息的可能原因并找到了此线程: https://github.com/facebook/react/issues/13445和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.
令人困惑的部分是,为什么它只会在某些动画上崩溃而其他动画每次都能正常工作。 Oo
哦
Would you have an idea what am I missing?你知道我错过了什么吗?
Thanks for any suggestions!感谢您的任何建议!
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:我不确定它是否能解决问题,因为我不知道所有规格或您的用例,但这个
export
对我来说似乎很奇怪:
@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
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
ExchangeInfographic React 组件的文件名类似于
ExchangeInfographic.tsx
The json file containing json for the lottie animation had a file name like this exchangeInfographic.json
包含 json 的 json 文件包含 lottie animation 的文件名如下
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出于某种原因,当像这样导入组件后 json 文件和反应组件文件的名称相同(反应组件的大写字母除外)
import {ExchangeInfographic} from 'path to the file;'
It would return an object instead of function.它会返回 object 而不是 function。
To fix it, I just changed the name of the file where json was to for example exchange.json
为了修复它,我只是将 json 所在的文件的名称更改为例如
exchange.json
It's a kind of magic.这是一种魔法。 It's a kind of maaagiiic...
这是一种 maaagiiic...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.