Emotion: css prop returns [object, object]

[harmeetjaipur]

• emotion version:
  "@emotion/core": "^10.0.5", "@emotion/styled": "^10.0.5",

• react version: 16.6.3

Relevant code:

const app = css({
    '.ant-btn-primary': {
        background: colors.highlight,
    },
});

<div css={app}>...</div>

package.json

{ "name": "app", "version": "0.1.0", "private": true, "dependencies": { "@emotion/core": "^10.0.5", "@emotion/styled": "^10.0.5", "antd": "^3.11.2", "jwt-decode": "^2.2.0", "react": "^16.6.3", "react-dom": "^16.6.3", "react-router-dom": "^4.3.1", "react-scripts": "2.1.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ], "devDependencies": { "react-localize-redux": "^3.5.1" } }

What you did:

I am trying to upgrade from v9 to 10 and all the class imports have stopped working.

What happened:

This is the output for all classes: <div css="[object Object]">...</div>

The image below shows you the output for css. styled components work as they should.

I am not sure what needs to happen for all the classes to work and not emotion return an array of objects.

[sgilligan]

@harmeetjaipur did you find the answer to this? Finding the same problem myself.

[harmeetjaipur]

@harmeetjaipur did you find the answer to this? Finding the same problem myself.

Adding following at top of the component files fixed it for me:

/** @jsx jsx */ import { jsx } from '@emotion/core'

Typical syntax now for adding emotion styles is:

<div css={customStyle} className="button">Submit</div>

[sgilligan]

aha - thanks, same problem here.

[fsultani-aspiration]

That solution worked for me, too. So strange!

[serayuzgur]

@harmeetjaipur Do you have any idea how to fix it with typescript?

[keguigong]

same problem, lol, haven't found any answer.

[efleurine]

What is I just want the string className to pass to a component. How would I do that?

[seanWLawrence]

Was stuck on this too, and realized that I missed this in the Getting started docs

Instructions for the installing the recommended babel plugin

Basic steps to fix:

• `npm i @emotion/babel-preset-css-prop
• Add '@emotion/babel-preset-css-prop to your Babel config under presets

Or if you don't want to (or can't easily) use the Babel preset, you can add the /** @jsx jsx */ comment at the top of any file that uses the css function.

Hope this helps!

[shahzaibkhalid]

Same setup of @emotion/babel-preset-css-prop is working fine for a JavaScript-React project but not for a TypeScript-React project.

[strass]

+1 - is there any way to not have to use pragma in a typescript project?

[worc]

the /** @jsx jsx */ doesn't seem to work in@emotion/core@^10.0.10`, so...? what now? does emotion just not work in jsx?

[simajzenman]

Any news about this?

[Andarist]

@simajzenman it most likely is an issue with your configuration. If you share a repro case I could take a look

[simajzenman]

@Andarist you were right and I fixed it, thanks a lot for your reply

[worc]

the /** @jsx jsx */ doesn't seem to work in@emotion/core@^10.0.10`, so...? what now? does emotion just not work in jsx?

^that was a misspelling on my part. the "comment" is actually significant code and needs to be exactly /* @jsx jsx */ with a single star after the first slash

also... significant comments 🤮

[DominicTobias-b1]

This doesn't work when the css prop is in an NPM module (storybook of components). Works fine running them in isolation, or css prop directly used in the CRA app, but css props in the NPM module become [Object object]. Tried with both v10 and v11, with preset (v10) or plugin (v11), with jsx pragma (v10) or jsxImportSource + @emotion/react (v11). Tried compiling the NPM module and CRA with old and new pragma, and TS and babel. Tried TS 4.0.x and 4.1.x. Also in v11 theme object becomes {} in styled components in the NPM modules, in v10 there is a workaround to wrap the app in 2 providers (this is with a single instance of react). 🤷‍♂️.

Edit: Finally fix it by adding the pragma comment to the NPM module, I thought building with the preset/plugin would work but seems it needs that

[Andarist]

I can't say why exactly it has not been working for you - but it was purely a configuration/usage issue. There is no difference between a file being in your app directory and in your node_modules.

[fatemehqasemkhani]

Has someone found a solution for cra typescript?
/** @jsx jsx */ import { jsx } from '@emotion/core' not works for me