Migration from 11 -> 12 does not include all required changes for @emotion

[paustint]

The migration update-emotion-setup.ts and use-react-jsx-in-tsconfig.ts include much of the setup, but I still had a lot of problems beyond this since jsxImportSource was not added to tsconfig.

I was previously using the Pragme format as shown below.

/** @jsx jsx */
import { jsx } from '@emotion/react'
...
<div css={css`color: black}>...

After I finally got migrated and npm install worked, I noticed some build errors:

ERROR in libs/ui/src/lib/widgets/ItemSelectionSummary.tsx:37:7
TS2322: Type '{ children: Element; css: SerializedStyles; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
    35 |   return (
    36 |     <div
  > 37 |       css={css`
       |       ^^^
    38 |         min-height: 20px;
    39 |       `}
    40 |     >

To resolve I had to do the following:

1. Remove /** @jsx jsx */ from every file that used it
2. Remove import { jsx } from '@emotion/react' from every file that used it
   3. Update all the .babelrc files to use this format "presets": [["@nrwl/react/babel", { "preset-react": { "runtime": "automatic", "importSource": "@emotion/react" } }]],
3. Update all the .babelrc files to use this format "presets": [["@nrwl/react/babel", { "runtime": "automatic", "importSource": "@emotion/react" }]],
   "presets": [["@nrwl/react/babel", { "runtime": "automatic", "importSource": "@emotion/react" }]],
4. Add jsxImportSource": "@emotion/react", to every tsconfig file that had "jsx": "react-jsx", added

It was a pretty painful process and I finally found the last bit of help I needed here: emotion-js/emotion#2111 (comment)

To me, this seems like something that should be part of the migration process, or at least called out as special steps if someone is using the css prop from emotion.

[github-actions]

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.