search

emotion-js / emotion

👩‍🎤 CSS-in-JS library designed for high performance style composition
https://emotion.sh/
MIT License
17.5k stars 1.11k forks source link

Component selectors can only be used in conjunction with babel-plugin-emotion #1305

Closed stolinski closed 5 years ago

stolinski commented 5 years ago

Relevant code:

My entire .bablerc file.

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    "emotion",
    [
      "module-resolver",
      {
        "root": ["./"]
      }
    ],
    [
      "prismjs",
      {
        "languages": ["javascript", "css", "markup", "jsx"],
        "plugins": ["line-numbers"]
      }
    ],
    "react-loadable/babel"
  ]
}

What you did:

Just trying to get up and running. All of my other babel plugins and presets are working, so the .babelrc is being utilized correctly.

What happened:

Getting...

modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:3295 Uncaught Error: Component selectors can only be used in conjunction with babel-plugin-emotion.
    at handleInterpolation (modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:3295)
    at Object.serializeStyles (modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:3442)
    at modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:1422
    at updateContextConsumer (modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:27158)
    at beginWork (modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:27346)
    at performUnitOfWork (modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:30986)
    at workLoop (modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:31026)
    at renderRoot (modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:31109)
    at performWorkOnRoot (modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:32016)
    at performWork (modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:31928)

Reproduction:

Problem description:

Not sure what I'm doing wrong here. babel-plugin-emotion is installed, in my babelrc, but I'm still getting this error. No ideas what else to try here.

tkh44 commented 5 years ago

I tried to create a reproduction of this here https://github.com/tkh44/plugin-help-thing. (npm i && npm run start)

Everything was working. I was trying to reduce the problem space a bit. I'm not sure how Meteor fits into here. I didn't see the jsx plugin (react-preset) in your babelrc so I didn't use it in the reproduction repo. Maybe just having some sort of reference to compare with your dependencies and imports may help.

stolinski commented 5 years ago

Yeah, that's the tough part. I'm not sure why this plugin would differ from other babel plugins used in the app, including styled components. I can't imagine this is Meteor's doing specifically, but it seems like a tough thing to nail down what exactly is going on here. I'm only seeing this error when attempting to reference another component.

const Card = styled.article`
  &:hover {
    ${Background} {
      transform: scale(1.1);
    } 
  }
`;
tkh44 commented 5 years ago

What do your package.json dependencies look like?

