Component selectors can only be used in conjunction with babel-plugin-emotion #1305
Comments
|
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. |
|
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. |
|
What do your package.json dependencies look like? |
|
|
Maybe that's a previous version? I don't see any mention of emotion in there. |
|
Blah. Wrong branch. |
|
What does you babelrc look like on this branch with all of these plugins? |
|
|
You're not using jsx? Do you have some babel config in your package.json? |
|
I am using jsx. Only other babel config exists for jest specifically. |
|
I'm kind of confused because you don't have |
|
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. |
|
I'm wondering if you hit this issue: #1203 If so that makes more sense than the plugin just not working. |
|
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 I ended up having to use a direct import as |
|
@brettinternet thanks for the feedback. Custom styleds etc are currently not handled by our plugin - this will get fixed by #1220 this month though, so stay tuned! |
|
@Andarist @brettinternet With which version is this problem fixed? And when I use a nested selector I get the same error as: |
|
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? |
|
@Andarist Yes this is what I am using |
|
So support for this within a babel plugin has been added in #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. |
|
@Andarist How do I use the CreateStyled then or inject my Theme Interface? As CreateStyled is not generic anymore in emotion V11 |
|
thx!! |
|
I also have this error. I installed the plugin and add it to my .babelrc and it still shows the |
|
@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? |
|
I just converted back to SASS files. I literally just did these steps.
const Parent = styled.div`
...
`;
const Child = styled.div`
${Parent}:hover & {
opacity: 1
}
`;
Still didn't fix my problem. I tried even ejecting react and still didn't work. |
|
Can't tell you what you have done incorrectly if you don't share a repro case. |
|
@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 |
|
This is using CRA template and CRA doesn't let you customize Babel plugins, so it doesn't even attempt to read your |
|
@Andarist What’s the difference between the macro and the regular package? |
|
Macro includes targeted babel plugin when used with |
|
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): |
|
@JCMais this will get easier in the upcoming v11 thanks to the new |
|
@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 |
|
@Rolchau do u provide a custom |
|
@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: |
|
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. |
|
I have the same issue when I use |
|
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 |
|
Am I missing something here? Why this issue has been closed? I am still getting this issue with typescript, nextjs and emotion. |
|
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. |
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'
},
`;
Seeing the issue after upgrading emotion to v11. Can someone please help me resolve this? |
|
@techdiary Your code looks fine to me. Can you provide a runnable example that shows the issue? |
|
@techdiary Were you able to resolve your issue? |
|
For next js users, put this to your |
|
Had the same error while trying to run tests with jest. This workaround works for me.
|
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 |
|
I got mine working by following this solution. Go to 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"),
}
}
};
}
}; |
emotion10.0.9:react16.8.0:Relevant code:
My entire .bablerc file.
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...
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.
The text was updated successfully, but these errors were encountered: