Default installation of toolpad/core@0.14.0 needs additional installation of @mui/x-data-grid

[rkristelijn]

Steps to reproduce

see https://opennext.js.org/cloudflare/get-started

Steps:

1. created empty app with react-19 and opennext: npm create cloudflare@latest -- my-next-app --framework=next --platform=workers
2. per https://mui.com/toolpad/core/introduction/installation/ npm install @toolpad/core @mui/material @mui/icons-material @emotion/react @emotion/styled
3. add AppProvider in layout.tsx, add DashboardLayout and PageContainer in page.tsx
4. compile and observe errors

Current behavior

https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/DateField/DateField.js:12:1
Module not found: Can't resolve './useDateField.js'
  10 | import useSlotProps from '@mui/utils/useSlotProps';
  11 | import { refType } from '@mui/utils';
> 12 | import { useDateField } from "./useDateField.js";
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  13 | import { useClearableField } from "../hooks/index.js";
  14 | import { PickersTextField } from "../PickersTextField/index.js";
  15 | import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/DateField/DateField.js:12:1
Module not found: Can't resolve './useDateField.js'
  10 | import useSlotProps from '@mui/utils/useSlotProps';
  11 | import { refType } from '@mui/utils';
> 12 | import { useDateField } from "./useDateField.js";
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  13 | import { useClearableField } from "../hooks/index.js";
  14 | import { PickersTextField } from "../PickersTextField/index.js";
  15 | import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/DateField/index.js:2:1
Module not found: Can't resolve './useDateField.js'
  1 | export { DateField } from "./DateField.js";
> 2 | export { useDateField as unstable_useDateField } from "./useDateField.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/DateField/index.js:2:1
Module not found: Can't resolve './useDateField.js'
  1 | export { DateField } from "./DateField.js";
> 2 | export { useDateField as unstable_useDateField } from "./useDateField.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/DateTimeField/DateTimeField.js:12:1
Module not found: Can't resolve './useDateTimeField.js'
  10 | import useSlotProps from '@mui/utils/useSlotProps';
  11 | import { refType } from '@mui/utils';
> 12 | import { useDateTimeField } from "./useDateTimeField.js";
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  13 | import { useClearableField } from "../hooks/index.js";
  14 | import { PickersTextField } from "../PickersTextField/index.js";
  15 | import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/DateTimeField/DateTimeField.js:12:1
Module not found: Can't resolve './useDateTimeField.js'
  10 | import useSlotProps from '@mui/utils/useSlotProps';
  11 | import { refType } from '@mui/utils';
> 12 | import { useDateTimeField } from "./useDateTimeField.js";
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  13 | import { useClearableField } from "../hooks/index.js";
  14 | import { PickersTextField } from "../PickersTextField/index.js";
  15 | import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/DateTimeField/DateTimeField.js:12:1
Module not found: Can't resolve './useDateTimeField.js'
  10 | import useSlotProps from '@mui/utils/useSlotProps';
  11 | import { refType } from '@mui/utils';
> 12 | import { useDateTimeField } from "./useDateTimeField.js";
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  13 | import { useClearableField } from "../hooks/index.js";
  14 | import { PickersTextField } from "../PickersTextField/index.js";
  15 | import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/DateTimeField/DateTimeField.js:12:1
Module not found: Can't resolve './useDateTimeField.js'
  10 | import useSlotProps from '@mui/utils/useSlotProps';
  11 | import { refType } from '@mui/utils';
> 12 | import { useDateTimeField } from "./useDateTimeField.js";
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  13 | import { useClearableField } from "../hooks/index.js";
  14 | import { PickersTextField } from "../PickersTextField/index.js";
  15 | import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/DateTimeField/index.js:2:1
Module not found: Can't resolve './useDateTimeField.js'
  1 | export { DateTimeField } from "./DateTimeField.js";
> 2 | export { useDateTimeField as unstable_useDateTimeField } from "./useDateTimeField.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/DateTimeField/index.js:2:1
Module not found: Can't resolve './useDateTimeField.js'
  1 | export { DateTimeField } from "./DateTimeField.js";