stolinski commented 5 years ago 
{

  "dependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/runtime": "^7.4.2",
    "@progress/kendo-drawing": "^1.5.7",
    "@progress/kendo-react-pdf": "^2.5.0",
    "apollo-cache-inmemory": "^1.3.12",
    "apollo-client": "^2.5.1",
    "apollo-engine": "^1.1.2",
    "apollo-link": "^1.2.6",
    "apollo-link-http": "^1.5.9",
    "apollo-link-schema": "^1.1.4",
    "apollo-server-express": "^2.3.1",
    "apollo-test-utils": "^0.3.2",
    "aws-sdk": "^2.381.0",
    "babel-polyfill": "^6.26.0",
    "bcrypt": "^3.0.5",
    "body-parser": "^1.18.3",
    "braintree": "^2.14.0",
    "braintree-web": "^3.41.0",
    "date-fns": "^1.30.1",
    "eazy-ease": "^1.0.2",
    "express": "^4.16.3",
    "formol": "^2.5.9",
    "graphql": "^14.0.2",
    "graphql-tag": "^2.10.0",
    "graphql-tools": "^4.0.3",
    "isomorphic-fetch": "^2.2.1",
    "js-cookie": "^2.2.0",
    "lodash": "^4.17.11",
    "logrocket": "^0.6.19",
    "markdown-to-jsx": "^6.8.4",
    "marked": "^0.5.2",
    "meteor-node-stubs": "^0.4.1",
    "mustache": "^3.0.1",
    "paypal-rest-sdk": "^2.0.0-rc.1",
    "picturefill": "^3.0.2",
    "prismjs": "^1.15.0",
    "prop-types": "^15.6.2",
    "raven": "^2.6.4",
    "raven-js": "^3.27.0",
    "react": "^16.8.0",
    "react-addons-test-utils": "^15.6.2",
    "react-addons-transition-group": "^15.6.2",
    "react-addons-update": "^15.6.2",
    "react-apollo": "^2.5.2",
    "react-async-script-loader": "^0.3.0",
    "react-autocomplete": "^1.8.1",
    "react-beautiful-dnd": "^10.0.3",
    "react-braintree-fields": "^1.1.0",
    "react-color": "^2.17.0",
    "react-confetti": "^2.3.0",
    "react-dom": "^16.8.0",
    "react-dropzone": "^5.1.0",
    "react-helmet": "^5.2.0",
    "react-inlinesvg": "^0.8.1",
    "react-lazyload": "^2.3.0",
    "react-loadable": "git+https://github.com/CaptainN/react-loadable.git",
    "react-month-picker-input": "^1.1.6",
    "react-render-html": "^0.6.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-router-prop-types": "1.0.4",
    "react-spring": "^8.0.18",
    "react-tagsinput": "^3.19.0",
    "react-toggle-switch": "^3.0.4",
    "react-transition-group": "^2.5.2",
    "react-tweet-embed": "^1.1.1",
    "react-waypoint": "^8.1.0",
    "react-youtube-player": "^2.0.1",
    "resize-observer-polyfill": "^1.5.1",
    "simpl-schema": "^1.5.3",
    "speakingurl": "^14.0.1",
    "stream-collect": "^2.1.3",
    "stripe": "^6.20.0",
    "styled-components": "4.1.3",
    "styled-components-modifiers": "^1.1.0",
    "url-search-params-polyfill": "^5.0.0",
    "victory": "^31.0.2",
    "youtube-player": "^5.5.1"
  },
  "devDependencies": {
    "@babel/helper-plugin-utils": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "7.2.3",
    "@babel/plugin-proposal-object-rest-spread": "7.2.0",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
    "@babel/plugin-transform-runtime": "7.2.0",
    "@babel/preset-env": "7.2.3",
    "@babel/preset-react": "7.0.0",
    "autoprefixer": "^9.4.3",
    "babel-core": "^7.0.0-0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-dynamic-import-node": "^2.1.0",
    "babel-plugin-inline-import": "^3.0.0",
    "babel-plugin-inline-import-graphql-ast": "^2.4.1",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-plugin-prismjs": "^1.0.2",
    "babel-plugin-styled-components": "^1.10.0",
    "babel-runtime": "^6.26.0",
    "chromedriver": "^2.45.0",
    "core-js": "^2.6.1",
    "cypress": "^3.1.4",
    "eslint": "^5.11.1",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^3.3.0",
    "eslint-import-resolver-meteor": "^0.4.0",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-graphql": "^3.0.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-meteor": "^5.1.0",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.0",
    "eslint-plugin-react-hooks": "^1.4.0",
    "jest": "^23.6.0",
    "jest-dom": "^3.0.0",
    "jest-meteor-stubs": "^1.5.1",
    "prettier": "^1.15.2",
    "react-test-renderer": "^16.7.0",
    "react-testing-library": "^6.0.3",
    "regenerator-runtime": "^0.13.1"
  }
}
tkh44 commented 5 years ago

Maybe that's a previous version? I don't see any mention of emotion in there.

stolinski commented 5 years ago

Blah. Wrong branch.

"dependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/runtime": "^7.4.2",
    "@emotion/core": "^10.0.9",
    "@emotion/styled": "^10.0.10",
    "@progress/kendo-drawing": "^1.5.7",
    "@progress/kendo-react-pdf": "^2.5.0",
    "apollo-cache-inmemory": "^1.3.12",
    "apollo-client": "^2.5.1",
    "apollo-engine": "^1.1.2",
    "apollo-link": "^1.2.6",
    "apollo-link-http": "^1.5.9",
    "apollo-link-schema": "^1.1.4",
    "apollo-server-express": "^2.3.1",
    "apollo-test-utils": "^0.3.2",
    "aws-sdk": "^2.381.0",
    "babel-polyfill": "^6.26.0",
    "bcrypt": "^3.0.5",
    "body-parser": "^1.18.3",
    "braintree": "^2.14.0",
    "braintree-web": "^3.41.0",
    "date-fns": "^1.30.1",
    "eazy-ease": "^1.0.2",
    "express": "^4.16.3",
    "graphql": "^14.0.2",
    "graphql-tag": "^2.10.0",
    "graphql-tools": "^4.0.3",
    "isomorphic-fetch": "^2.2.1",
    "js-cookie": "^2.2.0",
    "lodash": "^4.17.11",
    "logrocket": "^0.6.19",
    "markdown-to-jsx": "^6.8.4",
    "marked": "^0.5.2",
    "meteor-node-stubs": "^0.4.1",
    "mustache": "^3.0.1",
    "paypal-rest-sdk": "^2.0.0-rc.1",
    "picturefill": "^3.0.2",
    "prismjs": "^1.15.0",
    "prop-types": "^15.6.2",
    "raven": "^2.6.4",
    "raven-js": "^3.27.0",
    "react": "^16.8.0",
    "react-addons-test-utils": "^15.6.2",
    "react-addons-transition-group": "^15.6.2",
    "react-addons-update": "^15.6.2",
    "react-apollo": "^2.5.2",
    "react-async-script-loader": "^0.3.0",
    "react-autocomplete": "^1.8.1",
    "react-beautiful-dnd": "^10.0.3",
    "react-braintree-fields": "^1.1.0",
    "react-color": "^2.17.0",
    "react-confetti": "^2.3.0",
    "react-dom": "^16.8.0",
    "react-dropzone": "^5.1.0",
    "react-helmet": "^5.2.0",
    "react-inlinesvg": "^0.8.1",
    "react-lazyload": "^2.3.0",
    "react-loadable": "git+https://github.com/CaptainN/react-loadable.git",
    "react-month-picker-input": "^1.1.6",
    "react-render-html": "^0.6.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-router-prop-types": "1.0.4",
    "react-spring": "^8.0.18",
    "react-tagsinput": "^3.19.0",
    "react-toggle-switch": "^3.0.4",
    "react-transition-group": "^2.5.2",
    "react-tweet-embed": "^1.1.1",
    "react-waypoint": "^8.1.0",
    "react-youtube-player": "^2.0.1",
    "resize-observer-polyfill": "^1.5.1",
    "simpl-schema": "^1.5.3",
    "speakingurl": "^14.0.1",
    "stream-collect": "^2.1.3",
    "stripe": "^6.20.0",
    "url-search-params-polyfill": "^5.0.0",
    "victory": "^31.0.2",
    "youtube-player": "^5.5.1"
  },
  "devDependencies": {
    "@babel/helper-plugin-utils": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "7.2.3",
    "@babel/plugin-proposal-object-rest-spread": "7.2.0",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
    "@babel/plugin-transform-runtime": "7.2.0",
    "@babel/preset-env": "7.2.3",
    "@babel/preset-react": "7.0.0",
    "autoprefixer": "^9.4.3",
    "babel-core": "^7.0.0-0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-dynamic-import-node": "^2.1.0",
    "babel-plugin-emotion": "^10.0.9",
    "babel-plugin-inline-import": "^3.0.0",
    "babel-plugin-inline-import-graphql-ast": "^2.4.1",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-plugin-prismjs": "^1.0.2",
    "babel-runtime": "^6.26.0",
    "chromedriver": "^2.45.0",
    "core-js": "^2.6.1",
    "cypress": "^3.1.4",
    "eslint": "^5.11.1",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^3.3.0",
    "eslint-import-resolver-meteor": "^0.4.0",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-graphql": "^3.0.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-meteor": "^5.1.0",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.0",
    "eslint-plugin-react-hooks": "^1.4.0",
    "jest": "^23.6.0",
    "jest-dom": "^3.0.0",
    "jest-meteor-stubs": "^1.5.1",
    "prettier": "^1.15.2",
    "react-test-renderer": "^16.7.0",
    "react-testing-library": "^6.0.3",
    "regenerator-runtime": "^0.13.1"
  },
