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 `env`s are defined in .babelrc #78

Closed
zentuit opened this Issue Aug 15, 2017 · 10 comments

Comments

Projects
None yet
8 participants
@zentuit
Copy link

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

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

joetidee commented Jan 16, 2018

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

@kitten

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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.

@ahennie

This comment has been minimized.

Copy link

ahennie 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

This comment has been minimized.

Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment