search

prateekbh / preact-material-components

preact wrapper for "Material Components for the web"
https://material.preactjs.com
MIT License
552 stars 81 forks source link

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

Open belhassen07 opened 4 years ago

belhassen07 commented 4 years ago 
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 commented 4 years ago

@belhassen07 Did you find any solution for this?

belhassen07 commented 4 years ago

@kontrollanten I actually ditched the whole package.

kontrollanten commented 4 years ago

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

belhassen07 commented 4 years ago

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 commented 3 years ago

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

prateekbh commented 3 years ago

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 commented 3 years ago

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

jsumnerPhD commented 3 years ago

Just fyi - After some poking around, the problem seems to stem from here: https://github.com/prateekbh/preact-material-components/blob/c8343dd1ae39da97ad0841b079bac28b03b8b8ea/ts/Dialog/index.tsx#L81

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 commented 3 years ago

Changing: https://github.com/prateekbh/preact-material-components/blob/c8343dd1ae39da97ad0841b079bac28b03b8b8ea/ts/Base/MaterialComponent.ts#L90

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

prateekbh commented 3 years ago

in your app code are you using class or className?

jsumnerPhD commented 3 years ago

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 commented 3 years ago

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

prateekbh commented 3 years ago

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 commented 3 years ago

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.

prateekbh commented 3 years ago

Master is not ready for preactX and above there is a separate branch for 2.0 but we never reached a stable state in that branch.

jsumnerPhD commented 3 years ago

Ok, I get it. For anyone stumbling across this thread, I found rmwc was a good alternative.