tkh44 commented 5 years ago

What does you babelrc look like on this branch with all of these plugins?

stolinski commented 5 years ago 
{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "emotion",
    "@babel/plugin-proposal-optional-chaining",
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    [
      "module-resolver",
      {
        "root": ["./"]
      }
    ],
    [
      "prismjs",
      {
        "languages": ["javascript", "css", "markup", "jsx"],
        "plugins": ["line-numbers"]
      }
    ],
    "react-loadable/babel"
  ]
}
tkh44 commented 5 years ago

You're not using jsx? Do you have some babel config in your package.json?

stolinski commented 5 years ago

I am using jsx. Only other babel config exists for jest specifically.

tkh44 commented 5 years ago

I'm kind of confused because you don't have @babel/preset-react anywhere in that babelrc so if you were to use jsx it would error. This makes me think that babel is being configured for React/jsx somewhere else in your project.

stolinski commented 5 years ago

There is no other babel config. Regardless, throwing the styled components babel plugin in this exact same config worked without issue along with any others that I have here. This is the first time a babel plugin hasn't been recognized in this project & babelrc file. It's a bummer that the emotion plugin isn't being picked up. Thanks for your help.

tkh44 commented 5 years ago

I'm wondering if you hit this issue: https://github.com/emotion-js/emotion/issues/1203

If so that makes more sense than the plugin just not working.

hueitan commented 5 years ago

@tkh44 I'm facing the same problem as the author, and I also tried the solution given in #1203, but it doesn't fix.

brettinternet commented 5 years ago

I hope this contributes to the discussion: I have found a similar issue with a Typescript project where I exported styled from a utility layer with a typed theme, as shown in the Typescript documentation example. Then, using import styled from 'utils/styled' I'd see this error when using nested component selectors, despite using the babel plugin. The macro didn't work for me either.

Uncaught Error: Component selectors can only be used in conjunction with babel-plugin-emotion.

I ended up having to use a direct import as import styled from '@emotion/styled', which is an unfortunate workaround.

Andarist commented 5 years ago

@brettinternet thanks for the feedback. Custom styleds etc are currently not handled by our plugin - this will get fixed by https://github.com/emotion-js/emotion/pull/1220 this month though, so stay tuned!

loweisz commented 4 years ago

@Andarist @brettinternet With which version is this problem fixed? I'm still facing the same issue when using a themed styled version of emotion. I'm using: 

    "@emotion/core": "^10.0.27",
    "@emotion/styled": "^10.0.27",
    "emotion": "^10.0.27",
    "babel-plugin-emotion": "^10.0.27",

And when I use a nested selector I get the same error as: 

  Uncaught Error: Component selectors can only be used in conjunction with babel-plugin-emotion.
Andarist commented 4 years ago

As far as I know this has never been broken. Could you prepare a repro case? I could take a look then.

EDIT:// sorry, I thought this was other thread. Are you using custom styled instance? Reexported from your file/module?

loweisz commented 4 years ago

@Andarist Yes this is what I am using

Andarist commented 4 years ago

So support for this within a babel plugin has been added in https://github.com/emotion-js/emotion/pull/1220 . I'm afraid though that it's going to be a part of the upcoming v11 release, we don't have time to backport this to v10. I encourage you to try out the v11 though, it doesn't have many breaking changes - it's mostly just cleanup, hooks, and TS types rework.

