wix / react-native-calendars

React Native Calendar Components 🗓️ 📆
MIT License
9.59k stars 2.96k forks source link

Webpack loader errors in solito nextjs app #2420

Open jhspaybar opened 8 months ago

jhspaybar commented 8 months ago

Please make our job easier by filling this template out to completion. If you're requesting a feature instead of reporting a bug, please feel free to skip the Environment and Reproducible Demo sections.

Description

After installing react-native-calendars in a new solito app and adding it to a page, I receive a webpack error when the page loads

Expected Behavior

I wanted to see a calendar render.

Observed Behavior

I received a webpack error.

yarn web
- warn Port 3000 is in use, trying 3001 instead.
- ready started server on [::]:3001, url: http://localhost:3001
- event compiled client and server successfully in 103 ms (18 modules)
- wait compiling...
- event compiled client and server successfully in 101 ms (18 modules)
- wait compiling / (client and server)...
- error ../../node_modules/react-native-calendars/src/index.ts
Module parse failed: Unexpected token (2:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export {default as Calendar} from './calendar';
> export type {CalendarProps} from './calendar';
| export {default as CalendarList} from './calendar-list';
| export {default as NewCalendarList} from './calendar-list/new';

Import trace for requested module:
../../node_modules/react-native-calendars/src/index.ts
../../packages/app/features/home/screen.tsx
- wait compiling /_error (client and server)...
- error ../../node_modules/react-native-calendars/src/index.ts
Module parse failed: Unexpected token (2:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export {default as Calendar} from './calendar';
> export type {CalendarProps} from './calendar';
| export {default as CalendarList} from './calendar-list';
| export {default as NewCalendarList} from './calendar-list/new';

Import trace for requested module:
../../node_modules/react-native-calendars/src/index.ts
../../packages/app/features/home/screen.tsx

Environment

I ran the following commands for my actual project, and the reproduction project.

Please run these commands in the project folder and fill in their results:

npm ls react-native bhmono@ /Users/.../bhmono ├─┬ @my/api@0.0.0 -> ./packages/api │ └─┬ @tanstack/react-query@4.18.0 │ └── react-native@0.72.5 deduped ├─┬ @my/ui@0.0.1 -> ./packages/ui │ ├─┬ @tamagui/animations-react-native@1.79.12 │ │ └── react-native@0.72.5 deduped │ ├─┬ @tamagui/react-native-media-driver@1.79.12 │ │ └── react-native@0.72.5 deduped │ ├─┬ @tamagui/toast@1.79.12 │ │ ├─┬ @tamagui/portal@1.79.12 │ │ │ └── react-native@0.72.5 deduped │ │ └── react-native@0.72.5 deduped │ └─┬ tamagui@1.79.12 │ ├─┬ @tamagui/alert-dialog@1.79.12 │ │ └── react-native@0.72.5 deduped │ ├─┬ @tamagui/avatar@1.79.12 │ │ └── react-native@0.72.5 deduped │ ├─┬ @tamagui/card@1.79.12 │ │ └── react-native@0.72.5 deduped │ ├─┬ @tamagui/dialog@1.79.12 │ │ └── react-native@0.72.5 deduped │ ├─┬ @tamagui/get-token@1.79.12 │ │ └── react-native@0.72.5 deduped │ ├─┬ @tamagui/helpers-tamagui@1.79.12 │ │ └── react-native@0.72.5 deduped │ ├─┬ @tamagui/image@1.79.12 │ │ └── react-native@0.72.5 deduped │ ├─┬ @tamagui/label@1.79.12 │ │ └── react-native@0.72.5 deduped │ ├─┬ @tamagui/popover@1.79.12 │ │ └── react-native@0.72.5 deduped │ ├─┬ @tamagui/popper@1.79.12 │ │ └── react-native@0.72.5 deduped │ ├─┬ @tamagui/progress@1.79.12 │ │ └── react-native@0.72.5 deduped │ ├─┬ @tamagui/select@1.79.12 │ │ ├─┬ @floating-ui/react-native@0.10.1 │ │ │ └── react-native@0.72.5 deduped │ │ └── react-native@0.72.5 deduped │ ├─┬ @tamagui/sheet@1.79.12 │ │ ├─┬ @tamagui/use-keyboard-visible@1.79.12 │ │ │ └── react-native@0.72.5 deduped │ │ └── react-native@0.72.5 deduped │ ├─┬ @tamagui/slider@1.79.12 │ │ └── react-native@0.72.5 deduped │ ├─┬ @tamagui/switch@1.79.12 │ │ └── react-native@0.72.5 deduped │ ├─┬ @tamagui/tooltip@1.79.12 │ │ └── react-native@0.72.5 deduped │ └─┬ @tamagui/use-window-dimensions@1.79.12 │ └── react-native@0.72.5 deduped ├─┬ app@0.0.0 -> ./packages/app │ ├─┬ @react-native-async-storage/async-storage@1.18.2 │ │ └── react-native@0.72.5 deduped │ ├─┬ burnt@0.12.1 │ │ └── react-native@0.72.5 deduped │ └─┬ react-native-safe-area-context@4.6.3 │ └── react-native@0.72.5 deduped ├─┬ expo-app@1.0.0 -> ./apps/expo │ ├─┬ @react-native-community/netinfo@9.3.10 │ │ └── react-native@0.72.5 deduped │ ├─┬ expo-router@2.0.0 │ │ ├─┬ @bacons/react-views@1.1.3 │ │ │ └── react-native@0.72.5 deduped │ │ ├─┬ @expo/metro-runtime@2.2.3 │ │ │ └── react-native@0.72.5 deduped │ │ ├─┬ @react-navigation/bottom-tabs@6.5.8 │ │ │ ├─┬ @react-navigation/elements@1.3.18 │ │ │ │ └── react-native@0.72.5 deduped │ │ │ └── react-native@0.72.5 deduped │ │ ├─┬ @react-navigation/native-stack@6.9.13 │ │ │ └── react-native@0.72.5 deduped │ │ ├─┬ @react-navigation/native@6.1.7 │ │ │ └── react-native@0.72.5 deduped │ │ └─┬ expo-head@0.0.11 │ │ └── react-native@0.72.5 deduped │ ├─┬ react-native-calendars@1.1303.0 │ │ └─┬ recyclerlistview@4.2.0 │ │ └── react-native@0.72.5 deduped │ ├─┬ react-native-gesture-handler@2.12.1 │ │ └── react-native@0.72.5 deduped │ ├─┬ react-native-reanimated@3.3.0 │ │ └── react-native@0.72.5 deduped │ ├─┬ react-native-screens@3.22.1 │ │ └── react-native@0.72.5 deduped │ ├─┬ react-native-svg@13.9.0 │ │ └── react-native@0.72.5 deduped │ ├─┬ react-native-url-polyfill@1.3.0 │ │ └── react-native@0.72.5 deduped │ ├─┬ react-native@0.72.5 │ │ └─┬ @react-native/virtualized-lists@0.72.8 │ │ └── react-native@0.72.5 deduped │ └─┬ stream-chat-expo@5.23.0 │ └─┬ stream-chat-react-native-core@5.23.0 │ └─┬ @gorhom/bottom-sheet@4.4.8 │ ├─┬ @gorhom/portal@1.0.14 │ │ └── react-native@0.72.5 deduped │ └── react-native@0.72.5 deduped ├─┬ next-app@0.1.0 -> ./apps/next │ └── react-native@0.72.5 deduped ├─┬ storybook-app@1.0.0 -> ./apps/storybook │ └── react-native@0.72.5 deduped └─┬ storybook-rn-app@1.0.0 -> ./apps/storybook-rn ├─┬ @storybook/addon-ondevice-actions@6.5.7 │ └── react-native@0.72.5 deduped ├─┬ @storybook/addon-ondevice-controls@6.5.7 │ ├─┬ @storybook/react-native-theming@6.5.7 │ │ └── react-native@0.72.5 deduped │ ├─┬ react-native-modal-datetime-picker@14.0.1 │ │ └── react-native@0.72.5 deduped │ └── react-native@0.72.5 deduped ├─┬ @storybook/react-native@6.5.7 │ └── react-native@0.72.5 deduped └── react-native@0.72.5 deduped

npm ls react-native solito-expo-router@ /Users/.../rnc-repro ├─┬ @types/react-native@0.72.2 │ └─┬ @react-native/virtualized-lists@0.72.8 │ └── react-native@0.72.4 deduped └─┬ expo-app@1.0.0 -> ./apps/expo ├─┬ expo-router@2.0.5 │ ├─┬ @bacons/react-views@1.1.3 │ │ └── react-native@0.72.4 deduped │ ├─┬ @expo/metro-runtime@2.2.7 │ │ └── react-native@0.72.4 deduped │ ├─┬ @react-navigation/bottom-tabs@6.5.7 │ │ ├─┬ @react-navigation/elements@1.3.17 │ │ │ └── react-native@0.72.4 deduped │ │ └── react-native@0.72.4 deduped │ ├─┬ @react-navigation/native-stack@6.9.12 │ │ └── react-native@0.72.4 deduped │ ├─┬ @react-navigation/native@6.1.6 │ │ └── react-native@0.72.4 deduped │ └─┬ expo-head@0.0.11 │ └── react-native@0.72.4 deduped ├─┬ react-native-calendars@1.1304.0 │ └─┬ recyclerlistview@4.2.0 │ └── react-native@0.72.4 deduped ├─┬ react-native-gesture-handler@2.12.1 │ └── react-native@0.72.4 deduped ├─┬ react-native-reanimated@3.3.0 │ └── react-native@0.72.4 deduped ├─┬ react-native-safe-area-context@4.6.3 │ └── react-native@0.72.4 deduped ├─┬ react-native-screens@3.22.1 │ └── react-native@0.72.4 deduped └── react-native@0.72.4

Also specify:

  1. Device/emulator/simulator & OS version: Web in chrome doesn't work, but expo and both storybooks in my real rpo work. I'm on a mac.

Reproducible Demo

https://github.com/jhspaybar/rnc-repro

yarn web localhost:3000

jhspaybar commented 8 months ago

I hadn’t found this issue https://github.com/wix/react-native-calendars/issues/2276 before opening mine, but I think it might be the same thing.