Require cycle warnings

[sutefan1]

After installing and linking I get a ton of warnings with the same body:

It's happening on android and ios. This is my setup:

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
      Memory: 86.26 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 9.8.0 - ~/.nvm/versions/node/v10.9.0/bin/node
      Yarn: 1.3.2 - ~/.yarn/bin/yarn
      npm: 6.2.0 - ~/.nvm/versions/node/v10.9.0/bin/npm
      Watchman: 4.7.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
      Android SDK:
        Build Tools: 23.0.1, 23.0.2, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.0
        API Levels: 16, 21, 23, 25, 26, 27, 28
    IDEs:
      Android Studio: 3.1 AI-173.4819257
      Xcode: 10.0/10A255 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.5.0 => 16.5.0
      react-native: 0.57.0 => 0.57.0

The project is plain initialized with react-native init.

[keithics]

+1 same here..

[blitzcom]

I think the problem is in the following lines: https://github.com/shoutem/ui/blob/469b709319efba56786b29ee3d1872921736f3cd/index.js#L44-L45 https://github.com/shoutem/ui/blob/469b709319efba56786b29ee3d1872921736f3cd/index.js#L65

More precisely, the Require cycle warning is generated by how Text is been used: https://github.com/shoutem/ui/blob/469b709319efba56786b29ee3d1872921736f3cd/html/elements/Br.js#L2

A workaround: comment the lines in index.js file or import the components as:

import { Button } from "@shoutem/ui/components/Button"

[sutefan1]

@K-Eo Both workarounds seem to work if you use react-native run-android/ios. FYI import the components as ... variant: If you use the React Native Tools extension for Visual Studio Code and start the debugger by this launch config

{
      "name": "Debug Android",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "launch",
      "platform": "android",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react"
}

you face this error

Couldn't import script at <http://localhost:8081/index.bundle?platform=android&dev=true&minify=false>. Debugging won't work: Try reloading the JS from inside the app, or Reconnect the VS Code debugger: {"originModulePath":".../src/screens/MainScreen.js","targetModuleName":"@shoutem/ui/components/Heading","message":"Unable to resolve module `@shoutem/ui/components/Heading` from `.../src/screens/MainScreen.js`: Module `@shoutem/ui/components/Heading` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.\n  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.","errors":[{"description":"Unable to resolve module `@shoutem/ui/components/Heading` from `.../src/screens/MainScreen.js`: Module `@shoutem/ui/components/Heading` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` [...]

[blitzcom]

@papsti7 I found what cause your error, the problem is that Heading component files does not exist in the path @shoutem/ui/components. You should import that component from @shoutem/ui/components/Text.

[sutefan1]

@K-Eo Thanks, but for now the first approach is working fine as a workaround until a patch is released. You could open a pull request if you know a fully working fix.

[WeslleyNasRocha]

+1 same here

[WeslleyNasRocha]

@papsti7 I found what cause your error, the problem is that Heading component files does not exist in the path @shoutem/ui/components. You should import that component from @shoutem/ui/components/Text.

I'm not using the Heading componente and getting the same error.

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { Card } from '@shoutem/ui';
import { Text } from '@shoutem/ui/components/Text';

[msdit]

same issue with RN 0.57.4

[abegehr]

same issue. writing a new import for each component is a hassle. will a fix be released?

EDIT: also the View imported from @shoutem/ui/components/View does not work as the one from @shoutem/ui. The "fill-parent" style is ignored.

[WeslleyNasRocha]

workaround would be as described here:

Use a patch file on metro

[ghost]

This warning indicates html inside of @shoutem/ui. I just comment out some imports to get rig of yellow box warning.

go to your node_modules folder of your project.

node_modules/@shoutem/ui/index.js

go to line 44,45, and 65 just comment out these

line 44 //export { default as RichMedia } from './components/RichMedia';

line 45 //export { Html } from './html';

line 65 //export { Examples } from './examples/components';

And save refresh your device or simulator and you will never see the yellow box warning

Cheers :)

[mxvsh]

any solution?

[ishannaktode]

+1