Bug: Cannot find module error, after running next build

[Edymov]

Bug description

When you using react-day-picker in nextjs, after running next build, you got this error message:

Failed to compile.

./node_modules/react-day-picker/src/components/Root/Root.tsx:3:23
Type error: Cannot find module 'components/Month' or its corresponding type declarations.

  1 | import React, { useEffect, useState } from 'react';
  2 | 
> 3 | import { Month } from 'components/Month';
    |                       ^
  4 | import { useDayPicker } from 'contexts/DayPicker';
  5 | import { useFocusContext } from 'contexts/Focus';
  6 | import { useNavigation } from 'contexts/Navigation';
error Command failed with exit code 1.

react-day-picker version: 8.1.4
next version: 12.1.4
typescript version: 4.6.3

Steps

1. Add react-day-picker to your Next.js App
2. Run next build

Expected behavior

react-day-picker works

Screenshots

[Edymov]

I tried removing node_modules, reinstall, remove .next, etc. It does not changed things

[gpbl]

@Edymov interesting, how are you importing react-day-picker? Some code samples?

This is a sandbox using next.js: https://codesandbox.io/s/fervent-worker-l46xu8?file=/pages/index.tsx

[Edymov]

Yes, of course.
I use it in my wrapper component.

import { FC, memo } from 'react';
import { Locale } from 'date-fns';
import 'react-day-picker/dist/style.css';
import { DayPickerProps } from 'react-day-picker/src/DayPicker';
import bg from 'date-fns/locale/bg';
import en from 'date-fns/locale/en-US';

import { dayjs } from 'src/lib/utils';

import { CalendarWrapper, StyledDayPicker } from './styles';

type Locales = 'en' | 'bg';

type Props = DayPickerProps & {
  currentLocale?: Locales;
};

const locales: Record<Locales, Locale> = {
  en,
  bg
};

export const Calendar: FC<Props> = memo(({ currentLocale = 'bg', selectedDay, onSelect, mode, numberOfMonths }) => (
  <CalendarWrapper>
    <StyledDayPicker
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      locale={locales[currentLocale]}
      selected={selectedDay}
      onSelect={onSelect}
      fixedWeeks
      mode={mode}
      numberOfMonths={numberOfMonths}
      formatters={{
        formatCaption: (month) => dayjs(month).format('MMMM')
      }}
    />
  </CalendarWrapper>
));

[gpbl]

@Edymov your issue is here:

import { DayPickerProps } from 'react-day-picker/src/DayPicker';

instead, import from 'react-day-picker':

- import { DayPickerProps } from 'react-day-picker/src/DayPicker';
+ import { DayPickerProps } from 'react-day-picker';