[BUG] 5.0 Failed to compile with create-react-app

Failed to compile.

./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs
Can't import the named export 'Children' from non EcmaScript module (only default export is available)

[jafin]

@justrealmilk I added the following to craco.config.js and it appears to work.

module.exports = {
  webpack: {
        configure: {
            module: {
                rules: [
                    {
                        type: 'javascript/auto',
                        test: /\.mjs$/,
                        include: /node_modules/,
                    },
                ],
            },
        },
    },
}

[github-user001]

I’m using NextJS fwiw and fixed the error by following @j-borg’s link and just wanted to make what the solution was explicit because webpack gives me nightmares and I feel like any time I’m fortunate enough to happen across a tip that works, I am eternally grateful.

In my project, I’ve got a .storybook directory at the root.

Within that directory, I have a file at .storybook/main.js. I just added the entry for the webpackFinal property of that file, so now it looks like so (the other stuff was already there)

module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],

  /// BELOW THIS WAS ADDED

  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      type: "javascript/auto",
      test: /\.mjs$/,
      include: /node_modules/,
    });

    // Return the altered config
    return config;
  },
};

  /// ABOVE THIS WAS ADDED