Material-ui: Module not found @material-ui/core/ThemeProvider when minimizing bundle size in create react app

[mr-bjerre]

• [x] The issue is present in the latest release.
• [x] 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. | |

[mr-bjerre]

FYI. I've tried both

import { createMuiTheme } from '@material-ui/core/styles';

and

import { createMuiTheme } from '@material-ui/core';

without any luck

[eps1lon]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[eps1lon]

Nevermind, I think I know what's happening. We changed the bundle layout and this section is now outdated.

[mr-bjerre]

Is there a workaround currently? Or should I wait for this issue to be solved?

[eps1lon]

Right now I would not alias @material-ui/core since the improved startup time should be negligible. It only really makes a difference for @material-ui/icons where the documented approach still works.

[mr-bjerre]

So you are suggesting not using option 2 for now?

[eps1lon]

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.

[oliviertassinari]

This issue was first reported in https://twitter.com/_developit/status/1220760229790523392. What if we normalize the file structure to make it work without any configuration?

[eps1lon]

This issue was first reported in twitter.com/_developit/status/1220760229790523392

The tweet is not about this issue.

What if we normalize the file structure to make it work without any configuration?

We can't since we don't ship the same bundles in each package.

[mr-bjerre]

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.

But the error is not about icons?

Module not found: Can't resolve '@material-ui/core/ThemeProvider'

which happens on due to the following import

import { createMuiTheme } from '@material-ui/core';

Maybe I'm just not understanding exactly what you're telling me here

[eps1lon]

Could you provide a small repro with just that code? Sounds very odd that import { createMuiTheme } from '@material-ui/core'; results in a '@material-ui/core/ThemeProvider' import specifier in the bundle.

[mr-bjerre]

While working on a small repo to share I just realized that I had

import { CssBaseline, ThemeProvider } from "@material-ui/core";

I now changed that to

import { CssBaseline } from "@material-ui/core";
import { ThemeProvider } from "@material-ui/styles";

Now I'm getting this error instead

Module not found: Can't resolve '@material-ui/core/createMuiTheme' in '/Users/nixd/Projects/muiv5/src'

I'll share a repo in a bit

[mr-bjerre]

Actually I don't think I need to share anything since I've got it working now. Had to do

import { createMuiTheme } from "@material-ui/core/styles

instead of

import { createMuiTheme } from "@material-ui/core

and

import { ThemeProvider } from "@material-ui/styles";

instead of

import { ThemeProvider } from "@material-ui/core";

Below are my relevant files outlined

theme.ts

import { createMuiTheme } from "@material-ui/core/styles";
import { red } from "@material-ui/core/colors";

// A custom theme for this app
const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#556cd6",
    },
    secondary: {
      main: "#19857b",
    },
    error: {
      main: red.A400,
    },
    background: {
      default: "#fff",
    },
  },
});

export default theme;

App.tsx

import React from "react";
import { CssBaseline } from "@material-ui/core";
import { ThemeProvider } from "@material-ui/styles";
import theme from "./theme";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      Hello World
    </ThemeProvider>
  );
}

export default App;

config-overrides.js

/* config-overrides.js */
const { useBabelRc, override } = require('customize-cra');

module.exports = override(useBabelRc());

.babelrc.js

const plugins = [
  [
    "babel-plugin-transform-imports",
    {
      "@material-ui/core": {
        transform: "@material-ui/core/${member}",
        preventFullImport: true,
      },
      "@material-ui/icons": {
        transform: "@material-ui/icons/${member}",
        preventFullImport: true,
      },
    },
  ],
];

module.exports = { plugins };

package.json

{
  "name": "muiv5",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/core": "^10.0.35",
    "@emotion/styled": "^10.0.27",
    "@material-ui/core": "^5.0.0-alpha.14",
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.19.2",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "typescript": "^4.0.5",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired± build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-plugin-transform-imports": "^2.0.0",
    "customize-cra": "^1.0.0",
    "react-app-rewired": "^2.1.6"
  }
}

I'm left with a bit of confusion on the imports though. E.g. I thought I could import createMuiTheme, ThemeProvider and red from @material-ui/core and that it was the recommended way when tree shaking is enabled. Sorry if I'm being kinda silly here. Also; vscode actually suggest to import from @material-ui/core although it doesn't work (for both createMuiTheme and ThemeProvider).

[oliviertassinari]

@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