Can't import the named export 'Children' from non EcmaScript module

[designbyadrian]

This is an issue with framer-motion running on certain setups including Create React App, NextJS, and Storybook.

The issue is more explained here: motiondivision/motion#1307, but I'd like to leave a report here because I think something needs to be adressed in this repo.

[Eric-Canas]

In Create React App 5 it is no longer an Issue. If you have a project created with a previous version just try to update react-scripts, it solved the problem for me.

npm install react-scripts@5.0.0

[prxg22]

I was able to fix this by adding gatsby-node.js at the root of my project and the following rule on the webpack:

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto',
        },
      ],
    },
  })
}