JonathanCallewaert commented 4 years ago

@Andarist How do I use the CreateStyled then or inject my Theme Interface? As CreateStyled is not generic anymore in emotion V11

Andarist commented 4 years ago

@JonathanCa97 https://github.com/emotion-js/emotion/blob/31e610f2385d5a3dfd532b31f743e5f6b9fee43b/docs/typescript.mdx#define-a-theme

JonathanCallewaert commented 4 years ago

thx!!

AlexanderMelox commented 4 years ago

I also have this error. I installed the plugin and add it to my .babelrc and it still shows the Error: Component selectors can only be used in conjunction with babel-plugin-emotion. error. Has there been a fix for this?

Andarist commented 4 years ago

@AlexanderMelox there is no issue to be fixed, you most likely have not configured things correctly. Could you share a runnable repro case of your problem?

AlexanderMelox commented 4 years ago

I just converted back to SASS files. I literally just did these steps. I am using create-react-app and downloaded @emotion/styled and @emotion/core.

  1. I tried doing something like this 
    
const Parent = styled.div`
...
`;

const Child = styled.div ${Parent}:hover & { opacity: 1 } ;



2. Then I got the error so I proceed to install the emotion babel plugin and added it to my plugins in my .babelrc 

Still didn't fix my problem. I tried even ejecting react and still didn't work.
Andarist commented 4 years ago

Can't tell you what you have done incorrectly if you don't share a repro case.

AlexanderMelox commented 4 years ago

@Andarist Here is a codesandbox of what I'm trying to do.

https://codesandbox.io/s/musing-snow-wzero?file=/src/App.js

I'm trying to get access to the parent component when it's hovered to do something in the child component. And still get the error after installing the babel-plugin-emotion and adding it to the .babelrc

Andarist commented 4 years ago

This is using CRA template and CRA doesn't let you customize Babel plugins, so it doesn't even attempt to read your .babelrc. However, with CRA you can use our macros (just use @emotion/styled/macro instead of @emotion/styled): https://codesandbox.io/s/weathered-darkness-qbmso

AlexanderMelox commented 4 years ago

@Andarist What’s the difference between the macro and the regular package?

Andarist commented 4 years ago