> 2 | export { useDateTimeField as unstable_useDateTimeField } from "./useDateTimeField.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/internals/hooks/useDesktopPicker/index.js:1:1
Module not found: Can't resolve './useDesktopPicker.js'
> 1 | export { useDesktopPicker } from "./useDesktopPicker.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/internals/hooks/useDesktopPicker/index.js:1:1
Module not found: Can't resolve './useDesktopPicker.js'
> 1 | export { useDesktopPicker } from "./useDesktopPicker.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/internals/hooks/useDesktopPicker/index.js:1:1
Module not found: Can't resolve './useDesktopPicker.js'
> 1 | export { useDesktopPicker } from "./useDesktopPicker.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/internals/hooks/useDesktopPicker/index.js:1:1
Module not found: Can't resolve './useDesktopPicker.js'
> 1 | export { useDesktopPicker } from "./useDesktopPicker.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/DateCalendar/DayCalendar.js:18:1
Module not found: Can't resolve './useIsDateDisabled.js'
  16 | import { DAY_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.js";
  17 | import { PickersSlideTransition } from "./PickersSlideTransition.js";
> 18 | import { useIsDateDisabled } from "./useIsDateDisabled.js";
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  19 | import { findClosestEnabledDate, getWeekdays } from "../internals/utils/date-utils.js";
  20 | import { getDayCalendarUtilityClass } from "./dayCalendarClasses.js";
  21 | import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/DateCalendar/DayCalendar.js:18:1
Module not found: Can't resolve './useIsDateDisabled.js'
  16 | import { DAY_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.js";
  17 | import { PickersSlideTransition } from "./PickersSlideTransition.js";
> 18 | import { useIsDateDisabled } from "./useIsDateDisabled.js";
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  19 | import { findClosestEnabledDate, getWeekdays } from "../internals/utils/date-utils.js";
  20 | import { getDayCalendarUtilityClass } from "./dayCalendarClasses.js";
  21 | import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/DateCalendar/DayCalendar.js:18:1
Module not found: Can't resolve './useIsDateDisabled.js'
  16 | import { DAY_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.js";
  17 | import { PickersSlideTransition } from "./PickersSlideTransition.js";
> 18 | import { useIsDateDisabled } from "./useIsDateDisabled.js";
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  19 | import { findClosestEnabledDate, getWeekdays } from "../internals/utils/date-utils.js";
  20 | import { getDayCalendarUtilityClass } from "./dayCalendarClasses.js";
  21 | import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/DateCalendar/DayCalendar.js:18:1
Module not found: Can't resolve './useIsDateDisabled.js'
  16 | import { DAY_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.js";
  17 | import { PickersSlideTransition } from "./PickersSlideTransition.js";
> 18 | import { useIsDateDisabled } from "./useIsDateDisabled.js";
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  19 | import { findClosestEnabledDate, getWeekdays } from "../internals/utils/date-utils.js";
  20 | import { getDayCalendarUtilityClass } from "./dayCalendarClasses.js";
  21 | import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/hooks/index.js:4:1
Module not found: Can't resolve './useParsedFormat.js'
  2 | export { usePickersTranslations } from "./usePickersTranslations.js";
  3 | export { useSplitFieldProps } from "./useSplitFieldProps.js";
> 4 | export { useParsedFormat } from "./useParsedFormat.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  5 | export { usePickersContext } from "./usePickersContext.js";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/hooks/index.js:4:1
Module not found: Can't resolve './useParsedFormat.js'
  2 | export { usePickersTranslations } from "./usePickersTranslations.js";
  3 | export { useSplitFieldProps } from "./useSplitFieldProps.js";
> 4 | export { useParsedFormat } from "./useParsedFormat.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  5 | export { usePickersContext } from "./usePickersContext.js";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/hooks/index.js:4:1
Module not found: Can't resolve './useParsedFormat.js'
  2 | export { usePickersTranslations } from "./usePickersTranslations.js";
  3 | export { useSplitFieldProps } from "./useSplitFieldProps.js";
> 4 | export { useParsedFormat } from "./useParsedFormat.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  5 | export { usePickersContext } from "./usePickersContext.js";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/hooks/index.js:4:1
Module not found: Can't resolve './useParsedFormat.js'
  2 | export { usePickersTranslations } from "./usePickersTranslations.js";
  3 | export { useSplitFieldProps } from "./useSplitFieldProps.js";
> 4 | export { useParsedFormat } from "./useParsedFormat.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  5 | export { usePickersContext } from "./usePickersContext.js";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/hooks/index.js:5:1
Module not found: Can't resolve './usePickersContext.js'
  3 | export { useSplitFieldProps } from "./useSplitFieldProps.js";
  4 | export { useParsedFormat } from "./useParsedFormat.js";
> 5 | export { usePickersContext } from "./usePickersContext.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/hooks/index.js:5:1
Module not found: Can't resolve './usePickersContext.js'
  3 | export { useSplitFieldProps } from "./useSplitFieldProps.js";
  4 | export { useParsedFormat } from "./useParsedFormat.js";
> 5 | export { usePickersContext } from "./usePickersContext.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/hooks/index.js:5:1
Module not found: Can't resolve './usePickersContext.js'
  3 | export { useSplitFieldProps } from "./useSplitFieldProps.js";
  4 | export { useParsedFormat } from "./useParsedFormat.js";
> 5 | export { usePickersContext } from "./usePickersContext.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/hooks/index.js:5:1
Module not found: Can't resolve './usePickersContext.js'
  3 | export { useSplitFieldProps } from "./useSplitFieldProps.js";
  4 | export { useParsedFormat } from "./useParsedFormat.js";
> 5 | export { usePickersContext } from "./usePickersContext.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/hooks/index.js:2:1
Module not found: Can't resolve './usePickersTranslations.js'
  1 | export { useClearableField } from "./useClearableField.js";
> 2 | export { usePickersTranslations } from "./usePickersTranslations.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3 | export { useSplitFieldProps } from "./useSplitFieldProps.js";
  4 | export { useParsedFormat } from "./useParsedFormat.js";
  5 | export { usePickersContext } from "./usePickersContext.js";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/hooks/index.js:2:1
Module not found: Can't resolve './usePickersTranslations.js'
  1 | export { useClearableField } from "./useClearableField.js";
> 2 | export { usePickersTranslations } from "./usePickersTranslations.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3 | export { useSplitFieldProps } from "./useSplitFieldProps.js";
  4 | export { useParsedFormat } from "./useParsedFormat.js";
  5 | export { usePickersContext } from "./usePickersContext.js";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/hooks/index.js:2:1
Module not found: Can't resolve './usePickersTranslations.js'
  1 | export { useClearableField } from "./useClearableField.js";
> 2 | export { usePickersTranslations } from "./usePickersTranslations.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3 | export { useSplitFieldProps } from "./useSplitFieldProps.js";
  4 | export { useParsedFormat } from "./useParsedFormat.js";
  5 | export { usePickersContext } from "./usePickersContext.js";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/hooks/index.js:2:1
Module not found: Can't resolve './usePickersTranslations.js'
  1 | export { useClearableField } from "./useClearableField.js";
> 2 | export { usePickersTranslations } from "./usePickersTranslations.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3 | export { useSplitFieldProps } from "./useSplitFieldProps.js";
  4 | export { useParsedFormat } from "./useParsedFormat.js";
  5 | export { usePickersContext } from "./usePickersContext.js";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/hooks/index.js:3:1
Module not found: Can't resolve './useSplitFieldProps.js'
  1 | export { useClearableField } from "./useClearableField.js";
  2 | export { usePickersTranslations } from "./usePickersTranslations.js";
> 3 | export { useSplitFieldProps } from "./useSplitFieldProps.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  4 | export { useParsedFormat } from "./useParsedFormat.js";
  5 | export { usePickersContext } from "./usePickersContext.js";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/hooks/index.js:3:1
Module not found: Can't resolve './useSplitFieldProps.js'
  1 | export { useClearableField } from "./useClearableField.js";
  2 | export { usePickersTranslations } from "./usePickersTranslations.js";
> 3 | export { useSplitFieldProps } from "./useSplitFieldProps.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  4 | export { useParsedFormat } from "./useParsedFormat.js";
  5 | export { usePickersContext } from "./usePickersContext.js";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/hooks/index.js:3:1
Module not found: Can't resolve './useSplitFieldProps.js'
  1 | export { useClearableField } from "./useClearableField.js";
  2 | export { usePickersTranslations } from "./usePickersTranslations.js";
> 3 | export { useSplitFieldProps } from "./useSplitFieldProps.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  4 | export { useParsedFormat } from "./useParsedFormat.js";
  5 | export { usePickersContext } from "./usePickersContext.js";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/hooks/index.js:3:1
Module not found: Can't resolve './useSplitFieldProps.js'
  1 | export { useClearableField } from "./useClearableField.js";
  2 | export { usePickersTranslations } from "./usePickersTranslations.js";
> 3 | export { useSplitFieldProps } from "./useSplitFieldProps.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  4 | export { useParsedFormat } from "./useParsedFormat.js";
  5 | export { usePickersContext } from "./usePickersContext.js";



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/internals/hooks/date-helpers-hooks.js:2:1
Module not found: Can't resolve './useUtils.js'
  1 | import * as React from 'react';
> 2 | import { useUtils } from "./useUtils.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3 | import { getMeridiem, convertToMeridiem } from "../utils/time-utils.js";
  4 | export function useNextMonthDisabled(month, {
  5 |   disableFuture,



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/internals/hooks/date-helpers-hooks.js:2:1
Module not found: Can't resolve './useUtils.js'
  1 | import * as React from 'react';
> 2 | import { useUtils } from "./useUtils.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3 | import { getMeridiem, convertToMeridiem } from "../utils/time-utils.js";
  4 | export function useNextMonthDisabled(month, {
  5 |   disableFuture,



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/internals/hooks/date-helpers-hooks.js:2:1
Module not found: Can't resolve './useUtils.js'
  1 | import * as React from 'react';
> 2 | import { useUtils } from "./useUtils.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3 | import { getMeridiem, convertToMeridiem } from "../utils/time-utils.js";
  4 | export function useNextMonthDisabled(month, {
  5 |   disableFuture,



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/internals/hooks/date-helpers-hooks.js:2:1
Module not found: Can't resolve './useUtils.js'
  1 | import * as React from 'react';
> 2 | import { useUtils } from "./useUtils.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3 | import { getMeridiem, convertToMeridiem } from "../utils/time-utils.js";
  4 | export function useNextMonthDisabled(month, {
  5 |   disableFuture,



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/internals/utils/date-utils.js:1:1
Module not found: Can't resolve './views.js'
> 1 | import { areViewsEqual } from "./views.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  2 | export const mergeDateAndTime = (utils, dateParam, timeParam) => {
  3 |   let mergedDate = dateParam;
  4 |   mergedDate = utils.setHours(mergedDate, utils.getHours(timeParam));



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/internals/utils/date-utils.js:1:1
Module not found: Can't resolve './views.js'
> 1 | import { areViewsEqual } from "./views.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  2 | export const mergeDateAndTime = (utils, dateParam, timeParam) => {
  3 |   let mergedDate = dateParam;
  4 |   mergedDate = utils.setHours(mergedDate, utils.getHours(timeParam));



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/internals/utils/date-utils.js:1:1
Module not found: Can't resolve './views.js'
> 1 | import { areViewsEqual } from "./views.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  2 | export const mergeDateAndTime = (utils, dateParam, timeParam) => {
  3 |   let mergedDate = dateParam;
  4 |   mergedDate = utils.setHours(mergedDate, utils.getHours(timeParam));



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@mui/x-date-pickers/internals/utils/date-utils.js:1:1
Module not found: Can't resolve './views.js'
> 1 | import { areViewsEqual } from "./views.js";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  2 | export const mergeDateAndTime = (utils, dateParam, timeParam) => {
  3 |   let mergedDate = dateParam;
  4 |   mergedDate = utils.setHours(mergedDate, utils.getHours(timeParam));



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@toolpad/core/esm/Crud/List.js:13:1
Module not found: Can't resolve '@mui/x-data-grid'
  11 | import Tooltip from '@mui/material/Tooltip';
  12 | import Typography from '@mui/material/Typography';
> 13 | import { DataGrid, GridToolbar, GridActionsCellItem, gridClasses } from '@mui/x-data-grid';
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  14 | import AddIcon from '@mui/icons-material/Add';
  15 | import RefreshIcon from '@mui/icons-material/Refresh';
  16 | import EditIcon from '@mui/icons-material/Edit';



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@toolpad/core/esm/Crud/List.js:13:1
Module not found: Can't resolve '@mui/x-data-grid'
  11 | import Tooltip from '@mui/material/Tooltip';
  12 | import Typography from '@mui/material/Typography';
> 13 | import { DataGrid, GridToolbar, GridActionsCellItem, gridClasses } from '@mui/x-data-grid';
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  14 | import AddIcon from '@mui/icons-material/Add';
  15 | import RefreshIcon from '@mui/icons-material/Refresh';
  16 | import EditIcon from '@mui/icons-material/Edit';



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@toolpad/core/esm/Crud/List.js:13:1
Module not found: Can't resolve '@mui/x-data-grid'
  11 | import Tooltip from '@mui/material/Tooltip';
  12 | import Typography from '@mui/material/Typography';
> 13 | import { DataGrid, GridToolbar, GridActionsCellItem, gridClasses } from '@mui/x-data-grid';
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  14 | import AddIcon from '@mui/icons-material/Add';
  15 | import RefreshIcon from '@mui/icons-material/Refresh';
  16 | import EditIcon from '@mui/icons-material/Edit';



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@toolpad/core/esm/Crud/List.js:13:1
Module not found: Can't resolve '@mui/x-data-grid'
  11 | import Tooltip from '@mui/material/Tooltip';
  12 | import Typography from '@mui/material/Typography';
> 13 | import { DataGrid, GridToolbar, GridActionsCellItem, gridClasses } from '@mui/x-data-grid';
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  14 | import AddIcon from '@mui/icons-material/Add';
  15 | import RefreshIcon from '@mui/icons-material/Refresh';
  16 | import EditIcon from '@mui/icons-material/Edit';



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@toolpad/core/esm/Crud/List.js:13:1
Module not found: Can't resolve '@mui/x-data-grid'
  11 | import Tooltip from '@mui/material/Tooltip';
  12 | import Typography from '@mui/material/Typography';
> 13 | import { DataGrid, GridToolbar, GridActionsCellItem, gridClasses } from '@mui/x-data-grid';
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  14 | import AddIcon from '@mui/icons-material/Add';
  15 | import RefreshIcon from '@mui/icons-material/Refresh';
  16 | import EditIcon from '@mui/icons-material/Edit';



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@toolpad/core/esm/Crud/List.js:13:1
Module not found: Can't resolve '@mui/x-data-grid'
  11 | import Tooltip from '@mui/material/Tooltip';
  12 | import Typography from '@mui/material/Typography';
> 13 | import { DataGrid, GridToolbar, GridActionsCellItem, gridClasses } from '@mui/x-data-grid';
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  14 | import AddIcon from '@mui/icons-material/Add';
  15 | import RefreshIcon from '@mui/icons-material/Refresh';
  16 | import EditIcon from '@mui/icons-material/Edit';



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@toolpad/core/esm/Crud/List.js:13:1
Module not found: Can't resolve '@mui/x-data-grid'
  11 | import Tooltip from '@mui/material/Tooltip';
  12 | import Typography from '@mui/material/Typography';
> 13 | import { DataGrid, GridToolbar, GridActionsCellItem, gridClasses } from '@mui/x-data-grid';
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  14 | import AddIcon from '@mui/icons-material/Add';
  15 | import RefreshIcon from '@mui/icons-material/Refresh';
  16 | import EditIcon from '@mui/icons-material/Edit';



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@toolpad/core/esm/Crud/List.js:13:1
Module not found: Can't resolve '@mui/x-data-grid'
  11 | import Tooltip from '@mui/material/Tooltip';
  12 | import Typography from '@mui/material/Typography';
> 13 | import { DataGrid, GridToolbar, GridActionsCellItem, gridClasses } from '@mui/x-data-grid';
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  14 | import AddIcon from '@mui/icons-material/Add';
  15 | import RefreshIcon from '@mui/icons-material/Refresh';
  16 | import EditIcon from '@mui/icons-material/Edit';



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@toolpad/core/esm/Crud/List.js:13:1
Module not found: Can't resolve '@mui/x-data-grid'
  11 | import Tooltip from '@mui/material/Tooltip';
  12 | import Typography from '@mui/material/Typography';
> 13 | import { DataGrid, GridToolbar, GridActionsCellItem, gridClasses } from '@mui/x-data-grid';
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  14 | import AddIcon from '@mui/icons-material/Add';
  15 | import RefreshIcon from '@mui/icons-material/Refresh';
  16 | import EditIcon from '@mui/icons-material/Edit';



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/@toolpad/core/esm/Crud/List.js:13:1
Module not found: Can't resolve '@mui/x-data-grid'
  11 | import Tooltip from '@mui/material/Tooltip';
  12 | import Typography from '@mui/material/Typography';
> 13 | import { DataGrid, GridToolbar, GridActionsCellItem, gridClasses } from '@mui/x-data-grid';
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  14 | import AddIcon from '@mui/icons-material/Add';
  15 | import RefreshIcon from '@mui/icons-material/Refresh';
  16 | import EditIcon from '@mui/icons-material/Edit';



https://nextjs.org/docs/messages/module-not-found

after running npm install @mui/x-data-grid @mui/x-date-pickers dayjs the error goes away, however it shouldn't need those packages if you don't use Crud

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: x-data-grid, toolpad/core

[paige-throck]

We are having a similar issue, we are currently using @toolpad/core@0.14.0 in our application however we also use the @mui/x-data-grid-pro library as well. In order for us to upgrade to @toolpad/core v0.14 we are required to upgrade to the BETA version of the pro data-grid. We should not be required to upgrade to a unstable version of the grid.

Could not resolve dependency:
npm error peer @mui/x-data-grid@"^8.0.0 || ^8.0.0-beta" from @toolpad/core@0.14.0
npm error node_modules/@toolpad/core
npm error   @toolpad/core@"^0.14.0" from the root project

[rkristelijn]

I got it to work without having to install the additional libs, by changing all imports like @toolpad/core to import ... from '@toolpad/core/DashboardLayout'

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[DanaMC18]

I got it to work without having to install the additional libs, by changing all imports like @toolpad/core to import ... from '@toolpad/core/DashboardLayout'

This saved me. My tests were throwing:

Jest encountered an unexpected token
Details:

    /Users/redacted/src/redacted/core/frontend/node_modules/@toolpad/core/node_modules/@mui/x-data-grid/index.css:3
    .MuiDataGrid {
    ^

    SyntaxError: Unexpected token '.'

       7 |   Typography,
       8 | } from '@mui/material';
    >  9 | import { PageContainer } from '@toolpad/core';
         | ^

Once I updated the imports in those components from import { PageContainer } from '@toolpad/core'; to import { PageContainer } from '@toolpad/core/PageContainer';, I no longer encountered this issue and my tests ran.