question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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:

  1. npx create-react-app my_app --template typescript
  2. install material core 5.0.0-alpha.13
  3. npm add -D babel-plugin-transform-imports react-app-rewired customize-cra
  4. Update package.json and create .babelrc.js, config-overrides.js files as outlined in the docs.
  5. 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:closed
  • Created 3 years ago
  • Comments:18 (18 by maintainers)

github_iconTop GitHub Comments

1reaction
oliviertassinaricommented, Oct 27, 2020

@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-L19

1reaction
eps1loncommented, Oct 26, 2020

So you are suggesting not using option 2 for now?

I 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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found