Webpack loader errors in solito nextjs app

[jhspaybar]

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-calendars:
• npm ls react-native: npm ls react-native-calendars bhmono@ /Users/.../bhmono └─┬ [email protected] -> ./apps/expo └── [email protected]

npm ls react-native bhmono@ /Users/.../bhmono ├─┬ @my/[email protected] -> ./packages/api │ └─┬ @tanstack/[email protected] │ └── [email protected] deduped ├─┬ @my/[email protected] -> ./packages/ui │ ├─┬ @tamagui/[email protected] │ │ └── [email protected] deduped │ ├─┬ @tamagui/[email protected] │ │ └── [email protected] deduped │ ├─┬ @tamagui/[email protected] │ │ ├─┬ @tamagui/[email protected] │ │ │ └── [email protected] deduped │ │ └── [email protected] deduped │ └─┬ [email protected] │ ├─┬ @tamagui/[email protected] │ │ └── [email protected] deduped │ ├─┬ @tamagui/[email protected] │ │ └── [email protected] deduped │ ├─┬ @tamagui/[email protected] │ │ └── [email protected] deduped │ ├─┬ @tamagui/[email protected] │ │ └── [email protected] deduped │ ├─┬ @tamagui/[email protected] │ │ └── [email protected] deduped │ ├─┬ @tamagui/[email protected] │ │ └── [email protected] deduped │ ├─┬ @tamagui/[email protected] │ │ └── [email protected] deduped │ ├─┬ @tamagui/[email protected] │ │ └── [email protected] deduped │ ├─┬ @tamagui/[email protected] │ │ └── [email protected] deduped │ ├─┬ @tamagui/[email protected] │ │ └── [email protected] deduped │ ├─┬ @tamagui/[email protected] │ │ └── [email protected] deduped │ ├─┬ @tamagui/[email protected] │ │ ├─┬ @floating-ui/[email protected] │ │ │ └── [email protected] deduped │ │ └── [email protected] deduped │ ├─┬ @tamagui/[email protected] │ │ ├─┬ @tamagui/[email protected] │ │ │ └── [email protected] deduped │ │ └── [email protected] deduped │ ├─┬ @tamagui/[email protected] │ │ └── [email protected] deduped │ ├─┬ @tamagui/[email protected] │ │ └── [email protected] deduped │ ├─┬ @tamagui/[email protected] │ │ └── [email protected] deduped │ └─┬ @tamagui/[email protected] │ └── [email protected] deduped ├─┬ [email protected] -> ./packages/app │ ├─┬ @react-native-async-storage/[email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └── [email protected] deduped │ └─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] -> ./apps/expo │ ├─┬ @react-native-community/[email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ ├─┬ @bacons/[email protected] │ │ │ └── [email protected] deduped │ │ ├─┬ @expo/[email protected] │ │ │ └── [email protected] deduped │ │ ├─┬ @react-navigation/[email protected] │ │ │ ├─┬ @react-navigation/[email protected] │ │ │ │ └── [email protected] deduped │ │ │ └── [email protected] deduped │ │ ├─┬ @react-navigation/[email protected] │ │ │ └── [email protected] deduped │ │ ├─┬ @react-navigation/[email protected] │ │ │ └── [email protected] deduped │ │ └─┬ [email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └─┬ [email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └─┬ @react-native/[email protected] │ │ └── [email protected] deduped │ └─┬ [email protected] │ └─┬ [email protected] │ └─┬ @gorhom/[email protected] │ ├─┬ @gorhom/[email protected] │ │ └── [email protected] deduped │ └── [email protected] deduped ├─┬ [email protected] -> ./apps/next │ └── [email protected] deduped ├─┬ [email protected] -> ./apps/storybook │ └── [email protected] deduped └─┬ [email protected] -> ./apps/storybook-rn ├─┬ @storybook/[email protected] │ └── [email protected] deduped ├─┬ @storybook/[email protected] │ ├─┬ @storybook/[email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └── [email protected] deduped │ └── [email protected] deduped ├─┬ @storybook/[email protected] │ └── [email protected] deduped └── [email protected] deduped

• npm ls react-native-calendars:
• npm ls react-native: npm ls react-native-calendars solito-expo-router@ /Users/.../rnc-repro └─┬ [email protected] -> ./apps/expo └── [email protected]

npm ls react-native solito-expo-router@ /Users/.../rnc-repro ├─┬ @types/[email protected] │ └─┬ @react-native/[email protected] │ └── [email protected] deduped └─┬ [email protected] -> ./apps/expo ├─┬ [email protected] │ ├─┬ @bacons/[email protected] │ │ └── [email protected] deduped │ ├─┬ @expo/[email protected] │ │ └── [email protected] deduped │ ├─┬ @react-navigation/[email protected] │ │ ├─┬ @react-navigation/[email protected] │ │ │ └── [email protected] deduped │ │ └── [email protected] deduped │ ├─┬ @react-navigation/[email protected] │ │ └── [email protected] deduped │ ├─┬ @react-navigation/[email protected] │ │ └── [email protected] deduped │ └─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped └── [email protected]

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]

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.