How do I make the babel plugin apply to node_modules?

[nandorojo]

Hi there, I'm the author of Moti, a framer-motion-like library based on Reanimated 2.

We're having an issue here where Moti is not working on Expo web.

The problem

The problem is, Moti uses useAnimatedStyle from Reanimated under the hood. However, Reanimated's babel plugin is not applying to Moti, presumably since node_modules are ignored by Babel.

Is there a way I can include node_modules/@motify/core and node_modules/moti in Reanimated's babel plugin so that the plugin works properly?

Workaround

Currently, I've fixed it by using babel-loader in webpack.config.js:

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

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  config.module.rules.push({
    test: /\.(js|ts|tsx)$/,
    exclude: /node_modules\/(?!(moti|@motify)\/).*/,
    use: "babel-loader",
  });

  return config;
};

I have a feeling this isn't the right solution, but I don't really know my way around Webpack/Babel.

Any help here would be greatly appreciated, thanks!

Added context

I'm using Bob to compile Moti, and it looks like the lib/module folder is what Expo uses on Web.

[nandorojo]

I found the right answer, thanks to the @expo/webpack-config docs:

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

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: { dangerouslyAddModulePathsToTranspile: ["moti"] },
    },
    argv
  );

  return config;
};

Expo lets you pass a custom set of node modules to transpile with dangerouslyAddModulePathsToTranspile, so that did it!

[IlyaTaidi]

This solution might now work anymore. Default Expo/Moti setup throwing module not found errors in web view linked repo
https://github.com/IlyaTaidi/motiPl2