Module not found @material-ui/core/ThemeProvider when minimizing bundle size in create react app
See original GitHub issue- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
I get
Module not found: Can't resolve '@material-ui/core/ThemeProvider'
Expected Behavior 🤔
I don’t expect any errors.
Steps to Reproduce 🕹
Since this is a bug related to the project setup then I can’t make a codesandbox for it
Steps:
- npx create-react-app my_app --template typescript
- install material core
5.0.0-alpha.13
npm add -D babel-plugin-transform-imports react-app-rewired customize-cra
- Update
package.json
and create.babelrc.js
,config-overrides.js
files as outlined in the docs. - create source content as in this example.
Context 🔦
Your Environment 🌎
Tech | Version |
---|---|
Material-UI | v5.0.0-alpha.13 |
React | v16.14.0 |
Browser | |
TypeScript | v4.0.3 |
etc. |
Issue Analytics
- State:
- Created 3 years ago
- Comments:18 (18 by maintainers)
Top Results From Across the Web
Module not found @material-ui/core/ThemeProvider when ...
Current Behavior I get Module not found: Can't resolve ... when minimizing bundle size in create react app #23208. Closed. 2 tasks done....
Read more >How to minimize the bundle size of a react app?
Everything works fine but its build size is a little over the top. In my app, there are 8 components and 2 small...
Read more >Analyzing the Bundle Size - Create React App
Analyzing the Bundle Size. Source map explorer analyzes JavaScript bundles using the source maps. This helps you understand where code bloat ...
Read more >Analyze your React app's bundle size and reduce it using ...
An app's bundle size is the amount of JavaScript a user will have to download to load your app. The bigger the bundle...
Read more >Minimizing bundle size - Material UI - MUI
Learn more about the tools you can leverage to reduce the bundle size. ... If you are using Create React App, you will...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@eps1lon From what I understand, the tweet mentions that there are a few modules that need an exception because they don’t follow the folder convention (
import x from '@material-ui/core/x'
). The relevant link from the gist the tweet has: https://gist.github.com/developit/037baaec2a0a1e64e628c84fdd5c1107#file-babel-plugin-transform-mui-imports-js-L19I suggest using option 1 only for @material-ui/icons only where it has the biggest benefit. Anything not using babel plugins should be safe regardless.