Webpack incompatibility when running a calendar with react native web. Seemingly simple solution.

Description

I’m trying to run my simple one-page project which uses CalendarList in Expo’s react native web, but webpack gives an error & my project can’t run.

Source of Issue & Proposed Solution

I’ve figured out that the source of the issue seems to be that you can’t mix import & module.exports in the same file or otherwise webpack will not work. Stated here & very helpful info here. You guys mix them in the .../src/dateutils & .../src/day-state-manager files for example.

Mixing them seems like really bad practice anyway so might as well fix the mixing of CommonJS & ES Modules so that way webpack will play nice with your files!

For example, you can change module.exports = in your dateutils file to export default & that would fix the problem for that one file. Then you do the same for all the other files that have this.

Expected Behavior

Run expo r -c to run my project which uses CalendarList. Expected the project to start as normal.

Observed Behavior

Project didn’t run & showed an error page.

Error:

TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
Module.<anonymous>
node_modules/react-native-calendars/src/dateutils.js:145
  142 |   }
  143 | }
  144 | 
> 145 | module.exports = {
  146 |   weekDayNames,
  147 |   sameMonth,
  148 |   sameWeek,

Here’s a screenshot of the error:

Environment

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

• npm ls react-native-calendars: calendar-sample@ /Users/ja/code/react-native/scratch/calendar-sample └── react-native-calendars@1.1262.0
• npm ls react-native: calendar-sample@ /Users/ja/code/react-native/scratch/calendar-sample ├─┬ react-native-safe-area-context@3.2.0 │ └── react-native@0.63.2 deduped └─┬ react-native@0.63.2 └─┬ @react-native-community/cli@4.14.0 └── react-native@0.63.2 deduped

1. Phone/emulator/simulator & version: This was run using react native web 0.13.18.

Reproducible Demo

Make sure you’re using react-native-calendars version 1.1262.0. Install that exact version. An older version of 1.1260.0 & some other older versions didn’t seem to have this issue.

Then try to use this component for the web through react native web or through Expo (which uses react native web). They’ll use webpack & should give an error.

[pratheekhegde]

Facing the same issue. 😞

[foloinfo]

I had a same issue and it seems like reverting to 1.1260.0 works.

However the recent version did not apply selectedDayTextColor correctly on the web, it was always black. So I ended up reverting way back to 1.403.0.