Error: Can't resolve '@material-ui/core/styles/createMuiTheme'

[sentinelweb]

I have a project using muirwik that has started failing builds with the error: Error: Can't resolve '@material-ui/core/styles/createMuiTheme'
The project has worked fine and no checges to the module on the weekend and i started another module for a website - but i rolled back to before i started deleted all build folders and still get the error? Just wondering if anyone has seen the error before? (edited)

In build/js/packages/Cuer-remote/kotlin-dce-dev/muirwik-muirwik-components-js-legacy.js i can see the function there so im unsure why webpack wouldn't see it. i see: require('@material-ui/core/styles/createMuiTheme')

and i can see the function in build/js/node_modules/@material-ui/core/es/styles/createTheme.js

I am using

implementation("com.ccfraser.muirwik:muirwik-components:0.8.0") {
    exclude(group = "org.jetbrains.kotlin-wrappers", module = "kotlin-styled")
    exclude(group = "org.jetbrains.kotlin-wrappers", module = "kotlin-react")
    exclude(group = "org.jetbrains.kotlin-wrappers", module = "kotlin-react-dom")
}

any help is appreciated - i am a bit stumped ...

[cfnz]

Just tried it on the starter app, and have the same problem, so at least it is reproducible...

Will try and spend some time on it today...

[Fellach]

Same here, I've just downloaded the start app and I'm not able to install deps. I think it is related to just created issue at material-ui repo: https://github.com/mui-org/material-ui/issues/27172. My guess is they broke something within version 4.12.0 which was released yesterday.

I found a package.json within a jar file with the section

"dependencies": {
    "@material-ui/core": "^4.11.1",
    "@material-ui/lab": "4.0.0-alpha.56",
    "@material-ui/icons": "^4.9.1"
  },

(defined here) A better approach would be pointing an exact version of a lib, such as "@material-ui/core": "4.11.1" to avoid auto-updates in the future. The char ^ bumps minor versions automatically. Is it possible to change the deps?

[Fellach]

one of many warnings from my console:

warning "workspace-aggregator-8e59ff4f-11cb-4ab4-8f98-45785a407aa6 > muirwik-starterapp > muirwik-muirwik-components > @material-ui/core@4.12.1" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0".

[sentinelweb]

It seems to be some dependency as I revertted everything to a version that built fine last week. Still the same error.

On Wed, 7 Jul 2021, 23:23 Marcin Feleniak, @.***> wrote:

one of many warnings from my console:

warning "workspace-aggregator-8e59ff4f-11cb-4ab4-8f98-45785a407aa6 > muirwik-starterapp > muirwik-muirwik-components > @material-ui/core@ 4.12.1" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0".

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/cfnz/muirwik/issues/67#issuecomment-875943689, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAE2GWXIB65VYGLSGWMW67DTWTAVTANCNFSM477DAE6Q .

[cfnz]

@Fellach, thanks, yes, that seems to be the problem, would have taken me a while to find it!

If I pin the Material UI version to 4.11.1 the starter app works, so assume this is the problem.

Will release this as version 0.8.2 shortly.

[cfnz]

Released version 0.8.2 with Material UI pinned... might take a bit to make it to Maven Central. Once available, you will need to do a Gradle clean then build and hopefully everything should work (it did for the starter app).

Material UI version 4.11.2 talks about allowing peer dependencies to React 17 which might make some warnings go away... However I have left it pinned to version 4.11.1 as that seems to work for now.

[Fellach]

Thanks, @cfnz, for lightning fast fix and your work here :)

It works, indeed. Now I can start learning Kotlin

But I've got one more question, unrelated to the bug. How to develop? :D I see there is configured hmr but nothing happens when a file is changing. I've tried with a few gradle commands but maybe haven't found the right one

[sentinelweb]

have you seen this tutorial? I worked through most of them to learn multiplatform only took a few days and they are good examples. This is the react one: https://play.kotlinlang.org/hands-on/Building%20Web%20Applications%20with%20React%20and%20Kotlin%20JS/01_Introduction

and the full set is here: https://play.kotlinlang.org/hands-on/overview

[sentinelweb]

Also many Thanks, @cfnz, that really was a lightning fast fix!

[cfnz]

Thanks for that, and again also thanks to @Fellach for spotting the Material UI version issue.

In terms of answering @Fellach about how to develop, I usually run with the gradle continuous flag. Using this and the Legacy compiler (because the newer IR compiler does not yet support incremental compilation) you get reasonable change/save and browser refresh times, not as quick as using straight javascript, but not too bad.

You can add --continuous to the gradle command line used to start the app, or add it in the IDE... I use IntelliJ, so in the edit Run/Debug Configurations dialog for the browserDevelopmentRun task, I add in --continuous to the Arguments field... it is not so obvious, but these are the arguments passed to gradle.

Also, @Fellach mentioned learning Kotlin, one new area of development that looks interesting, which might direct you away from this Muirwik and React stuff, is Kotlin Compose for the web (and desktop)... still early days, but looks interesting (I still need to check it out properly)... might be the future of Kotlin web development... just thought I would mention it, not to put you off Muirwik, but Compose for the web was not around when I started it, and as mentioned, it might be the future of Kotlin web development :-) (especially since Jetbrains seems to be behind it).

[Fellach]

Hi guys, thanks for your input.

Yes, I was aware of --continuous argument but I thought the HMR in Kotlin is working the same way as in JS world, i.e. keeps a state of app and swaps only one module which makes the development really fast. But I guess that not the case here in Kotlin. The compilation and refresh time takes forever if you used to work with Node tools :)

Thanks for the Kotlin Compose link - interesting, worth checking. It seems that's an Android Jetpack for the web.