React builder breaks with MUI Popper typings

[smasala]

Current Behavior

I can only replicate this with nx builder.

Error during bundle: Error: my-component.tsx(72,8): semantic error TS2740: Type '{ children: (props: any) => Element; open: boolean;
anchorEl: HTMLButtonElement | null; transition: true; placement: string; }' is missing the following properties from type
'Pick<PopperProps, "open" | "className" | "style" | "slot" | "title" | "defaultChecked" | "defaultValue" |
"suppressContentEditableWarning" | "suppressHydrationWarning" | ... 254 more ... | "popperRef">':
className, style, slot, title, and 255 more.

Storybook can serve it but when you run nx build:myReactLibrary then you get the error above

Expected Behavior

That it builds without errors - just like the nx storybook plugin does

Steps to Reproduce

TS Playground, VSCode typescript server (IDE intellisense) and Storybook all compile the example correctly - only nx run my-lib:build does it fails with the error above.

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQokscA3nAAoRhhZRwC+cIiXIABEAFdgAehDIYvYMgA2tBuGjwWdOHGnS4MABZY4uEpAB2WSzHQBPCBLgTUWACZ1Bw0mXHzFFQBaKWlzSjI6OgIJS3xgCEs4ABEsEAgACgBKVh04ShgJKCSMvN0AHk5uXjguGwBeFhgoCSx+AD5y6SqeKHa8rK8gA

Failure Logs

Environment

  Node : 16.13.1
  OS   : win32 x64
  pnpm : 6.23.6

  nx : 13.3.1
  @nrwl/angular : undefined
  @nrwl/cli : 13.3.1
  @nrwl/cypress : 13.3.1
  @nrwl/devkit : 13.3.1
  @nrwl/eslint-plugin-nx : 13.3.1
  @nrwl/express : undefined
  @nrwl/jest : 13.3.1
  @nrwl/linter : 13.3.1
  @nrwl/nest : 13.3.1
  @nrwl/next : undefined
  @nrwl/node : 13.3.1
  @nrwl/nx-cloud : 13.0.0
  @nrwl/react : 13.3.1
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.3.1
  @nrwl/web : 13.3.1
  @nrwl/workspace : 13.3.1
  @nrwl/storybook : 13.3.1
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 7.4.0
  ---------------------------------------
  Community plugins:
         @jscutlery/semver: 2.15.0
         @jscutlery/semver: 2.15.0
         @nrwl/js: 13.3.1
         @trumbitta/nx-plugin-openapi: 1.10.0

(node:21680) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at myProject\node_modules\tslib\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

[smasala]

I've tried upgrading to latest NX versions and various individual versions using pnpm overrides such as TS, rollup and babel. Could this be a rollup config issue? How does NX react configure rollup differently to the nx storybook builder?

[smasala]

Rollup also complains about not finding globals (also see the nx report output above (deprecated warning)

No name was provided for external module '@mui/material/Button' in output.globals – guessing 'Button'

https://github.com/rollup/rollup/issues/1514#issuecomment-320438924

[smasala]

Still valid in 14.1.8

[mcmxcdev]

We are running into a very similar issue with https://mantine.dev/

If I add e.g. sx prop to Table component, it results in the following error when running nx run ui-components:build:

✖  nx run ui-components:build
       Bundling ui-components...
       Error during bundle: Error: /home/<user>/Applications/Webdevelopment/libs/ui-components/src/lib/table/table.tsx(11,23): semantic error TS2322: Type '{ children: (0 | Element | undefined)[]; sx: { color: string; }; striped?: boolean | undefined; highlightOnHover?: boolean | undefined; captionSide?: "top" | "bottom" | undefined; ... 260 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; }' is not assignable to type 'IntrinsicAttributes & TableProps & RefAttributes<HTMLTableElement>'.
         Property 'sx' does not exist on type 'IntrinsicAttributes & TableProps & RefAttributes<HTMLTableElement>'.
       Bundle failed: ui-components

[mcmxcdev]

@smasala I was able to work around this by setting https://pnpm.io/npmrc#shamefully-hoist to true.

Now it works properly, but note that you do lose some of the strict dependency handling of pnpm as a tradeoff.

[awaisg717]

I have to change the latest "@types/react".

[Cheewbacca]

@smasala The solution for me was to add params onResize and onResizeCapture, which are missing in mui interface for some reason

[jaysoo]

Closing it as it is not an Nx issue but with MUI published interface, and it looks like there is a workaround. We'll bumping out package and types versions as well.

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.