React-styleguidist: Tagged template strings are not supported

[pke]

I want to include the following styled-components example:

const styled = require("styled-components");

const StyledBalance = styled(Balance)`
  &.positive {
    color: green;
  }
  &.negative {
    color: red;
  }
`;

<StyledBalance amount="42"/>

But rendering fails with this error message:

CompileError: Tagged template strings are not supported. Use `transforms: { templateString: false }` to skip transformation and disable this error, or `transforms: { dangerousTaggedTemplateString: true }` if you know what you're doing (3:22)
1 : const styled = require("styled-components");
2 : 
3 : const StyledBalance = styled(Balance)`

Is this a react-docgen error or coming from react-styleguidist? It fails to mention where I have to put the transforms: { templateString: false }

[sapegin]

You can enable it here: https://react-styleguidist.js.org/docs/configuration#compilerconfig

[pke]

Got it:

compilerConfig: {
    transforms: {
      dangerousTaggedTemplateString: true,
    },
  },

Maybe we should put that into the FAQ?

[okonet]

Yes, just ran across this one. @pke can you create a PR please?

[MiguelMadero]

While this works, why is it considered "dangerous"?

[sapegin]

I guess because the transformation isn't fully spec-compliant?

[gazpachu]

I've just run on this one too. The fix worked but I still get this error TypeError: styled is not a function. The module is loading correctly using const styled = require('styled-components'); so I don't know what's wrong.

I've also tried using html primitives...

const StyledTopNav = styled.div

TypeError: styled.div is not a function

Anyone had this before? @pke @okonet @sapegin

[gazpachu]

Fixed const {default: styled } = require("styled-components");