CODEWITHSUNDEEP
reactjsemotion
KingNOB
KingNOB

Reputation: 99

Error Using @emotion/core in my React app

Picture1 Please help, these errors are preventing my react app from compiling. How do I fix it? I also attached a picture of the App.tsx file What is another suggestion for taking care of this error?

Could not find a declaration file for module '@emotion/core'. 'c:/Users/nwoko/source/repos/QandA/QandAfrontend/frontend/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';ts(7016)

Type '{ children: Element[]; css: any; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes, HTMLDivElement>'. Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes, HTMLDivElement>'.ts(2322)

Picture2

Upvotes: 7

Views: 9903

Answers (6)

Abdulrahim Klis
Abdulrahim Klis

Reputation: 494

With the new version MUI you need to install the following two packages:

npm install --save @emotion/react
npm install --save @emotion/styled

Upvotes: 0

EUNJI JO
EUNJI JO

Reputation: 73

use /** @jsxImportSource @emotion/react */ instead /** @jsx jsx */

Upvotes: 2

Muslem Omar
Muslem Omar

Reputation: 1121

This worked:

/** @jsxRuntime classic /
/* @jsx jsx */
import { jsx } from "@emotion/react";

Upvotes: 0

Sergey
Sergey

Reputation: 63

Helped me:

tsconfig.json

"types": ["@emotion/react/types/css-prop"],

*.tsx

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx, css } from "@emotion/react";

Upvotes: 5

oldbrazil
oldbrazil

Reputation: 367

Capitalizing on @sanderdebr suggestion,

I ran npm install --save @emotion/react before changing the import line to import { jsx, css } from '@emotion/react' and got rid of TypeScript error TS7016

I then added "types": ["@emotion/react/types/css-prop"] in file tsconfig.json to get rid of the second ts error (2322)

Upvotes: 5

sanderdebr
sanderdebr

Reputation: 140

Emotion is suggesting to use @emotion/react in their docs. Try to install use emotion for React with command npm install --save @emotion/react and then import { jsx, css } from '@emotion/react'

Upvotes: 1

Related Questions