Cant compile on web: Cant resolve './picker' './src/BlurView' './src/VibrancyView'

[eelior]

Description

Fresh install, cant compile on web (works on Android and iOS) using expo because of RNUI dependencies: @react-native-community/datetimepicker, @react-native-community/blur.

Related to

• [x] Components
• [ ] Demo
• [ ] Docs
• [ ] Typings

Steps to reproduce

package.json attached.

Expected behavior

Compile the project on web.

Actual behavior

I get these errors:

./node_modules/@react-native-community/datetimepicker/src/DateTimePickerAndroid.js:23
Module not found: Can't resolve './picker'
  21 |   validateAndroidProps,
  22 | } from './androidUtils';
> 23 | import pickers from './picker';
  24 | 
  25 | function open(props: AndroidNativeProps) {
  26 |   const {
./node_modules/@react-native-community/datetimepicker/src/androidUtils.js:6
Module not found: Can't resolve './picker'
  4 |  */
  5 | import {ANDROID_DISPLAY, ANDROID_MODE, MIN_MS} from './constants';
> 6 | import pickers from './picker';
  7 | import type {AndroidNativeProps, DateTimePickerResult} from './types';
  8 | import {sharedPropsValidation} from './utils';
  9 | import invariant from 'invariant';
./node_modules/@react-native-community/blur/index.js:1
Module not found: Can't resolve './src/BlurView'
> 1 | import BlurView from './src/BlurView';
  2 | import VibrancyView from './src/VibrancyView';
  3 | 
  4 | module.exports = {
./node_modules/@react-native-community/blur/index.js:2
Module not found: Can't resolve './src/VibrancyView'
  1 | import BlurView from './src/BlurView';
> 2 | import VibrancyView from './src/VibrancyView';
  3 | 
  4 | module.exports = {
  5 |   BlurView: BlurView,

More Info

Code snippet

package.json:

{
  "name": "app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest --watchAll",
    "amplify-modelgen": "node amplify/scripts/amplify-modelgen.js",
    "amplify-push": "node amplify/scripts/amplify-push.js"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@react-native-async-storage/async-storage": "^1.17.6",
    "@react-native-community/blur": "^3.6.0",
    "@react-native-community/datetimepicker": "6.1.2",
    "@react-native-community/netinfo": "8.2.0",
    "@react-native-picker/picker": "2.4.0",
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2",
    "aws-amplify": "^4.3.24",
    "aws-amplify-react-native": "^6.0.4",
    "aws-sdk": "^2.1152.0",
    "expo": "^45.0.5",
    "expo-asset": "~8.5.0",
    "expo-constants": "~13.1.1",
    "expo-device": "~4.2.0",
    "expo-font": "~10.1.0",
    "expo-linking": "~3.1.0",
    "expo-notifications": "~0.15.2",
    "expo-permissions": "~13.2.0",
    "expo-splash-screen": "~0.15.1",
    "expo-status-bar": "~1.3.0",
    "expo-web-browser": "~10.2.1",
    "graphql-tag": "^2.12.6",
    "npm-check": "^5.9.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-gesture-handler": "~2.2.1",
    "react-native-modal-datetime-picker": "^13.1.2",
    "react-native-reanimated": "~2.8.0",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-ui-lib": "^6.17.1",
    "react-native-web": "0.17.7"
  },
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@types/react": "^17.0.45",
    "@types/react-native": "^0.67.8",
    "ini": "^3.0.0",
    "inquirer": "^8.2.4",
    "jest": "^26.6.3",
    "jest-expo": "^45.0.1",
    "react-test-renderer": "^17.0.2",
    "typescript": "~4.3.5"
  },
  "private": true
}

Screenshots/Video

Environment

• React Native: 0.68.2
• React Native UI Lib: ^6.17.1

Affected platforms

• [ ] Android
• [ ] iOS
• [x] Web

[stale[bot]]

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.

[borisevstratov]

Any updates/workarounds on this?

I'm on the latest version "react-native-ui-lib": "^6.21.2", however still face these errors when trying to compile for web:

./node_modules/@react-native-community/blur/index.js:1
Module not found: Can't resolve './src/BlurView'
> 1 | import BlurView from './src/BlurView';
  2 | import VibrancyView from './src/VibrancyView';
  3 |
  4 | module.exports = {
./node_modules/@react-native-community/blur/index.js:2
Module not found: Can't resolve './src/VibrancyView'
  1 | import BlurView from './src/BlurView';
> 2 | import VibrancyView from './src/VibrancyView';
  3 |
  4 | module.exports = {
  5 |   BlurView: BlurView,