Import errors on web because of Framer Motion

[yekta]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

Using npx create-react-native-app -t with-moti, if I update to latest release versions of dependencies, I'm seeing "Can't import the named export XXX from non EcmaScript module" errors coming from ./node_modules/framer-motion/dist/es/....

Here are the dependencies:

 "dependencies": {
    "expo": "^46.0.0",
    "moti": "^0.18.0",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-native": "0.69.3",
    "react-native-reanimated": "~2.9.1",
    "react-native-web": "~0.18.7"
  }
  "devDependencies": {
    "@babel/core": "^7.18.6",
    "@expo/webpack-config": "^0.17.0",
  },

Expected Behavior

I expect to don't see import errors

Steps To Reproduce

1. Run npx create-react-native-app -t with-moti
2. Update the dependencies to the newest versions possible (Expo SDK 46 etc.)
3. Try running it on web

Versions

- Moti: 0.18.0
- Reanimated: 2.9.1
- React Native: 0.69.3

Screenshots

Reproduction

...

[ChronSyn]

Also experiencing this on Expo SDK 46. I believe I've got a possible workaround:

1: yarn add react-app-rewired
2: Update your webpack.config.js with the following:

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

3: expo start --clear --web

For example, I'm using Moti, Portal and BottomSheet by Gorhom, and this is what my webpack config looks like:

const createExpoWebpackConfigAsync = require("@expo/webpack-config");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: ["moti", "@motify", "@gorhom"],
      },
    },
    argv
  );
  config.module.rules.push({
    test: /\.mjs$/,
    include: /node_modules/,
    type: "javascript/auto",
  });

  return config;
};

I'm not sure if the @motify is needed or not, but I've left it in. This was test on Moti version 0.19.0-alpha.6

Credit to https://stackoverflow.com/a/64907659 for the suggestion on react-app-rewired.

[yekta]

Also experiencing this on Expo SDK 46. I believe I've got a possible workaround:

1: yarn add react-app-rewired 2: Update your webpack.config.js with the following:

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

3: expo start --clear --web

For example, I'm using Moti, Portal and BottomSheet by Gorhom, and this is what my webpack config looks like:

const createExpoWebpackConfigAsync = require("@expo/webpack-config");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: ["moti", "@motify", "@gorhom"],
      },
    },
    argv
  );
  config.module.rules.push({
    test: /\.mjs$/,
    include: /node_modules/,
    type: "javascript/auto",
  });

  return config;
};

I'm not sure if the @motify is needed or not, but I've left it in. This was test on Moti version 0.19.0-alpha.6

Credit to https://stackoverflow.com/a/64907659 for the suggestion on react-app-rewired.

This did the trick for me, thanks.

[nandorojo]

@motify is no longer needed for 0.19.x.

Please see the updated web docs with a solution.