Skip to content
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

Next.js: TaggedTemplateExpression not run when envs are defined in .babelrc #78

Closed
zentuit opened this issue Aug 15, 2017 · 22 comments
Closed

Comments

@zentuit
Copy link

@zentuit zentuit commented Aug 15, 2017

I'm seeing something very strange and I don't know why its happening.

If you have a .babelrc file defined as so:

{
  "env": {
    "development": {
      "presets": ["next/babel"]
    },
    "production": {
      "presets": ["next/babel"]
    }
  },
  "plugins": [
    ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
  ]
}

then when you build the app, the TaggedTemplateExpression part of babel-plugin-styled-components is never called. That results in code that looks like this:

var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  color: red;\n  font-size: 50px;\n'], ['\n  color: red;\n  font-size: 50px;\n']);

var Title = _styledComponents2.default.h1(_templateObject);

rather than the expected:

var Title = _styledComponents2.default.h1.withConfig({
  displayName: 'pages__Title',
  componentId: 'tr8ekl-0'
})(['color:red;font-size:50px;']);

I replicated it using Next.js example with-styled-components.

Could someone verify that they see the same thing?

  • download that example linked above
  • change its .babelrc file to the one above
  • do a npm run build
  • look at the /.next/dist/pages/index.js file to see if the styled component has a withConfig
@kitten
Copy link
Member

@kitten kitten commented Aug 15, 2017

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

@zentuit
Copy link
Author

@zentuit zentuit commented Aug 15, 2017

@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.

@joetidee
Copy link

@joetidee joetidee commented Jan 16, 2018

@zentuit Could you provide an example of where you moved it to?

@kitten
Copy link
Member

@kitten kitten commented Jan 17, 2018

@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.

@jfhector
Copy link

@jfhector jfhector commented Jan 23, 2018

@philpl @zentuit I'd be really helpful to see how exactly you do this (ie 'copy the plugin to each env'). Is it something I need to do in .babelrc? An example would really help. Thanks a lot

@cyrus-za
Copy link

@cyrus-za cyrus-za commented Jan 29, 2018

@jfhector @joetidee

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 plugins field/prop at the bottom into a prop on dev and prod env.

@yboone
Copy link

@yboone yboone commented Mar 22, 2018

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?

@cfnelson
Copy link

@cfnelson cfnelson commented Mar 23, 2018

@yboone Normally you will always create your own custom .babelrc file in the root of your project, same for extending/modifying next.js default behaviour.

Docs for .babelrc from babel & next.js.

.babelrc isn't generally created for you by npm packages unless the pkg is a cli-tool that is generating a template starter project.

@arndeash
Copy link

@arndeash arndeash commented Aug 19, 2018

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".

{
    "env": {
      "development": {
        "plugins": [
          [
            "babel-plugin-styled-components",
            { "ssr": true, "displayName": true, "preprocess": false }
          ]
        ],
        "presets": ["next/babel"]
      },
      "production": {
        "plugins": [
          [
            "babel-plugin-styled-components",
            { "ssr": true, "displayName": true, "preprocess": false }
          ]
        ],
        "presets": ["next/babel"]
      }
    },
    "plugins": [
      [
        "babel-plugin-styled-components",
        { "ssr": true, "displayName": true, "preprocess": false }
      ]
    ]
}
@cyrus-za
Copy link

@cyrus-za cyrus-za commented Aug 19, 2018

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

@fabb
Copy link

@fabb fabb commented Apr 1, 2019

Does it really need to be added to the general "plugins" section as well?

@cyrus-za
Copy link

@cyrus-za cyrus-za commented Apr 1, 2019

Only if you want it to fall back to that general setting when not in a defined environment (in this case production or development).

@278kunal
Copy link

@278kunal 278kunal commented Jul 31, 2019

Still not working with @arndeash's config.

@probablyup
Copy link
Collaborator

@probablyup probablyup commented Aug 5, 2019

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.

@ortonomy
Copy link

@ortonomy ortonomy commented Jan 29, 2020

@arndeash 's solution worked for me!

@PavloPantus
Copy link

@PavloPantus PavloPantus commented Apr 6, 2020

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".

{
    "env": {
      "development": {
        "plugins": [
          [
            "babel-plugin-styled-components",
            { "ssr": true, "displayName": true, "preprocess": false }
          ]
        ],
        "presets": ["next/babel"]
      },
      "production": {
        "plugins": [
          [
            "babel-plugin-styled-components",
            { "ssr": true, "displayName": true, "preprocess": false }
          ]
        ],
        "presets": ["next/babel"]
      }
    },
    "plugins": [
      [
        "babel-plugin-styled-components",
        { "ssr": true, "displayName": true, "preprocess": false }
      ]
    ]
}

Thank you, this really helped me in 2020!

@samir-araujo
Copy link

@samir-araujo samir-araujo commented Apr 17, 2020

I spent days trying to figure out why this was happening and this post solved it perfectly!

Thanks a lot!

@aledgar
Copy link

@aledgar aledgar commented Apr 29, 2020

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

{ "presets": ["next/babel"], "plugins": [ [ "styled-components", { "ssr": true, "displayName": true, "preprocess": false } ] ] }

@Seresigo
Copy link

@Seresigo Seresigo commented May 19, 2020

Have same problem
But @arndeash's config doesn't fit to me, and nothing happens

{
  "env": {
    "development": {
      "plugins": [
        [
          "babel-plugin-styled-components",
          { "ssr": true, "displayName": true, "preprocess": false }
        ]
      ],
      "presets": ["next/babel"]
    },
    "production": {
      "plugins": [
        [
          "babel-plugin-styled-components",
          { "ssr": true, "displayName": true, "preprocess": false }
        ]
      ],
      "presets": ["next/babel"]
    }
  },
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ],
    [
      "babel-plugin-styled-components",
      {
        "ssr": true,
        "displayName": true,
        "fileName": true
      }
    ],
    ["@babel/plugin-proposal-optional-chaining"]
  ]
}

Maybe somebody knows what's wrong?)

@marcaum54
Copy link

@marcaum54 marcaum54 commented Sep 23, 2020

Follow this steps:

  1. npm install --save-dev babel-plugin-styled-components
  2. create file: .babelrc with content: { "presets": ["next/babel"], "plugins": [["styled-components", { "ssr": true }]] }
@SGarcia710
Copy link

@SGarcia710 SGarcia710 commented Dec 11, 2020

2. { "presets": ["next/babel"], "plugins": [["styled-components", { "ssr": true }]] }

Thank u. This was the solution for me.

@mfbx9da4
Copy link

@mfbx9da4 mfbx9da4 commented Dec 27, 2020

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 gregberge/xstyled#138 If you are using xstyled use this

{
  "env": {
    "development": {
      "plugins": [
        [
          "@hookydev/babel-plugin-styled-components",
          { "ssr": true, "displayName": true, "preprocess": false }
        ]
      ],
      "presets": ["next/babel"]
    },
    "production": {
      "plugins": [
        [
          "@hookydev/babel-plugin-styled-components",
          { "ssr": true, "displayName": true, "preprocess": false }
        ]
      ],
      "presets": ["next/babel"]
    }
  },
  "plugins": [
    ["@hookydev/babel-plugin-styled-components", { "ssr": true, "displayName": true, "preprocess": false }]
  ]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet