Dependency resolution problems

[acrois]

Bug report

Describe the bug

A fresh install of the master branch will yield a broken starter app. There are dependency resolution errors due to the recent update to material-ui

I am testing a fix, may submit a PR if successful.

To Reproduce

Follow README instructions to create a new app. Clear package-lock.json and npm install to attempt to resolve the dependencies.

Simply:
npm start

Attempt to load a subdirectory using mock data. You will be met with an error.

You can also attempt:
npm update on a fresh clone of this repo @ master

Expected behavior

Dependencies install correctly.

Screenshots

System information

• Happens on Windows 10, Alpine, Ubuntu.

Additional context

I found these two releases interesting:
https://github.com/mui-org/material-ui/releases/tag/v4.11.2
https://github.com/mui-org/material-ui/releases/tag/v4.11.4

We fixed an issue related to some packages using incompatible versions of @material-ui/types. This affected @material-ui/core, @material-ui/lab, and @material-ui/styles
@material-ui/[email protected] accidentally included a breaking change.

[ErikBaer]

Hey acrois,
did you by any chance make any progress on this issue, or could you steer me into the right direction for resolving it locally?
I would love to try out the starter-app, but unfortunately I do not get it to run properly due to the described behaviour.
Thanks a lot for your reply and for contributing to this amazing project.
Update:
I bumped the version of @material-ui/core to 4.12.1, which resolved the issue for me.

[acrois]

@ErikBaer I wasn't able to resolve it cleanly by doing it. Maybe I am doing it differently. Specifically what did you change in package.json in your project in order to fix the dependencies? Can you show all the material-ui related entries in your package.json for comparison?

Thanks!

[randy-parcel-ag]

@acrois I am not 100% confident in this update, but this got my initial install working:
"@material-ui/core": "4.12.1",
"@material-ui/icons": "4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@material-ui/styles": "4.11.4",

I had to use --force to get it to take.

[TonyMakis]

Funny, cloning & running this starter-app repo works: https://github.com/storefront-foundation/react-storefront-starter-app

Something about that one's package-lock.json, I guess?

[Samet-Aslan]

@TonyMakis Thank you, worked for me as well.

[acrois]

Thanks @TonyMakis it did work. I think that means the issue exists somewhere between 8.17.4 and current version 8.18.3.

When I cloned it, the issue was non-existent. However, you can not delete both the package-lock.json and node_modules and having a fresh dependency resolution. You can trick it to work by using "--legacy-peer-deps" like "create-react-storefront" does but then the issue with material-ui pops up when you visit a category page which is kinda the real issue underlying it all.

All in all, seems to appear that in order to install or update those dependencies you must always force them to install, but this is unfortunately not documented anywhere.

The material UI components have seemingly really complex dependencies, we may be using "lab" features, etc. so someone who has experience with updating the dependencies should chime in on this. I don't really see an issue using features from libraries like that but I do see a need in sharing the knowledge of how the dependencies can be updated (in the case like this).

@randy-parcel-ag I was able to apply this after creating an app using:
npm create react-storefront@latest --yes test-storefront
which actually created a react-storefront 8.17.4 dependency and not the latest which is 8.18.3

The dependencies just seem to be the exact same but produce different results.

https://github.com/storefront-foundation/create-react-storefront/blob/master/lib/create-react-storefront-internal.js#L69 uses --legacy-peer-deps and this is also a relatively new change as well.

Notice: someone decided they are forcing all users to use --registry=https://npm-proxy.fury.io/moovweb/ argument during create-react-storefront. I don't know if this is interfering with the availability of certain packages or indexes but how do you audit this??

For now we're at the mercy of the third-party deps. Let's --force our way through and hope it doesn't break something else. We'll have to wait until someone more knowledgeable about the dependencies comes along to clarify what's going wrong and resolve the issues.

[alanpilloud]

I found here that this issue comes from @material-ui/lab's version.

https://stackoverflow.com/questions/68356640/how-to-fix-the-error-alpha-is-not-exported-from-material-ui-core-styles-whe

So I my package.json file, I changed

"@material-ui/lab": "^4.0.0-alpha.57",
to
"@material-ui/lab": "4.0.0-alpha.57",

By simply removing the ^ and running npm i, it worked.