framer-motion with storybook error in build environment

Question

I'm building a UI library.

Is there anyone use framer-motion with storybook?

It works fine in storybook, but an error occurs in build environment.

Some people recommend downgrade but it doesn't work for me.

Does anyone have a problem similar to mine?

Answer 1

Running in to the same issue here. I think it's due to the new version of Framer-motion not being compatible with certain tools. I will debug today and let you know if i am able to find a solution.

Edit

Got it working! Add the following to your .storybook/main.js file

module.exports = {
  // Any existing rules
  ...

  // The fix
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto",
    });
    return config;
  }
}