Cannot read property 'findHostInstance_DEPRECATED' of undefined

batical commented 3 years ago

Description

I upgrade from version 2.0.1 to 2.1.0 and got red screen with this message when launching the app TypeError: Cannot read property 'findHostInstance_DEPRECATED' of undefined

Expected behavior

Display the content off app Start the app.

Actual behavior & steps to reproduce

Error seems to come from navigation drawer. but was working on 2.0.1

Snack or minimal code example

Package versions

React Native: 0.64
React Native Reanimated:2.1.0
NodeJS:v12.10.0
Xcode: 12.4
Java & Gradle: did not try on android right now

Affected platforms

[ ] Android
[x] iOS

github-actions[bot] commented 3 years ago

Issue validator

The issue is valid!

jakub-gonet commented 3 years ago

Try removing all caches (node_modules, XCode cache, pods cache, etc)
Make sure you ran pod install after the update

Please show us an output of those commands:

grep -C 5 'function findHostInstance_DEPRECATED' node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js;
cat node_modules/react-native/Libraries/Renderer/shims/ReactNative.js

batical commented 3 years ago

I still have the issue. after doing the following

Clean all with

watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache- && rm -rf $TMPDIR/metro-bundler-cache- && yarn cache clean && rm -Rf ./node_modules
remove folder pods and podfile.lock (which I may have forgot when I tried the first time)
clean Xcode, remove all archive, derived data
pod deintegrate, remove pods folder, podfile

here is the content of the command

  };
}

var ReactCurrentOwner$3 = ReactSharedInternals.ReactCurrentOwner;

function findHostInstance_DEPRECATED(componentOrHandle) {
  {
    var owner = ReactCurrentOwner$3.current;

    if (owner !== null && owner.stateNode !== null) {
      if (!owner.stateNode._warnedAboutRefsInRender) {

I tried some strange thing after

revert to version "2.0.1" in package.json
yarn (without cleaning nothing)

WITHOUT doing a pod update or build, I managed to make it working and use one simple reanimated v2 animation :p

After that I clean , pod install , build with the correct version and it is also working

jakub-gonet commented 3 years ago

To sum it up - when you base on 2.0.1 it's working but after a clean install of 2.1.0 it throws this error in JS?

Are you able to provide a reproduction repo?

batical commented 3 years ago

Yes that's a summary. Even If I cheat using 2.1.0 native code with 2.0.1 js code :)

We are using a Monorepo (only yarn, without lerna or other tools) I cannot provide the repo I am working on(company). Not sure I will find extra extra hours to create a new reproductible one.

I will try on a fresh clean new Mac next week

batical commented 3 years ago

@jakub-gonet after multiple try etc. I managed to find the reason.

In my metro.config.js I had babelTransformerPath: require.resolve('react-native-typescript-transformer')

I don't remember the reason it is present and if we still need it. but without, it is working in my project

jakub-gonet commented 3 years ago

That's strange. RN's default babel config is adapted to compile TS files so using this transformer shouldn't be needed. Do you have heavily customized babel/metro config?

batical commented 3 years ago

I was not able to reproduce with the transformer in the simple awesome project (default RN and not a monorepo) while adding all my dependencies in it

the transformer was used for old version of RN as far as I remember. This sandbox with Reanimated2 is using 0.64 with Hermes

here is the metro.config (watch folder is for workspace)


const path = require('path')
module.exports = {
  watchFolders: [__dirname, path.resolve(__dirname, '../../')],
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true
      }
    })
    //babelTransformerPath: require.resolve('react-native-typescript-transformer')
  }
}

and the babel

