Error Using @emotion/core in my React app

3
votes

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

4
reactjsemotion
You are running your all through typescript? It is asking you to also install the types for the emotion library. Type npm install --save-dev @types/emotion – Faktor 10
@Faktor10, yes, I am running typescript the command you suggested did not work. – KingNOB

4 Answers

2
votes

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)

1
votes

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'

0
votes

Helped me:

tsconfig.json

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

*.tsx

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

This worked:

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