Compiler warnings with Expo Web

zaptrem commented 1 year ago

Description

Exactly the same issue as seen here, just on the latest version: https://github.com/wix/react-native-ui-lib/issues/1257

Related to

[X] Components
[ ] Demo
[ ] Docs
[ ] Typings

Steps to reproduce

Install react-native-ui-lib on an Expo project (e.g., https://github.com/expo/examples/tree/master/blank) Run on web. See warnings.

Expected behavior

No warnings

Actual behavior

Warnings

More Info

Code snippet

webpackHotDevClient.js:138 ./node_modules/react-native-ui-lib/src/components/actionSheet/index.js:54:6
Attempted import error: 'ActionSheetIOS' is not exported from 'react-native-web/dist/index'.
  52 |         cancelBtnIndex = optionsArray.length - 1;
  53 |       }
> 54 |       ActionSheetIOS.showActionSheetWithOptions({
     |      ^
  55 |         title,
  56 |         message,
  57 |         options: optionsArray.map(option => option?.label || ''),
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:143
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210
webpackHotDevClient.js:138 ./node_modules/react-native-ui-lib/src/commons/new.js:9
Attempted import error: 'AlignmentModifiers' is not exported from './modifiers'.
  7 | export { default as Constants } from "./Constants";
  8 | export { default as Config } from "./Config";
> 9 | export { ContainerModifiers, AlignmentModifiers, MarginModifiers, PaddingModifiers, TypographyModifiers, ColorsModifiers, BackgroundColorModifier, FlexModifiers } from "./modifiers";
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:143
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210
webpackHotDevClient.js:138 ./node_modules/react-native-ui-lib/src/commons/new.js:9
Attempted import error: 'BackgroundColorModifier' is not exported from './modifiers'.
  7 | export { default as Constants } from "./Constants";
  8 | export { default as Config } from "./Config";
> 9 | export { ContainerModifiers, AlignmentModifiers, MarginModifiers, PaddingModifiers, TypographyModifiers, ColorsModifiers, BackgroundColorModifier, FlexModifiers } from "./modifiers";
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:143
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210
webpackHotDevClient.js:138 ./node_modules/react-native-ui-lib/src/commons/new.js:3
Attempted import error: 'BaseComponentInjectedProps' is not exported from './asBaseComponent'.
  1 | // TODO: this file should replace commons/index.js
  2 | export { default as UIComponent } from "./UIComponent";
> 3 | export { default as asBaseComponent, BaseComponentInjectedProps } from "./asBaseComponent";
  4 | export { default as forwardRef, ForwardRefInjectedProps } from "./forwardRef";
  5 | export { default as withScrollEnabler, WithScrollEnablerProps } from "./withScrollEnabler";
  6 | export { default as withScrollReached, WithScrollReachedProps } from "./withScrollReached";
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:143
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210
webpackHotDevClient.js:138 ./node_modules/react-native-ui-lib/src/components/card/index.js:18:17
Attempted import error: 'BlurViewPackage' is not exported from '../../optionalDependencies'.
  16 | import CardContext from "./CardContext";
  17 | import * as CardPresenter from "./CardPresenter";
> 18 | const BlurView = BlurViewPackage?.BlurView;
     |                 ^
  19 | const DEFAULT_BORDER_RADIUS = BorderRadiuses.br40;
  20 | const DEFAULT_SELECTION_PROPS = {
  21 |   borderWidth: 2,
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:143
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210
webpackHotDevClient.js:132 There were more warnings in other files.
You can find a complete log in the terminal.

Screenshots/Video

Environment

├── @babel/core@7.20.12 ├── @babel/plugin-proposal-export-namespace-from@7.18.9 ├── @expo/webpack-config@0.17.4 ├── expo-av@13.0.2 ├── expo-status-bar@1.4.2 ├── expo@47.0.13 ├── react-dom@18.1.0 ├── react-native-gesture-handler@2.8.0 ├── react-native-reanimated-carousel@3.3.0 ├── react-native-reanimated@2.12.0 ├── react-native-ui-lib@6.29.1 ├── react-native-web@0.18.12 ├── react-native@0.70.5 └── react@18.1.0

Affected platforms

[ ] Android
[ ] iOS
[X] Web

YuDorosh commented 1 year ago

Hi there!

This error is occurring because the react-native-ui-lib library is designed for React Native, but you're trying to run it in a web environment. ActionSheetIOS, BlurViewPackage, and other dependencies that are used in the library are specific to React Native and aren't available in web environments.

To resolve these issues, you'll need to make changes to the react-native-ui-lib library or find alternative solutions that are built specifically for web environments.

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

wix / react-native-ui-lib