module.exports = {
  presets: [
    [
      'module:metro-react-native-babel-preset',

    ]
  ],
  plugins: [
    ['@babel/plugin-external-helpers'],
    ['@babel/plugin-proposal-decorators', { legacy: true }],

    [
      'babel-plugin-module-resolver',
      {
        extensions: ['.ts', '.tsx', '.js', '.ios.js', '.android.js', '.ios.tsx', '.android.tsx', '.ios.ts', '.android.ts'],
        alias: {
          '@assets': './src/assets',
          '@design': './src/design',
          '@navigation': './src/navigation',
          '@containers': './src/containers',
          '@components': './src/components',
          '@hooks': './src/hooks',
          '@store': './src/store',
          '@services': './src/data/services',
          '@themes': './src/themes',
          '@utils': './src/utils'
        }
      }
    ], ['react-native-reanimated/plugin']
  ],
  env: {
    prod: {
      plugins: ['transform-remove-console']
    },
    production: {
      plugins: ['transform-remove-console']
    }
  }
}

jakub-gonet commented 3 years ago

You said that you removed metro caches. Have you tried running metro with --reset-cache flag? Between those two versions we also partially migrated to TS, could you share your tsconfig with us as well? Maybe tsc processes (or not processes but they should be, not sure here) reanimated's files.

batical commented 3 years ago

I have a clean command that remove all node_mdules in all workspace etc and doing also

watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && yarn cache clean

and starting with --reset-cache on the metro bunlder

I will provide the tsconfig there is in the folder mobile if it can help you.

{
  "compilerOptions": {
    "noEmit": true,
    "target": "ES2019",
    "allowJs": true,
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "lib": ["es6", "dom"],
    "jsx": "react",
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": false,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": false,
    "esModuleInterop": true,
    "strict": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "skipLibCheck": true,
    "strictNullChecks": true,
    "baseUrl": "./",
    "rootDirs": ["src"],
    "typeRoots": ["node_modules/@types", "../../node_modules/@types", "../types/dist"]
  },
  "composite": true,
  "include": ["src/**/*", "index.d.ts"],
  "exclude": [
    ...
  ]
}

piaskowyk commented 2 years ago

Could you try to use the latest version of Reanimated 2.3.1? If the problem still occurs feel free to reopen or notify me.

nitish24p commented 2 years ago

I am trying to run this with the following configs React Native: "0.63.5", React native reanimated: "2.4.0",

babelrc

{
    "presets": ["module:metro-react-native-babel-preset"],
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        "react-native-reanimated/plugin"
    ]
}

custom metro config

const blacklist = require('metro-config/src/defaults/blacklist')

module.exports = {
  resolver: {
    blacklistRE: blacklist([
      /node_modules\/.*\/node_modules\/react-native\/.*/,
    ]),
  },
  transformer: {
    babelTransformerPath: require.resolve(
      "react-native-typescript-transformer"
    ),
  },
};

Im still getting this issue, i cleared node modules and reran npm install. but im still getting the same issue.

Output of the above commands

  };
}

var ReactCurrentOwner$3 = ReactSharedInternals.ReactCurrentOwner;

function findHostInstance_DEPRECATED(componentOrHandle) {
  {
    var owner = ReactCurrentOwner$3.current;

    if (owner !== null && owner.stateNode !== null) {
      if (!owner.stateNode._warnedAboutRefsInRender) {

 /**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 * @flow
 */

'use strict';

import type {ReactNativeType} from './ReactNativeTypes';

let ReactNative;

if (__DEV__) {
  ReactNative = require('../implementations/ReactNativeRenderer-dev');
} else {
  ReactNative = require('../implementations/ReactNativeRenderer-prod');
}

module.exports = (ReactNative: ReactNativeType);

chj-damon commented 1 year ago

this issue happens again in react-native@0.72.3 and react-native-reanimated@3.4.0 you can try this repo to reproduce it: https://github.com/thundersdata-frontend/rn-template/tree/newArc-repo

wezter96 commented 11 months ago

@piaskowyk It seems like this issue still occurs, we are getting it with the following. Should I open a new issue for this or should we reopen this one? 😄 “expo”: “49.0.13", “react-native”: “0.72.5", “react-native-reanimated”: “3.5.4",

danielrhodes commented 10 months ago

Also seeing this. Same versions as above.

software-mansion / react-native-reanimated