Documentation

Documentation

Error

Lazy strict mode

Lazy strict mode

You've received the following message:

ou have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.

Lazy strict mode

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.

<motion.dev ignoreStrict />

Level up your animations with Motion+

Access to 100+ premium examples, exclusive APIs like Cursor, private Discord and GitHub, and powerful VS Code animation editing tools.

One-time payment, lifetime updates.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.