rsnext/examples/with-emotion-swc
ChanHui 8d45aa9bfb
update @types/react version in examples (#57259)
### What?
When I ran `npx create-next-app --example with-turbopack` and installed
dependencies using `yarn`, I found an typescript error(`'SomeComponent'
cannot be used as a JSX component.`).

<img
src="https://github.com/vercel/next.js/assets/51700274/f6c7e478-c0b1-4ea2-996f-4c0c78e3bb4b"
width=400 />

and I realized that the bug is due to the version of
@types/react(18.0.x).
you can check this issue on
[here](https://github.com/vercel/next.js/issues/42292#issuecomment-1594351684)
too.

### Why?
It seems that there is an error occurring in the @types/react version
18.0.x.

### How?
It would be good to change the @types/react version to 18.2.8 in the
next.js examples.

I think this change will resolve [this
issue](https://github.com/vercel/next.js/issues/55080#issue-1884846177)
[NestJS
documentation](https://nextjs.org/docs/app/building-your-application/configuring/typescript#async-server-component-typescript-error)
also states to upgrade the version.

Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2023-10-26 19:52:08 -05:00
..
pages Update with-emotion-swc to use TypeScript (#38744) 2022-07-18 13:25:33 -05:00
shared Fix emotion shouldForwardProp options breaks component selectors (#39390) 2022-08-08 03:46:11 +00:00
.gitignore Add .yarn/install-state.gz to .gitignore (#56637) 2023-10-18 16:34:48 +00:00
next-env.d.ts Remove incorrect entries for pnpm debug log (#47241) 2023-03-26 22:26:05 -07:00
next.config.js Stabilize SWC emotion transform plugin (#37058) 2022-05-21 04:09:30 +00:00
package.json update @types/react version in examples (#57259) 2023-10-26 19:52:08 -05:00
README.md update example Deploy button URLs (#48842) 2023-04-26 13:31:44 -04:00
tsconfig.json Update with-emotion-swc to use TypeScript (#38744) 2022-07-18 13:25:33 -05:00

Emotion Example

Extract and inline critical css with @emotion/css, @emotion/server, @emotion/react, and @emotion/styled.

Preview

Preview the example live on StackBlitz:

Open in StackBlitz

Deploy your own

Deploy the example using Vercel:

Deploy with Vercel

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-emotion-swc with-emotion-swc-app
yarn create next-app --example with-emotion-swc with-emotion-swc-app
pnpm create next-app --example with-emotion-swc with-emotion-swc-app

Deploy it to the cloud with Vercel (Documentation).