Rmwc: Please help this TypeScript problem

[sangdth]

Honestly, I can't make the codesandbox to reproduce the problem, for some reason, the Nextjs template on Codesandbox just stuck when I initiate it, it just spins forever.

I've tried to create with plain React, it just works fine. But it crashes on my Next.js project.

This is what I want, just a simple wrap for Button: https://codesandbox.io/s/wrapped-button-wut7u

When I try to use it in my Nextjs project, I got this error:

ERROR in /Users/sangdth/Projects/saduak/front-end/components/Header/Header.tsx(112,17):
112:17 Type '{ dense: true; label: string; onClick: () => Promise<boolean>; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<FancyProps, "size" | "dense" | "raised" | "unelevated" | "outlined" | "disabled" | "danger" | "children" | "icon" | "trailingIcon" | "ripple"> & Pick<...> & Pick<...>, "dense" | ... 9 more ... | "ripple"> & Partial<...> & Partial<...>'.
  Property 'onClick' does not exist on type 'IntrinsicAttributes & Pick<Pick<FancyProps, "size" | "dense" | "raised" | "unelevated" | "outlined" | "disabled" | "danger" | "children" | "icon" | "trailingIcon" | "ripple"> & Pick<...> & Pick<...>, "dense" | ... 9 more ... | "ripple"> & Partial<...> & Partial<...>'.
    110 |                 dense
    111 |                 label={intl.formatMessage({ id: 'loginSignup' })}
  > 112 |                 onClick={() => Router.push('/login')}
        |                 ^
    113 |               />
    114 |             )}
    115 |           </TopAppBarSection>

In Nextjs project, the ESLint complains nothing. It crashes after the '[ info ] bundled successfully, waiting for typecheck results...'

I tried to dig around Google but almost every answer just points to exactly what I'm doing inside the working sandbox.

I'm stuck. Please help.

[jamesmfriedman]

https://rmwc.io/type-system

Bottom of the docs page

[jamesmfriedman]

As I re-read them, they might be slightly out of date, but same general concept.

You'll want to make your component extend ButtonProps & React.HTMLProps

[sangdth]

Yes, I followed that doc, literally copied from there.

[jamesmfriedman]

@sangdth you're running into an age old React typescript problem which is when you want to use prop names that make sense, but they happen to conflict with real dom attributes.

Fixed the sandbox,
https://codesandbox.io/s/wrapped-button-u2r0k?file=/src/App.tsx

Basically, use Omit anytime you have a conflict. Internally in RMWC it should have omitted the label prop for you, so not sure why that doesn't work. But your desire to use "size" conflicts with the built in DOM attribute.

[sangdth]

AHHHHHHH SO SWEET! It does not crash now! I didn't know the conflict problem.

Thanks so much!