CODEWITHSUNDEEP
material-uinode-modulesviteserver-side-renderingmui-x-date-picker
Andrew
Andrew

Reputation: 11

Vite SSR build fails with MUI icons and date-time-picker

I have default VITE ssr playground with additional MUI packages github.

After I import any MUI icon and adapter from date-time-picker, everything works fine in dev mode. But after making a build, server stops with errors: In case with date-time-picker:

file:///home/user/%D0%A0%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9%20%D1%81%D1%82%D0%BE%D0%BB/Study/traines/mui_vite/dist/server/entry-server.js:4
import { AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs/index.js";
         ^^^^^^^^^^^^
SyntaxError: Named export 'AdapterDayjs' not found. The requested module '@mui/x-date-pickers/AdapterDayjs/index.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@mui/x-date-pickers/AdapterDayjs/index.js';
const { AdapterDayjs} = pkg;

Following this suggestion I recieve:

export { AdapterDayjs } from './AdapterDayjs';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)

So, I found extra packages inside x-date-picker. After adding /node at import it works import { AdapterDayjs} from "@mui/x-date-pickers/node/AdapterDayjs/index.js";

In case with MUI icon, I get

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at Ib (/home/user/Рабочий стол/Study/traines/mui_vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:72:155)
    at W (/home/user/Рабочий стол/Study/traines/mui_vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:89)
    at Jb (/home/user/Рабочий стол/Study/traines/mui_vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:76:98)
    at Ib (/home/user/Рабочий стол/Study/traines/mui_vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:68:145)
    at W (/home/user/Рабочий стол/Study/traines/mui_vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:89)
    at Ib (/home/user/Рабочий стол/Study/traines/mui_vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:68:479)

It takes me a week to find out that problem in this components. I did not find any relative issues neither at github nor at discord server. It seems for that problem somewhere at module resolution bundling logic, but I can't figure out how to solve it

Upvotes: 1

Views: 1034

Answers (1)

Sy Le
Sy Le

Reputation: 89

I got it working with remixjs which also uses Vite build. You can refer to my original post here, but the short version is to you need to lazy load this component with suspense. Link to the github issue: https://github.com/mui/mui-x/issues/8849#issuecomment-2028204577

Instead of directly importing DateTimeInput which does not work, as shown below:

// this code does not work
import { DateTimeInput } from 'src/component/input/DateTimeInput';

function Form() {
  return <>
    <DateTimeInput />
  </>
}

I changed it to lazy loading and Suspense, resulting in successful execution. This code works for me.

// this will work
import { Suspense, lazy, useState } from 'react';

const DateTimeInput = lazy(() => import(`~/src/component/input/DateTimeInput`));

function Form() {
  return <Suspense>
    <DateTimeInput />
  </Suspense>
}

Upvotes: 1

Related Questions