[3.11.0] Plugin does not traverse node_modules, only the root of the project

[bimusiek]

Description

Hey, for past 2 days I am debuggin the integration of react-native-reanimated into our app. We had some issues with babel configuration, but finally I managed to make the plugin work with our configuration. However, when doing console.log from the inside of the plugin:

   visitor: {
      CallExpression: {
        enter(path, state) {
          if (!existingFileNames.has(this.file.opts.filename)) {
            existingFileNames.add(this.file.opts.filename);
            console.log(this.file.opts.filename);
          }
          runWithTaggedExceptions(() => {
            (0, autoworkletization_1.processCalleesAutoworkletizableCallbacks)(path, state);
            if (state.opts.substituteWebPlatformChecks) {
              (0, webOptimization_1.substituteWebCallExpression)(path);
            }
          });
        },
      },
      [types_1.WorkletizableFunction]: {
        enter(path, state) {
          if (!existingFileNames.has(this.file.opts.filename)) {
            existingFileNames.add(this.file.opts.filename);
            console.log(this.file.opts.filename);
          }
          runWithTaggedExceptions(() => {
            (0, workletSubstitution_1.processIfWithWorkletDirective)(path, state) ||
              (0, autoworkletization_1.processIfAutoworkletizableCallback)(path, state);
          });
        },
      },
      JSXAttribute: {
        enter(path, state) {
          runWithTaggedExceptions(() => (0, inlineStylesWarning_1.processInlineStylesWarning)(path, state));
        },
      },
    },

it only goes through our src dir. But not the node_modules/react-native-reanimated. When I do console.log from the babel custom transformer, it goes through all the files in the node modules.

Anyone has an idea how to make babel plugin go through node_modules as well?

Our metro config:

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const path = require("path");

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;
/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  resetCache: true,
  projectRoot: path.resolve(__dirname, './src/'),
  watchFolders: [
    path.resolve(__dirname, './node_modules/'),
    path.resolve(__dirname, '../node_modules'),
    path.resolve(__dirname, '../packages')
  ],
  transformer: {
    babelTransformerPath: require.resolve('./customTransformer.js'),
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: process.env.CONFIG_ENVIRONMENT === 'uitest' ? ['uitest.ts', 'uitest.tsx', ...sourceExts, 'svg'] : [...sourceExts, 'svg'],
    // blacklistRE: exclusionList([/electron\/.*/]),
  }
};
module.exports = mergeConfig(defaultConfig, config);

And our babel config:

module.exports = function (api) {
    api.cache(false);
    return {
        presets: ['module:@react-native/babel-preset'],
        plugins: ['react-native-reanimated/plugin']
    };
};

Steps to reproduce

n/a

Snack or a link to a repository

n/a

Reanimated version

3.11.0

React Native version

0.73.6

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[bimusiek]

Just for anyone looking for the same issue... babelrc file is limiting babel to only source files, does not touch node-modules

So remove this file and only rely on babel.config.js. And it has to be located in projectRoot so in our case inside the src file.