Setting up Create React App with @emotion/react v11 and and TypeScript 4.5.5 (Bonus: replacing npm with yarn)

Intro

A quick, straightforward and (as of January 2022) up-to-date guide for setting up create-react-app with the latest versions of emotion (11.7.1) and TypeScript (4.5.5).

This also documents the steps needed to migrate from npm to yarn v3, with offline cache, if you want.

1. initialize the project.
   

   npx create-react-app my-app --template typescript
   

2. install @emotion/react
   

   npm i @emotion/react
   

   emotion v11 includes emotion-theming (https://emotion.sh/docs/theming)

3. Add a property to tsconfig.json:
   

   "jsxImportSource": "@emotion/react"
   

4. Add jsxImportSource pragma to top (important) of each tsx file:
   

   /** @jsxImportSource @emotion/react */
   

Optionally, remove the react import.

Bonus: npm to yarn 3 migration

There aren't a lot of documentation about the latest (again, as of January 2022) version of yarn, 3.1.1. Here's the steps I took to move from npm and enable offline cache.

1. Remove package-lock.json and node_modules.

2. add the following to .gitignore (I like to include a link for context):
   

   # https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
   .yarn/*
   !.yarn/cache
   !.yarn/patches
   !.yarn/plugins
   !.yarn/releases
   !.yarn/sdks
   !.yarn/versions
   

3. add to yarnrc.yml (create it if needed):
   

   nodeLinker: node-modules
   
   yarnPath: .yarn/releases/yarn-3.1.1.cjs
   

4. run yarn.

5. You're done! yarn start should start the dev environment as expected.

6. Optional: replace references to npm in the README.md. npm run -> yarn, npm start -> yarn start, npm test -> yarn test.