Dependency error with material-ui/core v5

[yhchan0918]

Module not found: Can't resolve '@material-ui/core/styles/withStyles' in '/Users/yhchan/Downloads/Amckey/node_modules/material-ui-chip-input/lib'

Steps to reproduce"

1. yarn add @material-ui/core@next
2. Error appear Module not found: Can't resolve '@material-ui/core/styles/withStyles' in '/Users/yhchan/Downloads/Amckey/node_modules/material-ui-chip-input/lib'

Reason: As now the The withStyles JSS utility is no longer exported from @material-ui/core/styles. You can refer link

[Planetfunky]

If you are and enthusiast of material-ui, you are using v5 before it's release and wish to get this lib working then I'd suggest patching it yourslef using npm's patch-package then you should modify a couple of lines in your node modules:

Mui import

- var _withStyles =   @@`_interopRequireDefault(require("@material-ui/core/styles/withStyles"));`
+ var _withStyles = _interopRequireDefault(require("@material-ui/styles/withStyles"));

And label width when outlined

- InputMore.labelWidth = shrinkFloatingLabel && this.labelNode && this.labelNode.offsetWidth || 0;
+ InputMore.label = shrinkFloatingLabel && this.labelNode && this.labelNode.textContent;

That should get you going atm, unsure if there would be any other conflicts but so far that's all that I've found.

If anyone finds more conflics with other variants of this input then would be nice if you share them as well. Hopefully the transition to v5 when its fully released will be smoother.

[yjcyun]

After applying the two fixes from above, another error message appears:

"The styles argument provided is invalid. You are providing a function without a theme in the context. One of the parent elements needs to use a ThemeProvider."

Found this merged PR from MUI [core] Remove withStyles from @material-ui/core #26377. With import from "@material-ui/styles/withStyles", there has to be a ThemeProvider.

I ended up doing the following in /material-ui-chip-input/lib/ChipInput.js in addition to the code provided by @Planetfunky

Mui import

+ var _createTheme = _interopRequireDefault(require("@material-ui/core/styles/createTheme"));

Create theme

+ var defaultTheme = _createTheme['default']()

Call withStyles with defaultTheme

- var _default = (0, _withStyles["default"])(styles(), {
-   name: 'WAMuiChipInput'
- })(ChipInput);
+ var _default = (0, _withStyles["default"])(styles(defaultTheme), {
+   name: 'WAMuiChipInput'
+ })(ChipInput);

I'm not sure if this is the right approach as a lot of the other component's unit tests are failing.

[leMaik]

We do not and will not support Material-UI v5, please see https://github.com/TeamWertarbyte/material-ui-chip-input/issues/343#issuecomment-766451429.