Using materialUI bundle size too large

I do not have a ton of experience with react and webpack but wanted to try it out for a dfinity project.

However when I use materialUI import { TextField } from "@material-ui/core"; I get the following error (after a very long time of Building frontend…)

Building frontend…
Installing canisters…
Installing code for canister predictit, with canister_id rwlgt-iiaaa-aaaaa-aaaaa-cai
Installing code for canister predictit_assets, with canister_id rrkah-fqaaa-aaaaa-aaaaq-cai
Uploading assets to asset canister…
The replica returned an HTTP Error: Http Error: status 413 Payload Too Large, content type “text/plain; charset=UTF-8”, content: Request 0x9d8c0ba81a338ecd15f859d7d60d2466cdae23a28ab3e9360ad5d4734e8f3554 is too large.

Shouldn’t this just import the code surrounding TextField? Minimizing Bundle Size - Material-UI Or am I doing something wrong here and do I need to add something to the config?

Everything is fine when I don’t use the materialUI import and the my only other imports are

import * as React from “react”;
import { render } from “react-dom”;

I set "build": "NODE_ENV=production webpack" so my environment builds as production for the size to get smallest enough to upload. I use Vue 3 + Tailwind.

2 Likes

You could also try not building the source map for production. Add:

devtool: undefined,

to the root of your webpack.config.js

Thanks for the suggestions! sadly both did not do the trick for me maybe I did something wrong. For now I’m just not going to use a component library