Mixing require and import

[kmalakoff]

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

I'm using vite to include this in a react-native-web project and rollup is leaving the require statements in the code without bundling the dependencies because you are mixing import and require statements in the same file. See import and require

Expected Behavior

I expect a library to stick with either require or import. Not both

Observed Behavior

Uncaught ReferenceError: require is not defined

Environment

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

• npm ls react-native-calendars:
• npm ls react-native:

Also specify:

1. Device/emulator/simulator & OS version:

Reproducible Demo

Please provide a minimized reproducible demonstration of the problem you're reporting.

Issues that come with minimal repro's are resolved much more quickly than issues where a maintainer has to reproduce themselves.

Screenshots

Screenshots or gifs of the issue and the suggested fix will help us move faster with the review process.

[kmalakoff]

Here's the patch file I used to move all the code to use import rather than mixed module systems in the same file:

diff --git a/node_modules/react-native-calendars/src/calendar/header/index.js b/node_modules/react-native-calendars/src/calendar/header/index.js
index bd75364..f87b905 100644
--- a/node_modules/react-native-calendars/src/calendar/header/index.js
+++ b/node_modules/react-native-calendars/src/calendar/header/index.js
@@ -4,6 +4,9 @@ import React, { Fragment, useCallback, useMemo, forwardRef, useImperativeHandle,
 import { ActivityIndicator, Platform, View, Text, TouchableOpacity, Image } from 'react-native';
 import { formatNumbers, weekDayNames } from '../../dateutils';
 import styleConstructor from './style';
+import LEFT_ARROW from '../img/previous.png';
+import RIGHT_ARROW from '../img/next.png';
+
 const accessibilityActions = [
     { name: 'increment', label: 'increment' },
     { name: 'decrement', label: 'decrement' }
@@ -100,7 +103,7 @@ const CalendarHeader = forwardRef((props, ref) => {
         const arrowId = isLeft ? 'leftArrow' : 'rightArrow';
         const shouldDisable = isLeft ? disableArrowLeft : disableArrowRight;
         const onPress = !shouldDisable ? isLeft ? onPressLeft : onPressRight : undefined;
-        const imageSource = isLeft ? require('../img/previous.png') : require('../img/next.png');
+        const imageSource = isLeft ? LEFT_ARROW : RIGHT_ARROW;
         const renderArrowDirection = isLeft ? 'left' : 'right';
         return (<TouchableOpacity onPress={onPress} disabled={shouldDisable} style={style.current.arrow} hitSlop={hitSlop} testID={`${testID}.${arrowId}`}>
         {renderArrow ? (renderArrow(renderArrowDirection)) : (<Image source={imageSource} style={shouldDisable ? style.current.disabledArrowImage : style.current.arrowImage}/>)}
diff --git a/node_modules/react-native-calendars/src/componentUpdater.js b/node_modules/react-native-calendars/src/componentUpdater.js
index 2d6fc64..c337a9d 100644
--- a/node_modules/react-native-calendars/src/componentUpdater.js
+++ b/node_modules/react-native-calendars/src/componentUpdater.js
@@ -1,8 +1,4 @@
-const get = require('lodash/get');
-const omit = require('lodash/omit');
-const pickBy = require('lodash/pickBy');
-const isEqual = require('lodash/isEqual');
-const includes = require('lodash/includes');
+import {get, omit, pickBy, isEqual, includes} from 'lodash';
 export function shouldUpdate(props, newProps, paths) {
     for (let i = 0; i < paths.length; i++) {
         const equals = isEqual(get(props, paths[i]), get(newProps, paths[i]));
diff --git a/node_modules/react-native-calendars/src/dateutils.js b/node_modules/react-native-calendars/src/dateutils.js
index 34ac965..22dad00 100644
--- a/node_modules/react-native-calendars/src/dateutils.js
+++ b/node_modules/react-native-calendars/src/dateutils.js
@@ -1,5 +1,5 @@
-const XDate = require('xdate');
-const { toMarkingFormat } = require('./interface');
+import XDate from 'xdate';
+import { toMarkingFormat } from './interface';
 const latinNumbersPattern = /[0-9]/g;
 function isValidXDate(date) {
     return date && (date instanceof XDate);
diff --git a/node_modules/react-native-calendars/src/day-state-manager.js b/node_modules/react-native-calendars/src/day-state-manager.js
index 514e854..17da16f 100644
--- a/node_modules/react-native-calendars/src/day-state-manager.js
+++ b/node_modules/react-native-calendars/src/day-state-manager.js
@@ -1,5 +1,5 @@
-const { isToday, isDateNotInRange, sameMonth } = require('./dateutils');
-const { toMarkingFormat } = require('./interface');
+import { isToday, isDateNotInRange, sameMonth } from './dateutils';
+import { toMarkingFormat } from './interface';
 export function getState(day, current, props, disableDaySelection) {
     const { minDate, maxDate, disabledByDefault, context } = props;
     let state = '';
diff --git a/node_modules/react-native-calendars/src/expandableCalendar/Context/todayButton.js b/node_modules/react-native-calendars/src/expandableCalendar/Context/todayButton.js
index 80a7348..3a519bb 100644
--- a/node_modules/react-native-calendars/src/expandableCalendar/Context/todayButton.js
+++ b/node_modules/react-native-calendars/src/expandableCalendar/Context/todayButton.js
@@ -8,8 +8,8 @@ import { UpdateSources, todayString } from '../commons';
 import styleConstructor from '../style';
 import Context from './index';
 const TOP_POSITION = 65;
-const DOWN_ICON = require('../../img/down.png');
-const UP_ICON = require('../../img/up.png');
+import DOWN_ICON from '../../img/down.png';
+import UP_ICON from '../../img/up.png';
 const TodayButton = (props, ref) => {
     useImperativeHandle(ref, () => ({
         disable: (shouldDisable) => {
diff --git a/node_modules/react-native-calendars/src/expandableCalendar/index.js b/node_modules/react-native-calendars/src/expandableCalendar/index.js
index 4fb12b0..d7598d2 100644
--- a/node_modules/react-native-calendars/src/expandableCalendar/index.js
+++ b/node_modules/react-native-calendars/src/expandableCalendar/index.js
@@ -27,8 +27,8 @@ const CLOSED_HEIGHT = 120; // header + 1 week
 const WEEK_HEIGHT = 46;
 const DAY_NAMES_PADDING = 24;
 const PAN_GESTURE_THRESHOLD = 30;
-const LEFT_ARROW = require('../calendar/img/previous.png');
-const RIGHT_ARROW = require('../calendar/img/next.png');
+import LEFT_ARROW from '../calendar/img/previous.png';
+import RIGHT_ARROW from '../calendar/img/next.png';
 const knobHitSlop = { left: 10, right: 10, top: 10, bottom: 10 };
 const headerStyleOverride = {
     stylesheet: {
diff --git a/node_modules/react-native-calendars/src/interface.js b/node_modules/react-native-calendars/src/interface.js
index 356eba0..17ff243 100644
--- a/node_modules/react-native-calendars/src/interface.js
+++ b/node_modules/react-native-calendars/src/interface.js
@@ -1,4 +1,4 @@
-const XDate = require('xdate');
+import XDate from 'xdate';
 export function padNumber(n) {
     if (n < 10) {
         return '0' + n;
diff --git a/node_modules/react-native-calendars/src/services/index.js b/node_modules/react-native-calendars/src/services/index.js
index 817d9fb..705d678 100644
--- a/node_modules/react-native-calendars/src/services/index.js
+++ b/node_modules/react-native-calendars/src/services/index.js
@@ -3,8 +3,8 @@ import isDate from 'lodash/isDate';
 import isString from 'lodash/isString';
 import isNumber from 'lodash/isNumber';
 import XDate from 'xdate';
-const { getLocale } = require('../dateutils');
-const { padNumber, toMarkingFormat } = require('../interface');
+import { getLocale } from '../dateutils';
+import { padNumber, toMarkingFormat } from '../interface';
 export function getCalendarDateString(date) {
     if (!isUndefined(date)) {
         if (isDate(date) && !isNaN(date.getFullYear())) {

[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.

[fershibli]

Did they fix this? I'm getting a bunch of errors, so I'll give the patch a try