React 18+ Providers error when FC is using children

[taystack]

package	version
typescript	4.9.4
react	18.2.0
@looker/components	4.0.4

I am getting a typescript error when using the <ComponentsProvider>:

Type '{ children: Element }' has no properties in common with type 'IntrinsicAttributes & ComponentsProviderProps'

See here:

Fix: I personally ran into this problem when upgrading to react 18. FC properties no longer expect children, so custom properties need to be more explicit:

export interface ComponentsProviderProps extends ThemeProviderProps, ExtendComponentsTheme, UseI18nProps {
  // ...
}

// Should extend an additional React.PropsWithChildren<{}> type:
export interface ComponentsProviderProps extends ThemeProviderProps, ExtendComponentsTheme, UseI18nProps, React.PropsWithChidlren<{}> {
  // ...
}

I can make a PR for this if that helps.

[taystack]

I made a PR https://github.com/looker-open-source/components/pull/2976

Hopefully this change doesn't break anything - it shouldn't but I had troubles with development.

• It looks like the project follows the workspaces pattern, but there isn't a root package.json for linking the packages together. It's not clear how to install the dependencies for any one package.
• Where is @looker/babel-* stuff and how do I resolve it when I npm install from components/packages/components-providers?

Thanks ya'll.

[elliot-at-looker]

This is being tracked internally with ticket 255844186

[guyellis]

@taystack we are actively working on a change to address this in our internal code base. Once complete we'll release a fix. Thanks.

[mdodgelooker]

@taystack this issue is resolved in v4.1.1.

[guyellis]

@taystack did this resolve your issue?

[taystack]

@guyellis, @mdodgelooker I've verified this works on React18 without any typescript issues. 🌮 thanks for this!