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

@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/,
                    },
                ],
            },
        },
    },
}

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

I get the same error using this via Next.js

@AndreaEsposit You can still use 4.1.17, you just won’t get the drag-to-reorder components.

https://www.framer.com/docs/guide-upgrade/#%23esm-and-create-react-app https://github.com/facebook/create-react-app/issues/10356

We are looking at a fix but it might be in CRA. Let’s track it in this ticket

I am getting this error when trying to run storybook 6.3.12 and framer 5.2.1

I was able to fix it by patching CRA https://github.com/formatjs/formatjs/issues/1395#issuecomment-518823361

After testing a bit it seems that the issue is with how CRA handles ESM dependencies and more particularly transitive dependencies are not handled correctly it seems. There is also an outstanding issue with CRA about this https://github.com/facebook/create-react-app/issues/10356.

Options:

1. This is ‘fixed’/doesn’t break in the next version of CRA which you can try today (https://github.com/facebook/create-react-app/discussions/11278) take note though its still in alpha.

2. You can patch CRA to get around the issue as described in a number of tickets from other libraries

• https://github.com/formatjs/formatjs/issues/1395#issuecomment-518823361
• https://github.com/reactioncommerce/reaction-component-library/issues/399#issuecomment-467860022 (also mentioned by @yozi-developer above)

BTW: the issue exists with Storybook@6.3.12 too, can be overcome using webpackFinal and https://github.com/framer/motion/issues/1307#issuecomment-953621828

Update your react scripts, npm install react-scripts@latest

I believe this will fix CRA https://github.com/facebook/create-react-app/releases/tag/v5.0.0

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

This worked for me. Also on a NextJS app. Thanks @github-user001 🙏🏾

Lol I broke my entire project trying to add framer-motion. My advice: don’t bother. Get good at CSS animations, the clowns at framer motion have no clue what they’re doing and their stuff only works in their perfect little sandbox display online.

this fixes it:

    webpackConfig.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto',
    })
    webpackConfig.resolve.extensions.push('.mjs')

I still have this issue with @chakra-ui/react@1.7.3, framer-motion@5.6.0, storybook-react@6.4.14 and @chakra-ui/storybook-addon@1.0.1

@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/,
                    },
                ],
            },
        },
    },
}

this works for me as well

I don’t even want to use framer but chakra-ui seems to depend on it, so CRA broke chakra-ui it seems. and that bug is from 2019. https://github.com/formatjs/formatjs/issues/1395#issuecomment-518823361

do we really need to battle with craco to get any progress?

I am getting this error when trying to run storybook 6.3.12 and framer 5.2.1

Same here when running a Storybook build. @jafin 's solution worked for us though. Added the mjs rule to the webpackFinal config in Storybook https://storybook.js.org/docs/react/configure/webpack#extending-storybooks-webpack-config

@Solo-Digital Did you already have craco installed?

Yes - Craco version 6.3.0 and Framer Motion 5.2.0

@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/,

                    },

                ],

            },

        },

    },

}

Weirdly didn’t work for me

It worked for me

I also have this same issue

@thesmashten framer-motion is an awesome project and follows the latest standards in ESM. If you can’t get it to run, look at yourself

We aren’t using react-scripts @bluekingnfx

Having this issue on a Webpack v4.43.x (no CRA) install, none of the fixes appear to work besides downgrading to v4.1.x . Perhaps we shouldn’t close this issue until a new version of framer-motion arrives which solves this issue without requiring patches/updates to other tooling?

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)

Getting the same issue when installed with framer-motion@5.3.3.

To solve this issue and work without error, it is recommended to install framer-motion@4.1.17.

Check this link: https://www.framer.com/docs/guide-upgrade/##esm-and-create-react-app

Having same issue

I have a more complex CRACO config. For anyone using a configure function, this is it

module.exports = {
  webpack: {
    configure: function (webpackConfig) {
      const locales = {
        type: 'javascript/auto',
        test: /\.json/,
        include: /src(\/|\\)locales/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: whenProd(() => '[name].[contenthash:8].[ext]', '[name].[ext]'),
              outputPath: (url, resourcePath, context) => {
                const lng = resourcePath.replace(/\\/g, '/').match(/locales\/(.+)\/translation.json/)[1];

                return `static/locales/${lng}/${url}`;
              },
            },
          },
        ],
      };

      addBeforeLoader(webpackConfig, loaderByName('file-loader'), locales);

      // *********************
      webpackConfig.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      });
      // *********************

      return webpackConfig;
    },
  }
}

@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/,

                    },

                ],

            },

        },

    },

}

Weirdly didn’t work for me

me too facing the same