babel-plugin-styled-components: "React attempted to reuse markup error" when using withComponent

True! We’ll need to add those

@evan-scott-zocdoc I have a small spec / roadmap document over here for what the project concerning v3 looks like: https://gist.github.com/philpl/e05ff063869c096a7a9795ca95769576

I haven’t attached any dates to it yet though for the simple reason that I’m neither working on it full-time, nor predictably regularly. Based on the progress I’ve made it should be safe to say that it won’t take half a year—like v2—to get it done, but there are a lot of factors to consider. I won’t say that it’s as short as just one month either.

It’s a project that involves more than just the styled-components community, as it incorporates and affects ISTF (Planned interoperability format for all CSS-in-JS libraries), and also is planned to solve preprocessing problems for Emotion and Glamorous as well, if possible. The latter is a lower priority than getting v3 ready for simplicity reasons, but I’m not confident enough to attach any time guarantees just yet.

I have been thinking about opening up a timeline, milestones, and additionally tracking my progress somewhere. But I’m not sure where I’ll do this.

@philpl (and others) I’ve replaced my use of

StyledComponent.extend

with

styled(StyledComponent)

to overcome this issue for now. Is there any downside to this I might be overlooking?

@ccuilla I have had the same issue in my project, I added styled-components to an existing v3 next.js app, set up based on the example in the next.js repo but the SSR option is not taking effect, nor the displayName option.

I have stepped through the plugin in my app (cleared node_modules/.cache first) and found that the isStyled detector method always returns false (https://github.com/styled-components/babel-plugin-styled-components/blob/master/src/utils/detectors.js#L21) for all tags passed to it. As a proof of concept if I force it to return true everything seems to work as expected (ssr + display name options are respected). On closer inspection and comparing vs the bare with-styled-components example application in the next.js repo it seems that for some reason in my application the tag node type (tag.object.type) in this context is always a MemberExpression, unlike in the example app its Identifier. Thus tag.object.name is never the same as what importLocalName returns… At this point Im struggling to make and progress, as am no expert on babel/JS parsing and why .

I’m possibly on a wild goose chase…

@philpl done https://github.com/styled-components/babel-plugin-styled-components/issues/79 😉

@ccuilla Is that the only change you made to stop getting the error? I have a nextjs project as well and im getting this error. I followed the instructions on the examples. I’m not using JSX, .extend or withComponent().

My config is the following:

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

I tried using ["babel-plugin-styled-components", { "ssr": true, "displayName": true, "preprocess": false }], as well but it didn’t make a difference

@yn5 Thank you! That change fixed the issue (I’m with the last version of Styled Components)

I’m closing this as this issue is resolved in the latest version of styled-components (not the Babel plugin, since it’s a patch on styled-components)

Note that if you’re experiencing configuration issues it’s in no way related to this issue

@bliitzkrieg in this setup the plugin runs after the ones in the env presets. You have to add the plugin to your env plugins property to make it work

@philpl I think we forgot supporting .extend, .withComponent here! /cc @vdanchenkov