Macro includes targeted babel plugin when used with babel-plugin-macros (without this plugin used it wouldn't work at all). This makes it possible to add "custom babel plugins" to tools like CRA because CRA includes babel-plugin-macros in its preset, so no extra configuration is required on the user's side. You can read more here: https://github.com/kentcdodds/babel-plugin-macros and here: https://emotion.sh/docs/babel-macros

JCMais commented 4 years ago

This issue still happens if you are importing styled from somewhere else, which is the case if you are trying to have a typesafe Theme as you need to do something like this (from the docs):

import styled, { CreateStyled } from '@emotion/styled'

type Theme = {
  color: {
    primary: string
    positive: string
    negative: string
  }
  // ...
}

export default styled as CreateStyled<Theme>
Andarist commented 4 years ago

@JCMais this will get easier in the upcoming v11 thanks to the new importMap option, but also you won't have to reexport custom styled just to define your theme: https://deploy-preview-1600--emotion.netlify.app/docs/typescript#define-a-theme

Rolchau commented 4 years ago

@Andarist do you know if there is a workaround until v11 gets released? I am working on a component library where we need the typesafe theme, and ended up having to do a onMouseEnter/Leave in JS instead of using a simple :hover because of this error :(

Andarist commented 4 years ago

@Rolchau do u provide a custom styled that your components need to use?

Rolchau commented 4 years ago

@Andarist Yeah we used the example here to avoid theme warnings and get auto-suggestion working on the theme object.

Link didn't anchor correctly but its this:


import styled, { CreateStyled } from '@emotion/styled'

type Theme = {
  color: {
    primary: string
    positive: string
    negative: string
  }
  // ...
}

export default styled as CreateStyled<Theme>```
Andarist commented 4 years ago

There is no workaround for this in Emotion 10 - unless you would fork our Babel plugin. I encourage you to try out v11 though - it's stable, already used by some at scale.

vtereshyn commented 2 years ago

I have the same issue when I use @emotion with cypress. Did someone have that figured out?

Jacky-Rolo commented 2 years ago

FYI @vtereshyn

Andarist 's another demo work for me, to solve this error message, NO NEED @emotion/styled/macro

Many many thanks Andarist hard work

dkumar431 commented 2 years ago

Am I missing something here? Why this issue has been closed? I am still getting this issue with typescript, nextjs and emotion. Does any able to solve this issue without the target hack?

Andarist commented 2 years ago

If you are not using our Babel plugin or Next's Emotion plugin (the one based on SWC) then this won't work - TypeScript itself doesn't allow for custom transformers by default.

techdiary commented 2 years ago 
 "devDependencies": {
...
"@emotion/babel-plugin": "^11.9.2",
}
"dependencies": {
...
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
}
"plugins": [
    "@emotion",
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
onst StyledCheckBox = styled.div<CheckBoxContainerProps>`

  ${SvgIcon} {
    visibility: ${props => props.checked ? 'visible' : 'hidden'};
    stroke: ${props => props.disabled ? 'grey' : 'white'};
  }

  border: ${props => props.disabled ? '1px solid rgba(0, 0, 0, 0.12)' : "1px solid #00C000"};
  transition: "all 150ms";
  border-radius: ${props => props.xSize * 1.75}px;
  width: ${props => props.xSize * 8}px;
  height: ${props => props.xSize * 8}px;
  background-color: ${props => props.checked && !props.disabled ? "#43b916" : "white"};

  :hover,:focus {
    background-color: '#E8F6E3';
    border: '1px solid #299300';
  }

  :hover ${SvgIcon}: {
    visibility: 'visible',
    stroke: '#43b916'
  },
`;

Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform.

Seeing the issue after upgrading emotion to v11. Can someone please help me resolve this? @Andarist @Jacky-Rolo

srmagura commented 2 years ago

@techdiary Your code looks fine to me. Can you provide a runnable example that shows the issue?

aehmt commented 2 years ago

@techdiary Were you able to resolve your issue?

techdiary commented 2 years ago

@srmagura I've moved from this approach. I will try check into previous commits and come back. @aehmt sorry but i changed my approach. Waiting for solution in here myself

happy-nut commented 1 year ago

For next js users, put this to your next.config.js. Then I solved this issue.

compiler: {
  emotion: true
}
smiling-cobra commented 1 year ago

Had the same error while trying to run tests with jest. This workaround works for me.

const ComponentA = styled('div', { target: '' })'';

const ComponentB = styled('div')' ${ComponentA} {} ';

mikematos84 commented 1 year ago

Had the same error while trying to run tests with jest. This workaround works for me.

const ComponentA = styled('div', { target: '' })'';

const ComponentB = styled('div')' ${ComponentA} {} ';

Awesome that there is a workaround, but I guess I fail to see how or why this works and is not just defaulted to using like a styled.div versus the way you have done it.

AnsonH commented 1 year ago

I got mine working by following this solution.

Go to main.js and add the following Webpack config

const path = require("path")

const toPath = (_path) => path.join(process.cwd(), _path)

module.exports = {
  /* ... */
  babel: async (options) => ({
    ...options,
    // Remember to use the Emotion Babel plugin!
    plugins: ['@emotion']
  }),
  webpackFinal: async (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          // Add these lines
          "@emotion/core": toPath("node_modules/@emotion/react"),
          "@emotion/styled": toPath("node_modules/@emotion/styled"),
          "emotion-theming": toPath("node_modules/@emotion/react"),
        }
      }
    };
  }
};