Fix support for next version of @material-ui/core #387

mnajdova · 2021-05-20T12:51:27Z

Changes done:

replaces makeStyles, withStyles, createStyles from @material-ui/core/styles with ones from @material-ui/styles. defaultTheme is required to be passed in order to preserve previous behavior.
~~created createTheme util that maps to the legacy createMuiTheme or the new createTheme~~ - reverted these changes see Fix support for next version of @material-ui/core #387 (comment)

Not sure how to test the changes locally, any help is appreciated.

michael-land · 2021-05-24T18:18:56Z

@mnajdova hi, MUI maintainer. Do you have any ideas why custom jss instance or createGenerateClassName in <StyleProvider /> does not work well with notistack?

#389

src/SnackbarContainer.tsx

src/SnackbarItem/SnackbarItem.tsx

mnajdova · 2021-06-02T09:30:55Z

@mnajdova hi, MUI maintainer. Do you have any ideas why custom jss instance or createGenerateClassName in does not work well with notistack?

Not sure without diving too deep. Would be great to test whether v5 will have problems like this, after notistick is compatible with it.

src/SnackbarItem/SnackbarItem.tsx

mlake · 2021-06-02T12:16:02Z

Hi @mnajdova - i'm happy to help test your code in my own project...

in general should be something like the following

git clone git@github.com:mnajdova/notistack.git 
cd notistack
git checkout feat/core-styles-dependencies-updates
npm install
npm run build
npm link

Then cd to a different project set up with material ui v5...

npm link notistack

the npm link commands help build symbolic links which you can use to develop your code locally without publishing npm packages

mnajdova · 2021-06-02T21:07:33Z

Thanks @mlake, will try this tomorrow.

oliviertassinari · 2021-06-04T13:55:24Z

It's probably worth saying that this approach was already tested and released on the data grid with mui/mui-x#1627

mnajdova · 2021-06-04T14:52:58Z

I've tried testing locally, but there is a problem with the improts.

Basically the import:

import * as styles from '@material-ui/core/styles';

is being transformed to:

import { createMuiTheme, createTheme as createTheme$1, emphasize } from '@material-ui/core/styles';

which then fails as createTheme is not exported from v4. I would revert this to always use the createMuiTheme (it is deprecated in v5, but I don't think there is anything else I can do right now.

mnajdova · 2021-06-04T14:54:30Z

I tried testing locally, but I got some Invalid hook call. errors, probably didn't link the project correctly, I am not sure. If someone can test a simple scenario whether it work with both v4 and v5 it would be great.

mlake · 2021-06-04T15:37:11Z

also got the invalid hook call when I tested..wasn't sure how to go about fixing it

oliviertassinari · 2021-06-04T23:17:46Z

@iamhosseindhv Do you have guidance on these changes?

DmitriySot · 2021-06-06T11:43:59Z

looks like you guys also have no idea from which package you need to import

oliviertassinari · 2021-06-06T11:58:05Z

@DmitriySot What do you mean?

DmitriySot · 2021-06-06T12:10:46Z

I mean that material-ui updated a few weeks ago with some breaking changes related to migration and removing jss. And for me is not too clear from which package I need to import something that will not be deprecated in the next version.And I see that @mnajdova also can't update notistack for that time

oliviertassinari · 2021-06-06T12:54:52Z

I need to import something that will not be deprecated in the next version

@DmitriySot The @material-ui/styles package will be deprecated and removed. Related to mui/material-ui#26571

yurtaev · 2021-06-07T04:00:01Z

I'm just trying to upgrade @material-ui to v5.0.0-alpha.35 on my project. I use yarn patch as workaround to fix notistack. What about releasing the fix as alpha tag? and pin @material-ui/* deps to v5

mnajdova · 2021-06-07T15:16:52Z

looks like you guys also have no idea from which package you need to import

@DmitriySot comments like this are not really helpful and productive.

I mean that material-ui updated a few weeks ago with some breaking changes related to migration and removing jss. And for me is not too clear from which package I need to import something that will not be deprecated in the next version. And I see that @mnajdova also can't update notistack for that time

We would like to contribute to make notistack compatible with both Material-UI v4 and v5 at the same time, so that it won't break until it is upgraded to v5. Regarding what should we imported from where, we try to list everything in the migration guide, for these specific changes, there is more info https://github.com/mui-org/material-ui/blob/next/docs/src/pages/guides/migration-v4/migration-v4.md#material-uicorestyles Anyway I don't think it's productive to discuss things like this in this PR, you can open an issue for clarifying things.

Again, whoever can help test out notistack with both v4 and v5 would help with merging the PR.

ocodista · 2021-06-08T16:19:50Z

I'm getting an error with the new release of MUI.

styles$2.withStyles is not a function
at Object. (node_modules\notistack\dist\notistack.cjs.development.js:227:47)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object. (node_modules\notistack\dist\index.js:7:20)

yurtaev · 2021-06-10T06:40:02Z

I prepared codesanboxes:

I see the warning for v5:

Material-UI: the createMuiTheme function was renamed to createTheme.

You should use `import { createTheme } from '@material-ui/core/styles'`

hauptrolle · 2021-06-10T08:03:58Z

@yurtaev Hey, it looks like the spacing between the notifications is missing? 🤔

belayaShlyapa · 2021-06-14T10:01:47Z

@iamhosseindhv Do we have some news please ?
I'm still stuck by Attempted import error: 'makeStyles' is not exported from '@material-ui/core/styles'. error using material-ui v5.

yurtaev · 2021-07-02T12:02:34Z

Note: related #396 to fix #387 (comment)

deldrid1 · 2021-07-08T17:00:06Z

EDIT: Just use "notistack": "2.0.1-alpha.4", and all is right with MUI v5.0.0-beta.0.

When yarn installing with a dependency key/value pair of "notistack": "https://github.com/mnajdova/notistack.git#82a1975b255b8be6b43b3d61c03bac36366eae47", in package.json, I get the following error emitted:

warning " > notistack@1.0.9" has incorrect peer dependency "@material-ui/core@^4.0.0".

On top of that something appears to still be broken - My next.js app complains with

Module not found: Can't resolve 'notistack'
> import { SnackbarProvider } from 'notistack';

Any suggestions on how to use the MUI v5 beta with this? The Code Sandbox example above appears to play nice...

iamhosseindhv · 2021-07-13T23:13:35Z

Apologies for responding so late. Been dealing with Covid and international travel. Thanks @mnajdova for opening the PR. Couple of things I can think of:

Do we have to list @material-ui/styles in peerDependencies now?
If so, I wouldn't merge this into master as it'd force users that are locked with MUI v4 to download the new dependency. Currently the branch structure is as follows:

branch	Published with tag	Compatible
`master`	`latest`	MUI v4
`next`	`next`	MUI v5

Could this PR be rebased and merged into next branch?

MasterNeuromancer · 2021-07-14T00:00:44Z

thanks @iamhosseindhv . I look forward to trying out the new version. Hope all is well.

lpfrenette · 2021-07-14T01:09:04Z

I think that material-ui made the decision for you. I ran into the problem that changes in 4.12 reflect was will be happening in 5.x. So i think you master branch should switch to 4.12 or 5 and above and people who locked their version of material-ui to 4.11 and bellow most likely have also lock notistack to 1.09. If not they will update material ui or lock notistack to 1.09. Anyway you know what your doing! Thanks for doing it!

mwhitney-butter · 2021-07-15T19:16:20Z

"@material-ui/core": "^5.0.0-beta.0"
"notistack": "^1.0.6-next.1"

Failed to compile.

./node_modules/notistack/dist/notistack.esm.js
Attempted import error: 'makeStyles' is not exported from '@material-ui/core/styles'.

thoughts?

ivanvladimirov · 2021-07-15T19:32:00Z

"@material-ui/core": "^5.0.0-beta.0"
"notistack": "^1.0.6-next.1"
Failed to compile.

./node_modules/notistack/dist/notistack.esm.js
Attempted import error: 'makeStyles' is not exported from '@material-ui/core/styles'.
thoughts?

That's what this PR is about to fix

mwhitney-butter · 2021-07-15T20:26:36Z

"@material-ui/core": "^5.0.0-beta.0"
"notistack": "^1.0.6-next.1"
Failed to compile.

./node_modules/notistack/dist/notistack.esm.js
Attempted import error: 'makeStyles' is not exported from '@material-ui/core/styles'.
thoughts?
That's what this PR is about to fix

what's the timeline for this PR being merged?

mnajdova · 2021-07-15T20:34:25Z

Could this PR be rebased and merged into next branch?

I thought there is one branch (master) to support all versions. If this is not the case, I would say the best is to migrate to emotion in the next branch so that there isn't any overhead added with bundling both JSS and emotion.

mwhitney-butter · 2021-07-15T20:46:46Z

eventually, need a tagged version of notistack on master that uses material-ui v4 with JSS and a tagged version of notistack on master that uses material-ui v5 with emotion so people can choose which version of notistack they want that's in alignment with the version of material-ui theyre using. until notistack next branch gets merged into master, next branch should only have emotion, then when next branch gets merged into master, the release will be the aforementioned tag on master that uses material-ui v5. for now we definitely need this PR on the next branch of notistack so we can use it with material-ui next

Could this PR be rebased and merged into next branch?

I thought there is one branch (master) to support all versions. If this is not the case, I would say the best is to migrate to emotion in the next branch so that there isn't any overhead added with bundling both JSS and emotion.

mtr1990 · 2021-07-16T12:07:03Z

When will we have a version that supports MUI beta v5?

I've been waiting for this package to update for 2 months but still no results.

ivanvladimirov · 2021-07-16T12:15:29Z

When will we have a version that supports MUI beta v5?

I've been waiting for this package to update for 2 months but still no results.

Same here. Good thing my project is still in development. I hope this PR gets merged soon.

Lure5134 · 2021-07-16T12:16:54Z

Just upgrade to notistack@next and it will work with material UI 5

vbornand · 2021-07-16T12:20:34Z

Just upgrade to notistack@next and it will work with material UI 5

It's not totally correct, it works only with MUI >= 5.00-alpha.34:

Unstable MUI >= 5.0.0-alpha.35: Wait for Fix support for next version of @material-ui/core #387 to be merged.

MUI <= 5.0.0-alpha.34 or >= 4.12.0: Use npm i notistack@next or lock to version npm i notistack@1.0.6-next.1. See a working example

MUI < 4.12.0: Use the latest. npm i notistack or npm i notistack@latest.

ivanvladimirov · 2021-07-16T12:26:57Z

Material-UI is currently at its second beta of v5 and styling functions are not part of "core" anymore, therefore notistack cannot work with the new version of MUI

mnajdova · 2021-07-16T12:40:19Z

@iamhosseindhv I propose updating to the styled() and sx API in the next branch, so that it doesn't depend on two styling solutions (JSS and emotion).

When this PR was introduced, the goal was to make notistack compatible with both v4 and v5 in the transition period. Now that Material-UI is in beta and this was still not merged, I propose we abandon it and focus on updating the next branch. Let me know if you need some help with/instructions with it.

stass-1 · 2021-07-22T17:28:19Z

@iamhosseindhv currently we don't have any opened tickets or pull-requests to track progress with getting notistack work with MUI v5 beta

iamhosseindhv · 2021-08-01T20:40:57Z

@stass-1 #412 is an open issue to make notistack compatible with MUI 5 beta

th851dan · 2021-09-10T12:13:02Z

mui5 is released and has a new package name(@mui/material). Do you want to make notistack compatible? @iamhosseindhv

mnajdova · 2021-09-10T12:29:08Z

mui5 is released and has a new package name(@mui/material). Do you want to make notistack compatible? @iamhosseindhv

There is a codemod that should enable fast migration to the new package names - https://github.com/mui-org/material-ui/blob/next/packages/mui-codemod/README.md#mui-replace

iamhosseindhv · 2021-09-11T13:00:48Z

Thanks @mnajdova. @th851dan We have #423 for that issue

init

4542b2e

yurtaev reviewed Jun 2, 2021

View reviewed changes

src/SnackbarContainer.tsx Outdated Show resolved Hide resolved

yurtaev reviewed Jun 2, 2021

View reviewed changes

src/SnackbarItem/SnackbarItem.tsx Outdated Show resolved Hide resolved

Update src/SnackbarContainer.tsx

bf8e599

Update src/SnackbarItem/SnackbarItem.tsx

fca3021

mnajdova commented Jun 2, 2021

View reviewed changes

src/SnackbarItem/SnackbarItem.tsx Outdated Show resolved Hide resolved

Update src/SnackbarItem/SnackbarItem.tsx

7996776

duongdev approved these changes Jun 3, 2021

View reviewed changes

mnajdova mentioned this pull request Jun 4, 2021

[styles] My app have memory leak on browser after using material-ui. mui/material-ui#21528

Closed

2 tasks

use createMuiTheme

82a1975

jannes-io mentioned this pull request Jun 11, 2021

Support for material-ui/core@5 #388

Closed

This comment has been minimized.

Sign in to view

iamhosseindhv mentioned this pull request Jul 13, 2021

Make notistack compatible with alpha/unstable version of MUI #395

Closed

This was referenced Jul 14, 2021

this.props undefined on the unstable release #393

Closed

Make notistack compatible with MUI v5 unstable beta #401

Closed

iamhosseindhv mentioned this pull request Jul 14, 2021

[2.0.1-alpha.4] - snackbars not work #400

Closed

mnajdova closed this Jul 19, 2021

This was referenced Aug 1, 2021

Make necessary changes to migrate to Material UI v5 #415

Closed

Material-UI 5.0 support #412

Closed

iamhosseindhv mentioned this pull request Aug 18, 2021

V1.0.10 remove withStyles #417

Closed

Fix support for next version of @material-ui/core #387

Fix support for next version of @material-ui/core #387

Conversation

mnajdova commented May 20, 2021 • edited Loading

michael-land commented May 24, 2021 • edited Loading

mnajdova commented Jun 2, 2021

mlake commented Jun 2, 2021 • edited Loading

mnajdova commented Jun 2, 2021

oliviertassinari commented Jun 4, 2021

mnajdova commented Jun 4, 2021

mnajdova commented Jun 4, 2021

mlake commented Jun 4, 2021

oliviertassinari commented Jun 4, 2021

DmitriySot commented Jun 6, 2021

oliviertassinari commented Jun 6, 2021

DmitriySot commented Jun 6, 2021 • edited Loading

oliviertassinari commented Jun 6, 2021 • edited Loading

yurtaev commented Jun 7, 2021

mnajdova commented Jun 7, 2021

ocodista commented Jun 8, 2021

yurtaev commented Jun 10, 2021

hauptrolle commented Jun 10, 2021

belayaShlyapa commented Jun 14, 2021 • edited Loading

This comment has been minimized.

yurtaev commented Jul 2, 2021

deldrid1 commented Jul 8, 2021 • edited Loading

iamhosseindhv commented Jul 13, 2021 • edited Loading

MasterNeuromancer commented Jul 14, 2021

lpfrenette commented Jul 14, 2021 via email

mwhitney-butter commented Jul 15, 2021

ivanvladimirov commented Jul 15, 2021

mwhitney-butter commented Jul 15, 2021

mnajdova commented Jul 15, 2021

mwhitney-butter commented Jul 15, 2021 • edited Loading

mtr1990 commented Jul 16, 2021

ivanvladimirov commented Jul 16, 2021

Lure5134 commented Jul 16, 2021

vbornand commented Jul 16, 2021

ivanvladimirov commented Jul 16, 2021

mnajdova commented Jul 16, 2021

stass-1 commented Jul 22, 2021

iamhosseindhv commented Aug 1, 2021

th851dan commented Sep 10, 2021

mnajdova commented Sep 10, 2021

iamhosseindhv commented Sep 11, 2021

mnajdova commented May 20, 2021 •

edited

Loading

michael-land commented May 24, 2021 •

edited

Loading

mlake commented Jun 2, 2021 •

edited

Loading

DmitriySot commented Jun 6, 2021 •

edited

Loading

oliviertassinari commented Jun 6, 2021 •

edited

Loading

belayaShlyapa commented Jun 14, 2021 •

edited

Loading

deldrid1 commented Jul 8, 2021 •

edited

Loading

iamhosseindhv commented Jul 13, 2021 •

edited

Loading

mwhitney-butter commented Jul 15, 2021 •

edited

Loading