upgrade-support icon indicating copy to clipboard operation
upgrade-support copied to clipboard

[0.62.1] Module RCTLog is not a registered callable module (calling logIfNoNativeHook)

Open jesster2k10 opened this issue 5 years ago • 17 comments

Environment

System:
    OS: macOS 10.15.1
    CPU: (4) x64 Intel(R) Core(TM) i5-4570R CPU @ 2.70GHz
    Memory: 193.41 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.13.0 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.12.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.8.4 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6241897
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  Languages:
    Java: 13.0.2 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.1 => 0.62.1 
  npmGlobalPackages:
    *react-native*: Not Found

Upgrading version

Upgrading from 0.61.5 -> 0.62.1

Description

I followed all of the guides regarding the upgrade and got this issue. I tried to solve it by creating a new typescript project on version 0.62.1 and copying all my code over, however, the error still remains.

In the JS console there are several other similar issues shown like so:

Screenshot 2020-04-08 at 15 46 58

It's worth nothing that hot refresh does not work either for some reason. This issue did not exist before upgrading to 0.62.1. I downgraded to 0.62.0 also but to now avail

Reproducible demo

App.tsx

import React from 'react'
import {RelayEnvironmentProvider} from 'relay-hooks'
import {Provider} from 'react-redux'
import store, {persistor} from './redux/store'
import environment from './relay/environment'

const App = () => {
  return (
    <Provider store={store}>
      <RelayEnvironmentProvider environment={environment}>
        <></>
      </RelayEnvironmentProvider>
    </Provider>
  )
}

Podfile

platform :ios, '10.3'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
inhibit_all_warnings!

def add_flipper_pods!
  version = '~> 0.33.1'
  pod 'FlipperKit', version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitLayoutPlugin', version, :configuration => 'Debug'
  pod 'FlipperKit/SKIOSNetworkPlugin', version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitUserDefaultsPlugin', version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitReactPlugin', version, :configuration => 'Debug'
end

# Post Install processing for Flipper
def flipper_post_install(installer)
  installer.pods_project.targets.each do |target|
    if target.name == 'YogaKit'
      target.build_configurations.each do |config|
        config.build_settings['SWIFT_VERSION'] = '4.1'
      end
    end
  end
end

target 'murch' do
  # Pods for murch
  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/'
  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'ReactCommon/callinvoker', :path => "../node_modules/react-native/ReactCommon"
  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga', :modular_headers => true

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

  target 'murchTests' do
    inherit! :complete
    # Pods for testing
  end

  use_native_modules!
  
  pod 'SVProgressHUD'

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable these next few lines.
  add_flipper_pods!
  post_install do |installer|
    flipper_post_install(installer)
  end
end

target 'murch-tvOS' do
  # Pods for murch-tvOS

  target 'murch-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end
end

Screenshots

Simulator Screen Shot - iPhone 11 - 2020-04-08 at 15 48 56

What I've tried

  • Copying my code into a new project
  • Clearing Xcode cache
  • rm -rf node_moduels && yarn
  • react-native start --reset-cache

jesster2k10 avatar Apr 08 '20 14:04 jesster2k10

@jesster2k10 I'm seeing this error as well, did you manage to fix this?

alexbrazier avatar May 11 '20 18:05 alexbrazier

@jesster2k10 I'm seeing this error as well, did you manage to fix this?

The only solution i’ve found was to not upgrade unfortunately. I don’t know what’s causing the issue, and it seems to only exist in that code base and i haven’t been able to get any support online.

jesster2k10 avatar May 11 '20 18:05 jesster2k10

I managed to get this working in the end. It was caused by one of our internal libraries we were using - I didn't have a chance to work out what part was causing the issue, but we didn't actually need it, so I ended up replacing it.

The way you can find the error is by starting at your root file such as App.ts or index.ts and comment out the main app and replace with a stub such as <Text>Hello</Text>, then if that renders you can start re-enabling stuff until it crashes again, which will help you find the cause.

alexbrazier avatar May 20 '20 20:05 alexbrazier

Hey, glad to hear you got it working. I’ve over 50k SLOC in my project, about 32 screens and dozens of dependencies. It would take me forever to do that, so I think I’ll continue to wait it out until most of my packages require updating and hopefully the issue might be resolved by then. I tried to update as soon as the update came out, which my have its shortfalls.

On 20 May 2020, at 21:07, Alex Brazier [email protected] wrote:

I managed to get this working in the end. It was caused by one of our internal libraries we were using - I didn't have a chance to work out what part was causing the issue, but we didn't actually need it, so I ended up replacing it.

The way you can find the error is by starting at your root file such as App.ts or index.ts and comment out the main app and replace with a stub such as <Text>Hello</Text>, then if that renders you can start re-enabling stuff until it crashes again, which will help you find the cause.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/react-native-community/upgrade-support/issues/47#issuecomment-631697791, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABRHYDTXGJ7MDDYNDC2FJ3TRSQZ6ZANCNFSM4MD7VFBA.

jesster2k10 avatar May 20 '20 20:05 jesster2k10

have you finish it ? @jesster2k10 i have same error

97thjingba avatar May 26 '20 03:05 97thjingba

@jesster2k10 I have solve this problem ... it looks like something libraries upgrade Cause

97thjingba avatar May 26 '20 05:05 97thjingba

I was experiencing this problem. In my case, I had run yarn in the root folder of my native module project (unnecessarily). For some reason, the presence of the node_modules folder at the root prevented the example app from running properly. If I removed the root node_modules folder, the app ran correctly.

jules15 avatar Jun 03 '20 00:06 jules15

have the same issue. So far not been able to solve it. No idea what is causing this error. My app was working perfectly one day. Went to sleep and did not change ANYTHING, re-ran my app and I got this error. Why am I always spending more time debugging tooling with react-native than ACTUALLY programming? This is very frustrating...

ChannelJuanNews avatar Jun 15 '20 06:06 ChannelJuanNews

Very frustrating for me also this one

ZiggStardust avatar Jul 08 '20 07:07 ZiggStardust

I never found the solution, I ended up re-writing the project before deciding to ditch RN and just use native code. Once the app goes live, I won't be able to deal with issues like this that prevent me from working and inherently have no solutions.

On Wed, Jul 8, 2020 at 8:54 AM tomheathershub [email protected] wrote:

Very frustrating for me also this one

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/react-native-community/upgrade-support/issues/47#issuecomment-655354107, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABRHYDQAXDD2QTZGQYG2O4DR2QQ4BANCNFSM4MD7VFBA .

jesster2k10 avatar Jul 08 '20 09:07 jesster2k10

jules15's solution worked for me to. Make sure you do NOT have any node_modules in any of your dependencies. rm -rf on them if you have some

campbell-codes avatar Jul 22 '20 18:07 campbell-codes

@jules15 i did not run yarn inside node_modules libraries yet some libraries have node_modules ,did you get a better solution ?

hamoudaarfaoui avatar Aug 06 '20 08:08 hamoudaarfaoui

Add blacklist tometro.config.js like this

const blacklist = require('metro-config/src/defaults/blacklist');
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    blacklistRE: blacklist([
      /node_modules\/.*\/node_modules\/react-native\/.*/,
    ])
  },
};

MJXin avatar Aug 20 '20 09:08 MJXin

Hi! I faced with this problem too. I tried the command for clearing rn cache and the problem was gone. Used it in macos. watchman watch-del-all ; cd $TMPDIR && rm -rf *metro* ; cd PROJECT_PATH && rm -rf node_modules && npm i && npx pod-install && npx react-native start -- --reset-cache don't forget to replace PROJECT_PATH

KotDaVinchi avatar Nov 17 '20 19:11 KotDaVinchi

Add blacklist tometro.config.js like this

const blacklist = require('metro-config/src/defaults/blacklist');
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    blacklistRE: blacklist([
      /node_modules\/.*\/node_modules\/react-native\/.*/,
    ])
  },
};

This worked for me.

adderly avatar Apr 16 '21 19:04 adderly

Add blacklist tometro.config.js like this

const blacklist = require('metro-config/src/defaults/blacklist');
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    blacklistRE: blacklist([
      /node_modules\/.*\/node_modules\/react-native\/.*/,
    ])
  },
};

For version 0.64.1

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

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    blockList: exclusionList([
      /node_modules\/.*\/node_modules\/react-native\/.*/,
    ]),
  },
};

By the way, i think it maybe bettter to declare react-native as peerDependency and devDependency in third party library rather than dependency. In this way, we don't need to install react-native in third party library's node_modules, and can avoid above problem.

KNighD avatar May 14 '21 01:05 KNighD