Cannot set property className of #<Object> which has only a getter

[belhassen07]

catch-error.js?88ae:35 Uncaught TypeError: Cannot set property className of #<Object> which has only a getter
    at DialogFooterButton.render (MaterialComponent.js?de07:46)

"preact": "^10.1.0"
"preact-cli": "^3.0.0-rc.6"

[kontrollanten]

@belhassen07 Did you find any solution for this?

[belhassen07]

@kontrollanten I actually ditched the whole package.

[kontrollanten]

@belhassen07 Okay, thanks for letting me know. Did you find any other package that could be used with preact?

[belhassen07]

I used @zeit-ui/react which pretty good for my use case and backed by the company. Other than that, it turns out you can use @material-ui with preact, you gotta be careful with bundle size though (meaning use only what you can't recreate easily: Modal? use it, button? probably not, that's my thought process anyway). I hope this helps.

[jsumnerPhD]

I have the same issue with DialogFooterButton. I have also come across this error when using IconButtons, but inconsistently. Any luck finding workarounds?

[prateekbh]

Sorry for the trouble caused.
I am not being able to dedicate more time to maintain this project. I'd be more than happy to call this deprecated.
As fr this issue I suggest pinning the mdc-web dependency to a strict number.
Also the project might not work for PreactX and above

[jsumnerPhD]

@prateekbh Sorry to hear that! It is a nice project that (in my experience so far) makes combining mdc with PreactX almost seamless.

[jsumnerPhD]

Just fyi - After some poking around, the problem seems to stem from here:

preact-material-components/ts/Dialog/index.tsx

Line 81 in c8343dd

<button {...props} className="mdc-button" ref={this.setControlRef}>

Removing the className attribute here and re-building (and then specifying className on the component directly) removes this error.

@prateekbh Any hints as to why this might be problematic?

[jsumnerPhD]

Changing:

preact-material-components/ts/Base/MaterialComponent.ts

Line 90 in c8343dd

element[propName].className = `${userDefinedClasses} ${this.getClassName(

To: element[propName].class resolves the issue.

[prateekbh]

in your app code are you using class or className?

[jsumnerPhD]

Neither really, I am inserting the component "as-is":

<Dialog.Footer>
    <Dialog.FooterButton cancel={true}>Decline</Dialog.FooterButton>
    <Dialog.FooterButton accept={true}>Accept</Dialog.FooterButton>
</Dialog.Footer>

[jsumnerPhD]

@prateekbh I made the PR to show the proposed change... I am not sure it is the best solution though.

[prateekbh]

Are you using this with preactX or preact8?
This intentionally uses className and the user application is supposed to stick to className as well

[jsumnerPhD]

I am using "preact": "^10.4.5" with className not class. Setting className on a component from app code works perfectly. The error seems to be thrown from the library. Indeed, the Cannot set property className of #<Object> which has only a getter error seems to be raised on Dialog.FooterButton only if we set className="mdc-button" from preact-material-components/ts/Dialog/index.tsx. Removing className there and setting it from the app does not throw the error.