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

[semihraifgurel]

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)

[loganpowell]

Got the same exact problem here! I think it's the .mjs extension (unsupported by typescript with CRA)

[mattgperry]

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

[Kripu77]

Having same issue

[yozi-developer]

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

[jwfwessels]

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)

[AndreaEsposit]

So as of now, the only solution to even be able to use framer-motion is to temper with CRA(if you are using CRA)?. Thant's a bummer, means that I can't use this library.

[loganpowell]

Thank you guys for looking into this! @jwfwessels have you tried CRA5?

[mattgperry]

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

[yozi-developer]

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

[Wa-lead]

Having the same issue here.

[justrealmilk]

Tried to configure a work around using CRACO and failed soooo back to 4.*

[dcakmak]

my setup as asked, was just a fresh project setup: "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "framer-motion": "^5.0.0" "node-sass": "^6.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", "styled-components": "^5.3.3", "web-vitals": "^1.1.2"

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

[frabcus]

I get the same error using this via Next.js

[kpjob555]

I also have this same issue

[yadprab]

me too facing the same

[titan3755]

same problem. Is there no way to fix it without downgrading framer-motion?

[justrealmilk]

@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

[Solo-Digital]

@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

[daxaxelrod]

@Solo-Digital Did you already have craco installed?

[Solo-Digital]

@Solo-Digital Did you already have craco installed?

Yes - Craco version 6.3.0 and Framer Motion 5.2.0

[wahidshafique]

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

[j-borg]

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

[granolocks]

👍 same issue on a rails app using the react-rails gem + webpacker

[technoplato]

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

[dcsan]

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?

[TK-Frontend]

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

This solved my problem in half. In addition I had to change eslint.json file to { "env": { "browser": true, "es2021": true }} Now eslint doesn't work, but I can use framer-motion. So I think the problem can be in eslint configuration.

[rami4625]

I got the same problem after upgrading from version 4.1.17 to version 5.3.0

[DaliborD45]

@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

[justrealmilk]

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;
    },
  }
}

[vmutlu]

Having same issue

[axelmarciano]

If you are using react-app-rewired, you can just add at the end of the override function in config-overrides.js :

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

[vmutlu]

no man this code is not working on blog unfortunately. I stopped using motion

[Wxld]

Can't solve the issue, tried everything that is told to do in comments.. help.. any alternative of framer?

[hamatoyogi]

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 🙏🏾

[Wxld]

@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

This worked for me, but now the tailwind is not working. All the styling has gone.

[aviiwithu]

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

[itjustbong]

i have same issue with my CRA and i got solution from link

[mattgperry]

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

[semihraifgurel]

Working with CRA 5

[bkiac]

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

[sgarcia-dev]

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?

[bluekingnfx]

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

[sgarcia-dev]

We aren't using react-scripts @bluekingnfx

[isc30]

this fixes it:

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

[channyeintun]

this fixes it:

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

Thanks. This solves my problem in nextjs project.

[thesmashten]

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.

[isc30]

@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