-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
jsxImportSource pragma + jest + typescript #2069
Comments
As to the jest issue - hard to tell what's going on if you don't share a runnable repro case. It seems to be related to an incorrect configuration of some tool, but given that multiple tools are involved in this it's hard to tell based on the provided information.
It would be - could u file an issue for that? |
@Andarist Yes sure, sorry, i forgot to add the repo :D This is basically a starter repo i normally use -> https://github.com/Emiliano-Bucci/nextjs-starter About the issue, sure, i'll open :) |
Huh, this was a quirky one. In When you are using Jest the caller is I would recommend just adding our preset to the mix but there is some problem with duplicated JSX transforms in such a case that I've been looking into as part of this issue. I haven't yet figured it out but it seems like a problem with Babel (or I don't understand something but usually duplicated plugins should be deduped). If you want to keep using pragma this should work: module.exports = (api) => {
api.cache.using(() => process.env.NODE_ENV);
return {
presets: [
"next/babel",
process.env.NODE_ENV === "test" && [
"@emotion/babel-preset-css-prop",
{ runtime: "automatic" },
],
].filter(Boolean),
};
}; But as you can control over Babel config then probably the best would be a variation of this and the solution I've figured out for that other issue (here) and that would look smth like: module.exports = (api) => {
api.cache.using(() => process.env.NODE_ENV);
if (process.env.NODE_ENV === "test") {
return {
presets: [
"next/babel",
process.env.NODE_ENV === "test" && [
"@emotion/babel-preset-css-prop",
{ runtime: "automatic" },
],
],
};
}
return {
presets: [
["next/babel", { "preset-react": { importSource: "@emotion/core" } }],
],
plugins: ["babel-plugin-emotion"],
};
}; That test variant sort-of contains duplicated JSX transforms but it seems to work OK on the given repro. |
@Andarist Thanks for the exhaustive explanation! I guess it took a while to figure out, so thanks for your time :) I've tried the last solution, but for some reason i'm still getting the same issue in the snapshots :/ In fact, the only reason i wasn't using the babel plugin over the pragma, it was that during the tests, with the snapshots i was getting that issue. |
Could u try running ur tests with
which is exactly what we have wanted to achieve. |
@Andarist Great, it works now! (I run tests as you suggest with |
I'm glad that it has worked out. |
The easiest solution (and currently the best one) would be to just do this: module.exports = (api) => {
api.cache(true);
return {
presets: [
[
"next/babel",
{
"preset-react": {
runtime: "automatic",
importSource: "@emotion/core",
},
},
],
],
plugins: ["babel-plugin-emotion"],
};
}; but this would require changes in the |
@Andarist But this would require to use the Pragma, right? So there's no possible to only use the |
No - it wouldn't. Those options passed to |
Oh ok; yes, in fact using this config also works without pragma |
If you want you can check this PR with a lengthy explanation of the situation: vercel/next.js#18847 |
Thanks :) |
Hi guys! i've recently update next js + react + emotion to the latest versions. I've started to use the new
jsxImportSource
pragma instead of the old one, and everything works fine. The only issue is that using Jest, in my snapshots is getYou have tried to stringify object returned from \css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).
. Is there a fix for this?Also i wanted to ask something related to the
eslint-plugin-emotion
. Currently we're able to add the/* @jsx jsx */
comment directly on save. Do you know if it would be also possible to add the newjsxImportSource
on save?Thanks a lot! :)
The text was updated successfully, but these errors were encountered: