Emotion: create-react-app failed to compile

[ralexhassle]

Current behavior:

When npm install @emotion/core and/or @emotion/styled after setting up a typescript project with create-react-app the app failed to compile even though I didn't import emotion in the project.

To reproduce:

1. npx create-react-app vz-app --template typescript
2. npm install --save @emotion/core @emotion/styled

Expected behavior:

Should render the create-react-app landing page correctly.

Environment information:

• react version: 16.12.0
• @emotion/styled version: 10.0.23

[Andarist]

I have just checked this and it compiles correctly for me. Not sure what might be your problem - could you prepare a repro case?

[ralexhassle]

npx create-react-app my-app --template typescript && cd my-app && npm install --save @emotion/core @emotion/styled && npm start

and then I get:

TypeScript error in /Users/alex/vz-app/src/App.tsx(1,19): Could not find a declaration file for module 'react'. '/Users/alex/vz-app/node_modules/react/index.js' implicitly has an 'any' type. If the 'react' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react TS7016

1 | import React from 'react';
| ^
2 | import logo from './logo.svg';
3 | import './App.css';
`

[ralexhassle]

The problem seems to come from one of these dependencies:

"react": "^16.12.0" "react-dom": "^16.12.0" "react-scripts": "3.3.0"

but works with these versions:

"react": "^16.11.0", "react-dom": "^16.11.0" "react-scripts": "3.2.0"

[FezVrasta]

Could you try to reproduce it on codesandbox?

[ralexhassle]

Could you try to reproduce it on codesandbox?

Don't know how to set up a codesandbox with create-react-app

[Andarist]

I think this just is caused by a fact that you install extra dependencies with npm, while the existing node_modules has been created with yarn. It's some kind of a mismatch between those 2 installs - if I remove all node_modules & lock files and do a fresh npm install (which includes already added emotion dependencies) then everything works OK.

[ralexhassle]

so npx create-react-app use yarn under the hood ? it's pretty annoying if there is no way to specifiy if we want to use npm instead. By removing all node_modules and npm install it solved my problem so I am going to close this issue. Thank you !

[Andarist]

Not sure if this can be configured - fresh CRA projects are defaulting to yarn, but this can easily be changed. Just remove the yarn.lock and use npm - from now on there shouldnt be any problems of preference towards yarn.

[princez1214]

Hello ralexhassel, Did you fix this error?

[princez1214]

I am also meet this error,

[tosiek88]

npm i @types/react and npm i @types/react-dom removing the error.

[praveenafeb9]

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

removed the error

[abbychau]

I have the same problem and the above didn't solve

[abbychau]

  "dependencies": {
    "@emotion/core": "^11.0.0",
    "@emotion/react": "^11.1.4",
    "@emotion/styled": "^11.0.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.20",
    "@types/node": "^14.14.20",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "typescript": "^4.1.3",
    "web-vitals": "^0.2.4"
  },

/Users/abby/abbyui/src/components/Label/index.tsx
TypeScript error in /Users/abby/abbyui/src/components/Label/index.tsx(3,21):
Could not find a declaration file for module '@emotion/core'. '/Users/abby/abbyui/node_modules/@emotion/core/dist/emotion-core.cjs.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/emotion__core` if it exists or add a new declaration (.d.ts) file containing `declare module '@emotion/core';`  TS7016

    1 | import React from "react";
    2 | import styled from "@emotion/styled";
  > 3 | import { css } from "@emotion/core";
      |                     ^
    4 | import FilterIcon from "assets/images/filter.png";
    5 | 
    6 | enum FontType {

[abbychau]

found that should be the problem of emotion is missing types in its folder for version 11.1

    "@emotion/core": "10.1.1",
    "@emotion/styled": "^10.0.27",

falling back to 10.1.1 works

[Andarist]

You are importing @emotion/core even though you are attempting to update to Emotion 11 - please import stuff from @emotion/react.