You're using <LazyMotion>
in strict mode. Strict mode means it will throw an error if it detects a <motion />
component being rendered anywhere within it (instead of an <m />
component).
Explanation
<m />
is a minimal version of the <motion />
component that comes without any of the animation or gesture functionality usually provided by <motion />
.
This means it has a far smaller bundlesize. The desired functionality is then passed in via <LazyMotion />
either synchronously or asynchonrously. So animation code can be loaded more efficiently than other critical UI code.
But, if a <motion />
component is rendered anywhere within this component then it's likely (but not certain) that this has imported all that functionality itself, removing the bundlesize benefits of using <LazyMotion />
.
Solutions
Use an m
component
The obvious fix is by changing <motion />
to <m />
, as instructed. This can be difficult or impossible if the <motion />
component has been imported by a third-party. You could request that the third-party provide a version of the component that uses the <m />
component instead.
Disable strict mode
Strict mode is good for safety but can be overzealous. For instance, if this <motion />
component has been rendered within a component that was itself lazily-loaded, then that is hard for <LazyMotion />
to detect but actually points to a performant loading strategy.
Ignore strict mode
By passing ignoreStrict
to the <motion />
component, this error can be turned into a warning.