Cannot read properties of undefined (reading 'constantViolations')

[johnnywang]

Since no one else has been reporting this, I imagine I'm doing something wrong with my setup, so asking as a question instead of opening up as an issue. Our RN app (bare/ejected Expo 47 workflow, RN 0.70.5) works fine on Reanimated 2.x.x. I'm trying to upgrade a bunch of packages in preparation for an Expo 49 + RN 0.71 upgrade though, and the moment I upgrade Reanimated to 3.x.x, I start running into this error when running tests, or when running the app itself:

    TypeError: /mobile/node_modules/react-native-reanimated/lib/module/reanimated2/core.js: Cannot read properties of undefined (reading 'constantViolations')

      at constantViolations (node_modules/@babel/plugin-transform-block-scoping/src/validation.ts:29:35)
      at disallowConstantViolations (node_modules/@babel/plugin-transform-block-scoping/src/validation.ts:17:7)
      at transformBlockScopedVariable (node_modules/@babel/plugin-transform-block-scoping/src/index.ts:166:40)
      at PluginPass.transformBlockScopedVariable (node_modules/@babel/plugin-transform-block-scoping/src/index.ts:121:11)
          at transformFile.next (<anonymous>)
          at run.next (<anonymous>)
          at transform.next (<anonymous>)
      at evaluateSync (node_modules/gensync/index.js:251:28)
      at sync (node_modules/gensync/index.js:89:14)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:619:31)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:765:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:822:19)
      at Object.require (node_modules/react-native-reanimated/lib/module/ConfigHelper.ts:1:1)
      at Object.require (node_modules/react-native-reanimated/lib/module/Animated.ts:14:1)
      at Object.require (node_modules/react-native-reanimated/lib/module/index.ts:1:1)

The only reference I see online is about Babel versions being wrong, but looking at the peer dependencies for Reanimated, as well as the setup instructions, I seem to be in sync. Some of the relevant parts of my setup below:

package.json (subset of my packages)

"dependencies": {
    "@babel/runtime": "7.22.5",
    "@expo/config-plugins": "5.0.4",
    "@expo/prebuild-config": "5.0.7",
    "babel-plugin-module-resolver": "4.1.0",
    "expo": "47.0.9",
    "expo-application": "5.0.1",
    "expo-av": "13.0.2",
    "expo-constants": "14.0.2",
    "expo-device": "5.0.0",
    "expo-file-system": "15.1.1",
    "expo-font": "11.0.1",
    "expo-haptics": "12.0.1",
    "expo-image-picker": "14.0.2",
    "expo-splash-screen": "0.17.5",
    "expo-updates": "0.16.3",
    "metro-config": "0.70.3",
    "metro-react-native-babel-preset": "0.70.3",
    "react": "18.1.0",
    "react-native": "0.70.5",
    "react-native-gesture-handler": "2.8.0",
    "react-native-reanimated": "3.4.2"
  },
  "devDependencies": {
    "@babel/core": "7.20.7",
    "@babel/plugin-proposal-export-default-from": "7.18.10",
    "@babel/plugin-proposal-export-namespace-from": "7.18.9",
    "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
    "@babel/plugin-proposal-optional-chaining": "7.21.0",
    "@babel/plugin-proposal-private-property-in-object": "7.20.5",
    "@babel/plugin-transform-arrow-functions": "7.22.5",
    "@babel/plugin-transform-shorthand-properties": "7.22.5",
    "@babel/plugin-transform-template-literals": "7.22.5",
    "@babel/preset-typescript": "7.18.6",
    "@testing-library/jest-native": "5.4.0",
    "@testing-library/react-native": "11.5.0",
    "@tsconfig/react-native": "2.0.3",
    "@typescript-eslint/eslint-plugin": "5.47.1",
    "@typescript-eslint/parser": "5.47.1",
    "@typescript-eslint/typescript-estree": "5.47.1",
    "babel-eslint": "10.1.0",
    "babel-plugin-dynamic-import-node": "2.3.3",
    "babel-plugin-inline-import": "3.0.0",
    "babel-plugin-transform-inline-environment-variables": "0.4.4",
    "babel-plugin-transform-remove-console": "6.9.4",
    "babel-preset-expo": "^9.5.2",
    "eslint": "8.38.0",
    "eslint-import-resolver-babel-module": "5.3.2",
    "eslint-plugin-detox": "1.0.0",
    "eslint-plugin-import": "2.28.1",
    "eslint-plugin-jsx-a11y": "6.7.1",
    "eslint-plugin-react": "7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-native": "4.0.0",
    "eslint-plugin-unused-imports": "2.0.0",
    "expo-cli": "6.0.8",
    "jest": "28.1.3",
    "jest-circus": "26.6.3",
    "jest-expo": "47.0.1",
    "metro": "0.70.3",
    "patch-package": "6.5.0",
    "pod-install": "0.1.38",
    "prettier": "2.8.1",
    "tslint": "6.1.3",
    "typescript": "4.9.5"
  },

jest.config.js

const rntlPreset = require('@testing-library/react-native/jest-preset');
const expoPreset = require('jest-expo/jest-preset');

const mergedPresets = {
  ...expoPreset,
  setupFiles: expoPreset.setupFiles.concat(rntlPreset.setupFiles),
};

module.exports = {
  ...mergedPresets,
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  preset: '@testing-library/react-native',
  setupFilesAfterEnv: ['./src/setupTests.ts'],
  transformIgnorePatterns: ['^.+\\.module\\.(css|sass|scss)$'],
};

babel.config.js

module.exports = function config(api) {
  api.cache(true);

  const testOnlyConfig = { plugins: [] };
  if (process.env.NODE_ENV === 'test') {
    testOnlyConfig.plugins = ['dynamic-import-node'];
  }

  return {
    env: {
      production: {
        plugins: ['transform-remove-console'],
      },
    },
    plugins: [
      ...testOnlyConfig.plugins,
      '@babel/plugin-proposal-export-default-from',
      // '@babel/plugin-proposal-export-namespace-from',
      // ['@babel/plugin-transform-private-methods', { loose: true }],
      'react-native-reanimated/plugin', // Must be listed last
    ],
    presets: [
      ['babel-preset-expo', { targets: { node: 'current' } }],
      '@babel/preset-typescript',
      'module:metro-react-native-babel-preset',
    ],
  };
};

setupTests.ts
Contains a bunch of stuff, but of relevance:

import { setUpTests } from 'react-native-reanimated';
// It's unclear if we need to mock these out or not: https://github.com/software-mansion/react-native-reanimated/issues/3982
// jest.mock('react-native-reanimated', () => mockReanimated);
// https://github.com/th3rdwave/react-native-safe-area-context#testing
setUpTests();

A lot of the errors will go away if I stop including the setUpTests call, but not all of them, and that doesn't resolve the runtime issues itself