-
-
Notifications
You must be signed in to change notification settings - Fork 143
Next.js: TaggedTemplateExpression
not run when env
s are defined in .babelrc
#78
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
Comments
I think it’s caused by the plugins order of execution i.e. our Babel plugin is run last in this case. It’s probably not sth we can fix. I’m wondering if the property order matters here? XD Either way, you can just add the plugin to the envs and that should work |
@philpl : I can confirm that moving the plugin to the envs works. Thanks! Hopefully this will help others who may stumble upon the same thing. |
@zentuit Could you provide an example of where you moved it to? |
@joetidee you'll have to copy our plugin to each env unfortunately, to make sure that it keeps its precedence in the execution of all plugins correctly. |
Looking at the above .babelrc by @zentuit, you would change it from {
"env": {
"development": {
"presets": ["next/babel"]
},
"production": {
"presets": ["next/babel"]
}
},
"plugins": [
["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
]
} TO: {
"env": {
"development": {
"plugins": [
["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
],
"presets": ["next/babel"]
},
"production": {
"plugins": [
["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
],
"presets": ["next/babel"]
}
},
"plugins": [
["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
]
} So essentially you copy paste that |
I just created a react app then npm installed the babel-styled-components plugin, but I don't see a .babelrc file. Would I get this file after I run build? |
@yboone Normally you will always create your own custom Docs for
|
Tried to copy-paste @cyrus-za good answer, but didn't get it to work due to a missing comma. Also @mxstbr recommend adding the prefix "babel-plugin" before the plugin, so it's "babel-plugin-styled-components" instead of "styled-components".
|
Thanks, @ahennie for pointing out the syntax error. I've added the 2 missing commas. That's what you get when trying to write code in the GitHub markdown editor :) Adding babel-plugin in front is not required but I guess it doesn't hurt either |
Does it really need to be added to the general "plugins" section as well? |
Only if you want it to fall back to that general setting when not in a defined environment (in this case production or development). |
Still not working with @arndeash's config. |
This issue is quite dead, please open a new issue with a reproduction against the latest plugin version if you're still having problems... thanks. |
@arndeash 's solution worked for me! |
Thank you, this really helped me in 2020! |
I spent days trying to figure out why this was happening and this post solved it perfectly! Thanks a lot! |
this https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js gonna help you... only copy and paste the content of the _document.js file, if you don't have the _document.js file inside of your project only create it inside of the pages folder. also you need to paste this in your .babelrc
|
Have same problem
Maybe somebody knows what's wrong?) |
Follow this steps:
|
Thank u. This was the solution for me. |
This was bugging me for a long time. I timeboxed solving this many times over months in vain and kept bumping this issue down my priority list. I finally separated some time to solve this - I was following the advice above perfectly. The issue for me was that xstyled was not playing well with nextjs styled-components/xstyled#138 If you are using xstyled use this
|
in case you have a NextJs setup, add .babelrc .babelrc
Delete install styled-components : |
I'm seeing something very strange and I don't know why its happening.
If you have a
.babelrc
file defined as so:then when you build the app, the
TaggedTemplateExpression
part ofbabel-plugin-styled-components
is never called. That results in code that looks like this:rather than the expected:
I replicated it using Next.js example
with-styled-components
.Could someone verify that they see the same thing?
.babelrc
file to the one abovenpm run build
/.next/dist/pages/index.js
file to see if the styled component has awithConfig
The text was updated successfully, but these errors were encountered: