diff --git a/package.json b/package.json
index 73ff8d29..c975d30b 100644
--- a/package.json
+++ b/package.json
@@ -2,18 +2,27 @@
   "name": "react-calendar",
   "version": "4.5.0",
   "description": "Ultimate calendar for your React app.",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "source": "src/index.ts",
-  "types": "dist/cjs/index.d.ts",
+  "type": "module",
   "sideEffects": [
     "*.css"
   ],
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "source": "./src/index.ts",
+  "types": "./dist/cjs/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./dist/Calendar.css": "./dist/Calendar.css"
+  },
   "scripts": {
     "build": "yarn build-js && yarn copy-styles",
-    "build-js": "yarn build-js-esm && yarn build-js-cjs",
+    "build-js": "yarn build-js-esm && yarn build-js-cjs && yarn build-js-cjs-package",
     "build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext",
     "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs",
+    "build-js-cjs-package": "echo '{\n  \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
     "clean": "rimraf dist",
     "copy-styles": "cpy 'src/**/*.css' dist",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
@@ -23,7 +32,7 @@
     "test": "yarn lint && yarn tsc && yarn prettier && yarn unit",
     "tsc": "tsc --noEmit",
     "unit": "vitest",
-    "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & nodemon --watch src --ext css --exec \"yarn copy-styles\""
+    "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & yarn build-js-cjs-package & nodemon --watch src --ext css --exec \"yarn copy-styles\""
   },
   "keywords": [
     "calendar",
diff --git a/src/Calendar.spec.tsx b/src/Calendar.spec.tsx
index d878407f..8127b979 100644
--- a/src/Calendar.spec.tsx
+++ b/src/Calendar.spec.tsx
@@ -3,9 +3,9 @@ import React, { createRef } from 'react';
 import { act, render } from '@testing-library/react';
 import { getMonthStart } from '@wojtekmaj/date-utils';
 
-import Calendar from './Calendar';
+import Calendar from './Calendar.js';
 
-import type { Action, Value, View } from './shared/types';
+import type { Action, Value, View } from './shared/types.js';
 
 type CalendarImperativeHandle = {
   activeStartDate: Date;
diff --git a/src/Calendar.tsx b/src/Calendar.tsx
index d881ed44..ffdd6227 100644
--- a/src/Calendar.tsx
+++ b/src/Calendar.tsx
@@ -4,13 +4,13 @@ import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'r
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-import Navigation from './Calendar/Navigation';
-import CenturyView from './CenturyView';
-import DecadeView from './DecadeView';
-import YearView from './YearView';
-import MonthView from './MonthView';
+import Navigation from './Calendar/Navigation.js';
+import CenturyView from './CenturyView.js';
+import DecadeView from './DecadeView.js';
+import YearView from './YearView.js';
+import MonthView from './MonthView.js';
 
-import { getBegin, getBeginNext, getEnd, getValueRange } from './shared/dates';
+import { getBegin, getBeginNext, getEnd, getValueRange } from './shared/dates.js';
 import {
   isCalendarType,
   isClassName,
@@ -19,8 +19,8 @@ import {
   isRef,
   isView,
   rangeOf,
-} from './shared/propTypes';
-import { between } from './shared/utils';
+} from './shared/propTypes.js';
+import { between } from './shared/utils.js';
 
 import type {
   Action,
@@ -39,7 +39,7 @@ import type {
   TileDisabledFunc,
   Value,
   View,
-} from './shared/types';
+} from './shared/types.js';
 
 import type {
   formatDay as defaultFormatDay,
@@ -49,7 +49,7 @@ import type {
   formatShortWeekday as defaultFormatShortWeekday,
   formatWeekday as defaultFormatWeekday,
   formatYear as defaultFormatYear,
-} from './shared/dateFormatter';
+} from './shared/dateFormatter.js';
 
 const baseClassName = 'react-calendar';
 const allViews = ['century', 'decade', 'year', 'month'] as const;
diff --git a/src/Calendar/Navigation.spec.tsx b/src/Calendar/Navigation.spec.tsx
index f3b2301e..4472e5d8 100644
--- a/src/Calendar/Navigation.spec.tsx
+++ b/src/Calendar/Navigation.spec.tsx
@@ -2,7 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
-import Navigation from './Navigation';
+import Navigation from './Navigation.js';
 
 const allViews = ['century', 'decade', 'year', 'month'];
 
diff --git a/src/Calendar/Navigation.tsx b/src/Calendar/Navigation.tsx
index dcf36999..10ce36eb 100644
--- a/src/Calendar/Navigation.tsx
+++ b/src/Calendar/Navigation.tsx
@@ -12,13 +12,13 @@ import {
   getBeginPrevious2,
   getEndPrevious,
   getEndPrevious2,
-} from '../shared/dates';
+} from '../shared/dates.js';
 import {
   formatMonthYear as defaultFormatMonthYear,
   formatYear as defaultFormatYear,
-} from '../shared/dateFormatter';
+} from '../shared/dateFormatter.js';
 
-import type { Action, NavigationLabelFunc, RangeType } from '../shared/types';
+import type { Action, NavigationLabelFunc, RangeType } from '../shared/types.js';
 
 const className = 'react-calendar__navigation';
 
diff --git a/src/CenturyView.spec.tsx b/src/CenturyView.spec.tsx
index 3f00d5c7..79477503 100644
--- a/src/CenturyView.spec.tsx
+++ b/src/CenturyView.spec.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { getDecadeStart, getDecadeEnd } from '@wojtekmaj/date-utils';
 
-import CenturyView from './CenturyView';
+import CenturyView from './CenturyView.js';
 
 describe('CenturyView', () => {
   const defaultProps = {
diff --git a/src/CenturyView.tsx b/src/CenturyView.tsx
index 99d4603c..7b5486ff 100644
--- a/src/CenturyView.tsx
+++ b/src/CenturyView.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
-import Decades from './CenturyView/Decades';
+import Decades from './CenturyView/Decades.js';
 
-import { tileGroupProps } from './shared/propTypes';
+import { tileGroupProps } from './shared/propTypes.js';
 
 type CenturyViewProps = React.ComponentProps<typeof Decades>;
 
diff --git a/src/CenturyView/Decade.spec.tsx b/src/CenturyView/Decade.spec.tsx
index edb4be15..d4402eec 100644
--- a/src/CenturyView/Decade.spec.tsx
+++ b/src/CenturyView/Decade.spec.tsx
@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
-import Decade from './Decade';
+import Decade from './Decade.js';
 
 const tileProps = {
   activeStartDate: new Date(2018, 0, 1),
diff --git a/src/CenturyView/Decade.tsx b/src/CenturyView/Decade.tsx
index 39abd72f..c581cf4c 100644
--- a/src/CenturyView/Decade.tsx
+++ b/src/CenturyView/Decade.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { getDecadeStart, getDecadeEnd } from '@wojtekmaj/date-utils';
 
-import Tile from '../Tile';
+import Tile from '../Tile.js';
 
-import { getDecadeLabel } from '../shared/dates';
-import { formatYear as defaultFormatYear } from '../shared/dateFormatter';
+import { getDecadeLabel } from '../shared/dates.js';
+import { formatYear as defaultFormatYear } from '../shared/dateFormatter.js';
 
 const className = 'react-calendar__century-view__decades__decade';
 
diff --git a/src/CenturyView/Decades.tsx b/src/CenturyView/Decades.tsx
index 4b284660..561ac627 100644
--- a/src/CenturyView/Decades.tsx
+++ b/src/CenturyView/Decades.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { getDecadeStart } from '@wojtekmaj/date-utils';
 
-import TileGroup from '../TileGroup';
-import Decade from './Decade';
+import TileGroup from '../TileGroup.js';
+import Decade from './Decade.js';
 
-import { getBeginOfCenturyYear } from '../shared/dates';
+import { getBeginOfCenturyYear } from '../shared/dates.js';
 
 type DecadesProps = {
   activeStartDate: Date;
diff --git a/src/DecadeView.spec.tsx b/src/DecadeView.spec.tsx
index 9277afd1..0d8ddbe6 100644
--- a/src/DecadeView.spec.tsx
+++ b/src/DecadeView.spec.tsx
@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import DecadeView from './DecadeView';
+import DecadeView from './DecadeView.js';
 
 describe('DecadeView', () => {
   const defaultProps = {
diff --git a/src/DecadeView.tsx b/src/DecadeView.tsx
index b2257a90..33c2c900 100644
--- a/src/DecadeView.tsx
+++ b/src/DecadeView.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
-import Years from './DecadeView/Years';
+import Years from './DecadeView/Years.js';
 
-import { tileGroupProps } from './shared/propTypes';
+import { tileGroupProps } from './shared/propTypes.js';
 
 type DecadeViewProps = React.ComponentProps<typeof Years>;
 
diff --git a/src/DecadeView/Year.spec.tsx b/src/DecadeView/Year.spec.tsx
index 7b40b0a6..b215d16f 100644
--- a/src/DecadeView/Year.spec.tsx
+++ b/src/DecadeView/Year.spec.tsx
@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
-import Year from './Year';
+import Year from './Year.js';
 
 const tileProps = {
   activeStartDate: new Date(2018, 0, 1),
diff --git a/src/DecadeView/Year.tsx b/src/DecadeView/Year.tsx
index 2ec1002f..6c22c621 100644
--- a/src/DecadeView/Year.tsx
+++ b/src/DecadeView/Year.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { getYearStart, getYearEnd } from '@wojtekmaj/date-utils';
 
-import Tile from '../Tile';
+import Tile from '../Tile.js';
 
-import { formatYear as defaultFormatYear } from '../shared/dateFormatter';
+import { formatYear as defaultFormatYear } from '../shared/dateFormatter.js';
 
 const className = 'react-calendar__decade-view__years__year';
 
diff --git a/src/DecadeView/Years.tsx b/src/DecadeView/Years.tsx
index 44371e73..3f87e229 100644
--- a/src/DecadeView/Years.tsx
+++ b/src/DecadeView/Years.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { getYearStart } from '@wojtekmaj/date-utils';
 
-import TileGroup from '../TileGroup';
-import Year from './Year';
+import TileGroup from '../TileGroup.js';
+import Year from './Year.js';
 
-import { getBeginOfDecadeYear } from '../shared/dates';
+import { getBeginOfDecadeYear } from '../shared/dates.js';
 
 type YearsProps = {
   activeStartDate: Date;
diff --git a/src/Flex.spec.tsx b/src/Flex.spec.tsx
index d50d02ef..ea282ff0 100644
--- a/src/Flex.spec.tsx
+++ b/src/Flex.spec.tsx
@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import Flex from './Flex';
+import Flex from './Flex.js';
 
 describe('Flex', () => {
   it('styles itself properly with wrap flag set to false', () => {
diff --git a/src/MonthView.spec.tsx b/src/MonthView.spec.tsx
index dfb0394e..fa3e0a21 100644
--- a/src/MonthView.spec.tsx
+++ b/src/MonthView.spec.tsx
@@ -2,8 +2,8 @@ import { describe, expect, it } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import MonthView from './MonthView';
-import { formatShortWeekday } from './shared/dateFormatter';
+import MonthView from './MonthView.js';
+import { formatShortWeekday } from './shared/dateFormatter.js';
 
 const { format } = new Intl.DateTimeFormat('en-US', {
   day: 'numeric',
diff --git a/src/MonthView.tsx b/src/MonthView.tsx
index 3566c2a7..d84f4a43 100644
--- a/src/MonthView.tsx
+++ b/src/MonthView.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-import Days from './MonthView/Days';
-import Weekdays from './MonthView/Weekdays';
-import WeekNumbers from './MonthView/WeekNumbers';
+import Days from './MonthView/Days.js';
+import Weekdays from './MonthView/Weekdays.js';
+import WeekNumbers from './MonthView/WeekNumbers.js';
 
-import { CALENDAR_TYPES, CALENDAR_TYPE_LOCALES } from './shared/const';
-import { isCalendarType, tileGroupProps } from './shared/propTypes';
+import { CALENDAR_TYPES, CALENDAR_TYPE_LOCALES } from './shared/const.js';
+import { isCalendarType, tileGroupProps } from './shared/propTypes.js';
 
-import type { CalendarType } from './shared/types';
+import type { CalendarType } from './shared/types.js';
 
 function getCalendarTypeFromLocale(locale: string | undefined): CalendarType {
   if (locale) {
diff --git a/src/MonthView/Day.spec.tsx b/src/MonthView/Day.spec.tsx
index 62881713..fd16cb9c 100644
--- a/src/MonthView/Day.spec.tsx
+++ b/src/MonthView/Day.spec.tsx
@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
-import Day from './Day';
+import Day from './Day.js';
 
 const tileProps = {
   activeStartDate: new Date(2018, 0, 1),
diff --git a/src/MonthView/Day.tsx b/src/MonthView/Day.tsx
index 50306520..0868af36 100644
--- a/src/MonthView/Day.tsx
+++ b/src/MonthView/Day.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { getDayStart, getDayEnd } from '@wojtekmaj/date-utils';
 
-import Tile from '../Tile';
+import Tile from '../Tile.js';
 
-import { isWeekend } from '../shared/dates';
+import { isWeekend } from '../shared/dates.js';
 import {
   formatDay as defaultFormatDay,
   formatLongDate as defaultFormatLongDate,
-} from '../shared/dateFormatter';
-import { mapCalendarType } from '../shared/utils';
+} from '../shared/dateFormatter.js';
+import { mapCalendarType } from '../shared/utils.js';
 
-import type { CalendarType, DeprecatedCalendarType } from '../shared/types';
+import type { CalendarType, DeprecatedCalendarType } from '../shared/types.js';
 
 const className = 'react-calendar__month-view__days__day';
 
diff --git a/src/MonthView/Days.tsx b/src/MonthView/Days.tsx
index d7bd9581..de826c02 100644
--- a/src/MonthView/Days.tsx
+++ b/src/MonthView/Days.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { getYear, getMonth, getDaysInMonth, getDayStart } from '@wojtekmaj/date-utils';
 
-import TileGroup from '../TileGroup';
-import Day from './Day';
+import TileGroup from '../TileGroup.js';
+import Day from './Day.js';
 
-import { getDayOfWeek } from '../shared/dates';
-import { mapCalendarType } from '../shared/utils';
+import { getDayOfWeek } from '../shared/dates.js';
+import { mapCalendarType } from '../shared/utils.js';
 
-import type { CalendarType, DeprecatedCalendarType } from '../shared/types';
+import type { CalendarType, DeprecatedCalendarType } from '../shared/types.js';
 
 type DaysProps = {
   activeStartDate: Date;
diff --git a/src/MonthView/WeekNumber.spec.tsx b/src/MonthView/WeekNumber.spec.tsx
index 262814d0..1dc84152 100644
--- a/src/MonthView/WeekNumber.spec.tsx
+++ b/src/MonthView/WeekNumber.spec.tsx
@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import WeekNumber from './WeekNumber';
+import WeekNumber from './WeekNumber.js';
 
 describe('<WeekNumber /> component', () => {
   const defaultProps = {
diff --git a/src/MonthView/WeekNumber.tsx b/src/MonthView/WeekNumber.tsx
index e7afb490..1c7eaf43 100644
--- a/src/MonthView/WeekNumber.tsx
+++ b/src/MonthView/WeekNumber.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { OnClickWeekNumberFunc } from '../shared/types';
+import type { OnClickWeekNumberFunc } from '../shared/types.js';
 
 const className = 'react-calendar__tile';
 
diff --git a/src/MonthView/WeekNumbers.spec.tsx b/src/MonthView/WeekNumbers.spec.tsx
index bf11a5c8..1ed5de2a 100644
--- a/src/MonthView/WeekNumbers.spec.tsx
+++ b/src/MonthView/WeekNumbers.spec.tsx
@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
-import WeekNumbers from './WeekNumbers';
+import WeekNumbers from './WeekNumbers.js';
 
 describe('.react-calendar__month-view__weekNumbers', () => {
   const defaultProps = {
diff --git a/src/MonthView/WeekNumbers.tsx b/src/MonthView/WeekNumbers.tsx
index f332fb66..e24adf0c 100644
--- a/src/MonthView/WeekNumbers.tsx
+++ b/src/MonthView/WeekNumbers.tsx
@@ -1,13 +1,17 @@
 import React from 'react';
 import { getYear, getMonth, getDate, getDaysInMonth } from '@wojtekmaj/date-utils';
 
-import WeekNumber from './WeekNumber';
-import Flex from '../Flex';
+import WeekNumber from './WeekNumber.js';
+import Flex from '../Flex.js';
 
-import { getBeginOfWeek, getDayOfWeek, getWeekNumber } from '../shared/dates';
-import { mapCalendarType } from '../shared/utils';
+import { getBeginOfWeek, getDayOfWeek, getWeekNumber } from '../shared/dates.js';
+import { mapCalendarType } from '../shared/utils.js';
 
-import type { CalendarType, DeprecatedCalendarType, OnClickWeekNumberFunc } from '../shared/types';
+import type {
+  CalendarType,
+  DeprecatedCalendarType,
+  OnClickWeekNumberFunc,
+} from '../shared/types.js';
 
 type WeekNumbersProps = {
   activeStartDate: Date;
diff --git a/src/MonthView/Weekdays.spec.tsx b/src/MonthView/Weekdays.spec.tsx
index 8c3424b9..2e2ddaa0 100644
--- a/src/MonthView/Weekdays.spec.tsx
+++ b/src/MonthView/Weekdays.spec.tsx
@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import Weekdays from './Weekdays';
+import Weekdays from './Weekdays.js';
 
 describe('Weekdays', () => {
   const defaultProps = {
diff --git a/src/MonthView/Weekdays.tsx b/src/MonthView/Weekdays.tsx
index e9b68a3f..c3dad4d5 100644
--- a/src/MonthView/Weekdays.tsx
+++ b/src/MonthView/Weekdays.tsx
@@ -2,16 +2,16 @@ import React from 'react';
 import clsx from 'clsx';
 import { getYear, getMonth, getMonthStart } from '@wojtekmaj/date-utils';
 
-import Flex from '../Flex';
+import Flex from '../Flex.js';
 
-import { getDayOfWeek, isCurrentDayOfWeek, isWeekend } from '../shared/dates';
+import { getDayOfWeek, isCurrentDayOfWeek, isWeekend } from '../shared/dates.js';
 import {
   formatShortWeekday as defaultFormatShortWeekday,
   formatWeekday as defaultFormatWeekday,
-} from '../shared/dateFormatter';
-import { mapCalendarType } from '../shared/utils';
+} from '../shared/dateFormatter.js';
+import { mapCalendarType } from '../shared/utils.js';
 
-import type { CalendarType, DeprecatedCalendarType } from '../shared/types';
+import type { CalendarType, DeprecatedCalendarType } from '../shared/types.js';
 
 const className = 'react-calendar__month-view__weekdays';
 const weekdayClassName = `${className}__weekday`;
diff --git a/src/Tile.spec.tsx b/src/Tile.spec.tsx
index 3069184a..1d44595a 100644
--- a/src/Tile.spec.tsx
+++ b/src/Tile.spec.tsx
@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
-import Tile from './Tile';
+import Tile from './Tile.js';
 
 describe('<Tile /> component', () => {
   const defaultProps = {
diff --git a/src/Tile.tsx b/src/Tile.tsx
index 960007b7..3e51f728 100644
--- a/src/Tile.tsx
+++ b/src/Tile.tsx
@@ -7,7 +7,7 @@ import type {
   TileContentFunc,
   TileDisabledFunc,
   View,
-} from './shared/types';
+} from './shared/types.js';
 
 type TileProps = {
   activeStartDate: Date;
diff --git a/src/TileGroup.tsx b/src/TileGroup.tsx
index 6be1e2f4..36c14ca1 100644
--- a/src/TileGroup.tsx
+++ b/src/TileGroup.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 
-import Flex from './Flex';
+import Flex from './Flex.js';
 
-import { getTileClasses } from './shared/utils';
+import { getTileClasses } from './shared/utils.js';
 
-import type { RangeType, Value } from './shared/types';
+import type { RangeType, Value } from './shared/types.js';
 
 type TileGroupProps = {
   className?: string;
diff --git a/src/YearView.spec.tsx b/src/YearView.spec.tsx
index 50ef14f1..0e658a18 100644
--- a/src/YearView.spec.tsx
+++ b/src/YearView.spec.tsx
@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import YearView from './YearView';
+import YearView from './YearView.js';
 
 const { format } = new Intl.DateTimeFormat('en-US', { month: 'long', year: 'numeric' });
 
diff --git a/src/YearView.tsx b/src/YearView.tsx
index 8641c971..66d31dfe 100644
--- a/src/YearView.tsx
+++ b/src/YearView.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
-import Months from './YearView/Months';
+import Months from './YearView/Months.js';
 
-import { tileGroupProps } from './shared/propTypes';
+import { tileGroupProps } from './shared/propTypes.js';
 
 type YearViewProps = React.ComponentProps<typeof Months>;
 
diff --git a/src/YearView/Month.spec.tsx b/src/YearView/Month.spec.tsx
index 78360d64..3444d026 100644
--- a/src/YearView/Month.spec.tsx
+++ b/src/YearView/Month.spec.tsx
@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
-import Month from './Month';
+import Month from './Month.js';
 
 const tileProps = {
   activeStartDate: new Date(2018, 0, 1),
diff --git a/src/YearView/Month.tsx b/src/YearView/Month.tsx
index ef30f844..60887aa5 100644
--- a/src/YearView/Month.tsx
+++ b/src/YearView/Month.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { getMonthStart, getMonthEnd } from '@wojtekmaj/date-utils';
 
-import Tile from '../Tile';
+import Tile from '../Tile.js';
 
 import {
   formatMonth as defaultFormatMonth,
   formatMonthYear as defaultFormatMonthYear,
-} from '../shared/dateFormatter';
+} from '../shared/dateFormatter.js';
 
 const className = 'react-calendar__year-view__months__month';
 
diff --git a/src/YearView/Months.tsx b/src/YearView/Months.tsx
index 3c7c3589..3a25b1aa 100644
--- a/src/YearView/Months.tsx
+++ b/src/YearView/Months.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { getMonthStart, getYear } from '@wojtekmaj/date-utils';
 
-import TileGroup from '../TileGroup';
-import Month from './Month';
+import TileGroup from '../TileGroup.js';
+import Month from './Month.js';
 
 type MonthsProps = {
   activeStartDate: Date;
diff --git a/src/index.ts b/src/index.ts
index 561db2df..2c1b8237 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,11 +1,11 @@
-import Calendar from './Calendar';
-import CenturyView from './CenturyView';
-import DecadeView from './DecadeView';
-import MonthView from './MonthView';
-import Navigation from './Calendar/Navigation';
-import YearView from './YearView';
+import Calendar from './Calendar.js';
+import CenturyView from './CenturyView.js';
+import DecadeView from './DecadeView.js';
+import MonthView from './MonthView.js';
+import Navigation from './Calendar/Navigation.js';
+import YearView from './YearView.js';
 
-export type { CalendarProps } from './Calendar';
+export type { CalendarProps } from './Calendar.js';
 
 export type {
   NavigationLabelFunc,
@@ -14,7 +14,7 @@ export type {
   TileClassNameFunc,
   TileContentFunc,
   TileDisabledFunc,
-} from './shared/types';
+} from './shared/types.js';
 
 export { Calendar, CenturyView, DecadeView, MonthView, Navigation, YearView };
 
diff --git a/src/shared/dateFormatter.spec.ts b/src/shared/dateFormatter.spec.ts
index e1f94de1..2b36aa11 100644
--- a/src/shared/dateFormatter.spec.ts
+++ b/src/shared/dateFormatter.spec.ts
@@ -6,7 +6,7 @@ import {
   formatShortWeekday,
   formatWeekday,
   formatYear,
-} from './dateFormatter';
+} from './dateFormatter.js';
 
 describe('formatDate', () => {
   it('returns proper full numeric date', () => {
diff --git a/src/shared/dates.spec.ts b/src/shared/dates.spec.ts
index 6a95d4af..3a7ab90f 100644
--- a/src/shared/dates.spec.ts
+++ b/src/shared/dates.spec.ts
@@ -20,7 +20,7 @@ import {
   getCenturyLabel,
   getDecadeLabel,
   isWeekend,
-} from './dates';
+} from './dates.js';
 
 describe('getDayOfWeek', () => {
   it('returns proper day of the week (ISO 8601)', () => {
diff --git a/src/shared/dates.ts b/src/shared/dates.ts
index 35b34b0f..83b04c6d 100644
--- a/src/shared/dates.ts
+++ b/src/shared/dates.ts
@@ -30,10 +30,10 @@ import {
   getDayRange,
 } from '@wojtekmaj/date-utils';
 
-import { CALENDAR_TYPES, WEEKDAYS } from './const';
-import { formatYear as defaultFormatYear } from './dateFormatter';
+import { CALENDAR_TYPES, WEEKDAYS } from './const.js';
+import { formatYear as defaultFormatYear } from './dateFormatter.js';
 
-import type { CalendarType, RangeType } from './types';
+import type { CalendarType, RangeType } from './types.js';
 
 const SUNDAY = WEEKDAYS[0];
 const FRIDAY = WEEKDAYS[5];
diff --git a/src/shared/propTypes.ts b/src/shared/propTypes.ts
index 821ba16c..87a15a85 100644
--- a/src/shared/propTypes.ts
+++ b/src/shared/propTypes.ts
@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 
-import { CALENDAR_TYPES, DEPRECATED_CALENDAR_TYPES } from './const';
+import { CALENDAR_TYPES, DEPRECATED_CALENDAR_TYPES } from './const.js';
 
 import type { Requireable, Validator } from 'prop-types';
-import type { Range, View } from './types';
+import type { Range, View } from './types.js';
 
 const calendarTypes = Object.values(CALENDAR_TYPES);
 const deprecatedCalendarTypes = Object.values(DEPRECATED_CALENDAR_TYPES);
diff --git a/src/shared/types.ts b/src/shared/types.ts
index fdfb90ac..4d5fb24d 100644
--- a/src/shared/types.ts
+++ b/src/shared/types.ts
@@ -1,4 +1,4 @@
-import type { CALENDAR_TYPES, DEPRECATED_CALENDAR_TYPES } from './const';
+import type { CALENDAR_TYPES, DEPRECATED_CALENDAR_TYPES } from './const.js';
 
 export type Range<T> = [T, T];
 
diff --git a/src/shared/utils.spec.ts b/src/shared/utils.spec.ts
index cf061de0..0b1f3e79 100644
--- a/src/shared/utils.spec.ts
+++ b/src/shared/utils.spec.ts
@@ -5,9 +5,9 @@ import {
   isRangeWithinRange,
   doRangesOverlap,
   getTileClasses,
-} from './utils';
+} from './utils.js';
 
-import type { Range } from './types';
+import type { Range } from './types.js';
 
 describe('between', () => {
   it('returns value when value is within set boundaries', () => {
diff --git a/src/shared/utils.ts b/src/shared/utils.ts
index 542b090e..f6751264 100644
--- a/src/shared/utils.ts
+++ b/src/shared/utils.ts
@@ -1,9 +1,9 @@
 import warning from 'tiny-warning';
 
-import { CALENDAR_TYPES, DEPRECATED_CALENDAR_TYPES } from './const';
-import { getRange } from './dates';
+import { CALENDAR_TYPES, DEPRECATED_CALENDAR_TYPES } from './const.js';
+import { getRange } from './dates.js';
 
-import type { CalendarType, DeprecatedCalendarType, Range, RangeType, Value } from './types';
+import type { CalendarType, DeprecatedCalendarType, Range, RangeType, Value } from './types.js';
 
 /**
  * Returns a value no smaller than min and no larger than max.
diff --git a/test/MaxDetailOptions.tsx b/test/MaxDetailOptions.tsx
index be6c6a5b..85530a2f 100644
--- a/test/MaxDetailOptions.tsx
+++ b/test/MaxDetailOptions.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { View } from './shared/types';
+import type { View } from './shared/types.js';
 
 const allViews = ['century', 'decade', 'year', 'month'] as const;
 
diff --git a/test/MinDetailOptions.tsx b/test/MinDetailOptions.tsx
index 021cc069..4d6c112e 100644
--- a/test/MinDetailOptions.tsx
+++ b/test/MinDetailOptions.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { View } from './shared/types';
+import type { View } from './shared/types.js';
 
 const allViews = ['century', 'decade', 'year', 'month'] as const;
 
diff --git a/test/Test.tsx b/test/Test.tsx
index 9512d832..784356ae 100644
--- a/test/Test.tsx
+++ b/test/Test.tsx
@@ -1,19 +1,19 @@
 import React, { useCallback, useState } from 'react';
-import Calendar from 'react-calendar/src';
-import 'react-calendar/src/Calendar.css';
+import Calendar from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
 
-import DateBonduariesOptions from './DateBonduariesOptions';
-import MaxDetailOptions from './MaxDetailOptions';
-import MinDetailOptions from './MinDetailOptions';
-import LocaleOptions from './LocaleOptions';
-import ValueOptions from './ValueOptions';
-import ViewOptions from './ViewOptions';
+import DateBonduariesOptions from './DateBonduariesOptions.js';
+import MaxDetailOptions from './MaxDetailOptions.js';
+import MinDetailOptions from './MinDetailOptions.js';
+import LocaleOptions from './LocaleOptions.js';
+import ValueOptions from './ValueOptions.js';
+import ViewOptions from './ViewOptions.js';
 
-import { formatDate } from './shared/dateFormatter';
+import { formatDate } from './shared/dateFormatter.js';
 
 import './Test.css';
 
-import type { LooseValue, Value, View } from './shared/types';
+import type { LooseValue, Value, View } from './shared/types.js';
 
 const now = new Date();
 
diff --git a/test/ValueOptions.tsx b/test/ValueOptions.tsx
index 74e44ac6..491569d6 100644
--- a/test/ValueOptions.tsx
+++ b/test/ValueOptions.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { getISOLocalDateTime } from '@wojtekmaj/date-utils';
 
-import type { LooseValue } from './shared/types';
+import type { LooseValue } from './shared/types.js';
 
 type ValueOptionsProps = {
   selectRange?: boolean;
diff --git a/test/index.tsx b/test/index.tsx
index 4a67864f..c355c527 100644
--- a/test/index.tsx
+++ b/test/index.tsx
@@ -1,7 +1,7 @@
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import Test from './Test';
+import Test from './Test.js';
 
 createRoot(document.getElementById('react-root') as HTMLDivElement).render(
   <StrictMode>