Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@material-ui/core has no exported member 'MuiThemeProvider' #16489

Closed
2 tasks done
mateja176 opened this issue Jul 4, 2019 · 7 comments · Fixed by #16490
Closed
2 tasks done

@material-ui/core has no exported member 'MuiThemeProvider' #16489

mateja176 opened this issue Jul 4, 2019 · 7 comments · Fixed by #16490
Labels
bug 🐛 Something doesn't work typescript

Comments

@mateja176
Copy link

mateja176 commented Jul 4, 2019

  • This is not a v0.x issue.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

MuiThemeProvider is exported by @matterial-ui/core or a related package

Current Behavior 😯

Error is thrown
@material-ui/core has no exported member 'MuiThemeProvider'

Steps to Reproduce 🕹

Link:

  1. git clone https://github.com/mateja176/react-hot-starter
  2. cd react-hot-starter
  3. git checkout material-ui-4
  4. npm install
  5. import MuiThemeProvider in src/App.tsx

Context 🔦

MuiThemeProvider was present in version 3 and there is no mention of it having been moved to another place.

Searched here https://material-ui.com/guides/migration-v3/#theme and #13663

Switching palette from dark to light and vice versa does not work without it, among other things.

Your Environment 🌎

Tech Version
Material-UI v4.1.3
React Scripts 3.0.1
Browser Chrome
TypeScript 3.5.1
etc.
@merceyz
Copy link
Member

merceyz commented Jul 5, 2019

It's exported in @material-ui/core but the types are not exported.
For now you can import from @material-ui/core/styles

@mateja176
Copy link
Author

It's exported in @material-ui/core but the types are not exported.
For now you can import from @material-ui/core/styles

It is exported indeed. When you log MuiThemeProvider to the console. the result is:

MuiThemeProvider function ThemeProvider(props) {
  var children = props.children,
      localTheme = props.theme;
  var outerTheme = Object(_useTheme__WEBPACK_IMPORTED_MODULE_6__["default"])();
   true ? warning__WEBPACK_IMPORTED_MODULE_3___default()(outerTheme !== null || typeof localTheme !== 'function', ['Material-UI: you are providing a theme function property ' + 'to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n')) : undefined;
  var theme = react__WEBPACK_IMPORTED_MODULE_1___default.a.useMemo(function () {
    var output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);

    if (outerTheme !== null && output) {
      output[_nested__WEBPACK_IMPORTED_MODULE_7__["default"]] = true;
    }

    return output;
  }, [localTheme, outerTheme]);
  return react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_useTheme_ThemeContext__WEBPACK_IMPORTED_MODULE_5__["default"].Provider, {
    value: theme
  }, children);
}

However the ThemeProvider exported from @material-ui/core/styles is not the same as MuiThemeProvider from @material-ui/core. For example even when ThemeProvider is present, the components do not respond to changes in the theme palette ( the components did respond when MuiThemeProvider was present ). Moreover, @material-ui/core/styles does not export a member named MuiThemeProvider.

@mateja176
Copy link
Author

A temporary workaround is to add the @ts-ignore decorator or to enhance the module i.e.

// @ts-ignore
import { colors, createMuiTheme, MuiThemeProvider } from '@material-ui/core';

@mateja176
Copy link
Author

A temporary workaround is to add the @ts-ignore decorator or to enhance the module i.e.

// @ts-ignore
import { colors, createMuiTheme, MuiThemeProvider } from '@material-ui/core';

Or an even better solution as suggested by @merceyz would be to import MuiThemeProvider from @material-ui/core/styles like so:

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

@koistya
Copy link
Contributor

koistya commented Aug 9, 2019

Do we need to use both ThemeProvider and MuiThemeProvider? Without the later one overriding globals (props) doesn't work.

@SerhiiStepanenko
Copy link

Module not found: Error: Can't resolve '@material-ui/core/styles'
from where to import
MuiThemeProvider?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work typescript
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants