Any way to disable console warning?

[OlegWock]

So, I'm doing some stuff which framer motion doesn't really like and print a warning:

You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.

However, it all works fine, I tested it multiple times and it works well. Is there any way to get rid of this warning in console? I don't really want to change layout because of it

[oinochoe]

I'm also having the same issue, so I'm very curious.

[hajirasyafi]

I suggest wrap AnimatePresence inside layout

[l-portet]

Running into the same issue.

[danielpetho]

anyone found something on this?

[FrancescoMaca]

Sorry for the late reply. I was in a situation like this when I tried to roll-in and roll-out a changing text on my company website. After some time I found that the best and seems like only solution is to use:

console.warn = () => {}

This will override the warn method that throws warnings to an empty one, not making framer (or any other component) log any.
Useless saying that it's a bad idea. So I thought about this and you can still achieve the same result by having the warnings during development, and then when using it in production you can either change them from:

1 - Build Tool (recommended)

in a deployment pipeline you can use the build tool to drop the console.
i.e. using Terser (Webpack)

terserOptions: {
  compress: {
    drop_console: true,
  },
  ...
}

or NextJS

const nextConfig = {
  compiler: {
    removeConsole: true,
  },
  ...
};

2 - Pipeline

You could technically add the override dynamically but I don't really like this solution as it is very "dirty".

Hope that helps!

P.s. I haven't yet tried to switch the ENV="" variable to PRODUCTION/PROD to see if Motion still throws warnings in productions, but that could also be a viable option.