Issues migrating from Webpack with Material-UI

[chrismcv]

Hi,
I'm attempting to migrate a large webpack React app over to vite, and have been working my way through lots of issues.

I've come up against an issue that I'm not sure how to proceed with.

I'm using @material-ui/core, and also @material-ui/pickers, and also, @material-ui/lab.

I get quite a lot of warnings about `sideEffects on the dependency optimisation

> node_modules/@material-ui/pickers/esm/DatePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/DialogContent/index.js" was marked as having no side effects 31 │ import '@material-ui/core/DialogContent'; ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file 51 │ "sideEffects": false, ╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DatePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/Dialog/index.js" was marked as having no side effects
32 │ import '@material-ui/core/Dialog';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DatePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/Popover/index.js" was marked as having no side effects
33 │ import '@material-ui/core/Popover';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DatePicker.js: warning: Ignoring this import because "node_modules/@material-ui/pickers/esm/Clock-13c8f33d.js" was marked as having no side effects
34 │ import './Clock-13c8f33d.js';
╵ ~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/pickers/package.json: note: "sideEffects" is false in the enclosing "package.json" file
18 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DatePicker.js: warning: Ignoring this import because "node_modules/@material-ui/pickers/esm/ClockView.js" was marked as having no side effects
35 │ import './ClockView.js';
╵ ~~~~~~~~~~~~~~~~
node_modules/@material-ui/pickers/package.json: note: "sideEffects" is false in the enclosing "package.json" file
18 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/TimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/Typography/index.js" was marked as having no side effects
8 │ import '@material-ui/core/Typography';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/TimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/styles/index.js" was marked as having no side effects
9 │ import '@material-ui/core/styles';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/TimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/Button/index.js" was marked as having no side effects
11 │ import '@material-ui/core/Button';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/TimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/Toolbar/index.js" was marked as having no side effects
12 │ import '@material-ui/core/Toolbar';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/TimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js" was marked as having no side effects
13 │ import './Wrapper-241966d7.js';
╵ ~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/pickers/package.json: note: "sideEffects" is false in the enclosing "package.json" file
18 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/TimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/pickers/esm/Calendar-11ae61f6.js" was marked as having no side effects
14 │ import './Calendar-11ae61f6.js';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/pickers/package.json: note: "sideEffects" is false in the enclosing "package.json" file
18 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/TimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/TextField/index.js" was marked as having no side effects
15 │ import '@material-ui/core/TextField';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/TimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/IconButton/index.js" was marked as having no side effects
16 │ import '@material-ui/core/IconButton';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/TimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/InputAdornment/index.js" was marked as having no side effects
17 │ import '@material-ui/core/InputAdornment';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/TimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/SvgIcon/index.js" was marked as having no side effects
19 │ import '@material-ui/core/SvgIcon';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/TimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/pickers/esm/Day.js" was marked as having no side effects
27 │ import './Day.js';
╵ ~~~~~~~~~~
node_modules/@material-ui/pickers/package.json: note: "sideEffects" is false in the enclosing "package.json" file
18 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/TimePicker.js: warning: Ignoring this import because "node_modules/react-transition-group/esm/index.js" was marked as having no side effects
28 │ import 'react-transition-group';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/react-transition-group/package.json: note: "sideEffects" is false in the enclosing "package.json" file
65 │ "sideEffects": false
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/TimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/CircularProgress/index.js" was marked as having no side effects
29 │ import '@material-ui/core/CircularProgress';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/TimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/DialogActions/index.js" was marked as having no side effects
30 │ import '@material-ui/core/DialogActions';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/TimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/DialogContent/index.js" was marked as having no side effects
31 │ import '@material-ui/core/DialogContent';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/TimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/Dialog/index.js" was marked as having no side effects
32 │ import '@material-ui/core/Dialog';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/TimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/Popover/index.js" was marked as having no side effects
33 │ import '@material-ui/core/Popover';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/TimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/pickers/esm/Clock-13c8f33d.js" was marked as having no side effects
34 │ import './Clock-13c8f33d.js';
╵ ~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/pickers/package.json: note: "sideEffects" is false in the enclosing "package.json" file
18 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/TimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/pickers/esm/ClockView.js" was marked as having no side effects
35 │ import './ClockView.js';
╵ ~~~~~~~~~~~~~~~~
node_modules/@material-ui/pickers/package.json: note: "sideEffects" is false in the enclosing "package.json" file
18 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DateTimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/Typography/index.js" was marked as having no side effects
8 │ import '@material-ui/core/Typography';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DateTimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/Button/index.js" was marked as having no side effects
11 │ import '@material-ui/core/Button';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DateTimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/Toolbar/index.js" was marked as having no side effects
12 │ import '@material-ui/core/Toolbar';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DateTimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js" was marked as having no side effects
13 │ import './Wrapper-241966d7.js';
╵ ~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/pickers/package.json: note: "sideEffects" is false in the enclosing "package.json" file
18 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DateTimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/pickers/esm/Calendar-11ae61f6.js" was marked as having no side effects
14 │ import './Calendar-11ae61f6.js';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/pickers/package.json: note: "sideEffects" is false in the enclosing "package.json" file
18 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DateTimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/TextField/index.js" was marked as having no side effects
15 │ import '@material-ui/core/TextField';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DateTimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/IconButton/index.js" was marked as having no side effects
16 │ import '@material-ui/core/IconButton';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DateTimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/InputAdornment/index.js" was marked as having no side effects
17 │ import '@material-ui/core/InputAdornment';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DateTimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/pickers/esm/Day.js" was marked as having no side effects
27 │ import './Day.js';
╵ ~~~~~~~~~~
node_modules/@material-ui/pickers/package.json: note: "sideEffects" is false in the enclosing "package.json" file
18 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DateTimePicker.js: warning: Ignoring this import because "node_modules/react-transition-group/esm/index.js" was marked as having no side effects
28 │ import 'react-transition-group';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/react-transition-group/package.json: note: "sideEffects" is false in the enclosing "package.json" file
65 │ "sideEffects": false
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DateTimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/CircularProgress/index.js" was marked as having no side effects
29 │ import '@material-ui/core/CircularProgress';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DateTimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/DialogActions/index.js" was marked as having no side effects
30 │ import '@material-ui/core/DialogActions';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DateTimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/DialogContent/index.js" was marked as having no side effects
31 │ import '@material-ui/core/DialogContent';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DateTimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/Dialog/index.js" was marked as having no side effects
32 │ import '@material-ui/core/Dialog';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DateTimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/core/esm/Popover/index.js" was marked as having no side effects
33 │ import '@material-ui/core/Popover';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/core/package.json: note: "sideEffects" is false in the enclosing "package.json" file
51 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DateTimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/pickers/esm/Clock-13c8f33d.js" was marked as having no side effects
34 │ import './Clock-13c8f33d.js';
╵ ~~~~~~~~~~~~~~~~~~~~~
node_modules/@material-ui/pickers/package.json: note: "sideEffects" is false in the enclosing "package.json" file
18 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

node_modules/@material-ui/pickers/esm/DateTimePicker.js: warning: Ignoring this import because "node_modules/@material-ui/pickers/esm/ClockView.js" was marked as having no side effects
35 │ import './ClockView.js';
╵ ~~~~~~~~~~~~~~~~
node_modules/@material-ui/pickers/package.json: note: "sideEffects" is false in the enclosing "package.json" file
18 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~

89 warnings

Vite dev server running at:

Local: http://localhost:3000/
Network: http://192.168.88.253:3000/
Network: http://192.168.1.55:3000/
Network: http://10.40.1.236:3000/

ready in 17970ms.

So I suspect my issue below is related to the warnings above, but not sure how to resolve it.

When using the @material-ui/core library, I'm finding half of the components are present and the other half aren't. e.g. withStyles is present, but createStyles isn't. See more examples below

I assume tree shaking is in play here, but the main module doesn't seem to be getting re-hydrated in time with the components that are needed.

Any advice on how to debug this further?

[yyx990803]

Can you narrow this down to a minimal reproduction?

Problems like this typically can't be resolved without code to look at.

[chrismcv]

Thanks @yyx990803.

I've been trying to do exactly that, and currently have the base react-ts app, with the 4 dependencies that are causing me pain, and then have introduce async imports with React.lazy(() => import("./Compenent")) and Suspense .

Frustratingly, so far I've failed to reproduce the issue. So I guess I'm wondering if there is advice on where the issue is likely to be between things like

1. yarn workspaces/monorepo setup
2. there are around 100 other npm dependencies, would introducing 10 at a time be a sensible approach?
3. initialisation logic in my current application that determines the order of the downloading chunks?
4. are the things in .vite/esbuild.json that are worth looking at?
5. does seeing the "missing" dependency in a chunk in .vite/node_modules indicate a runtime issue rather than (pre-)build?

[yyx990803]

You can do a binary search, include half of the untested deps to narrow it down.

Both .vite/esbuild.json and .vite/metadata.json would be actually useful here. I suspect it's entry analysis issues in the new esbuild-based dep optimizer.

[yyx990803]

Also, beta.50 released this morning has disabled esbuild treeshaking of sideEffects for dep pre-bundling, maybe that already fixed your issue?