displayName not working in SSR

[TacoMantra]

I'm seeing neither the component nor filename in the css classes in my project using SSR with renderToNodeStream regardless of the options I pass to the plugin. I am using v1.8.0 of this plugin and v4.0.3 of styled components.

Setup is as follows:

Server:

  const Content = () => (
      <Provider store={store}>
        <OidcProvider store={store} userManager={userManager}>
        <SharedInfoContext.Provider value={{ userManager }}>
          <StaticRouter location={req.originalUrl} context={{}}>
            <ThemeProvider theme={themeModule.theme}>
              <AppContainer />
            </ThemeProvider>
          </StaticRouter>
          </SharedInfoContext.Provider>
        </OidcProvider>
      </Provider>
    );

    res.write(`${header}<div id="root">`);
    const sheet = new ServerStyleSheet();
    const appContent = sheet.collectStyles(<Content />);
    await dataFetches(req, store);

    const stream = sheet.interleaveWithNodeStream(
      ReactDOMServer.renderToNodeStream(appContent)
    );

    stream.pipe(
      res,
      { end: false }
    );

    stream.on('end', () => {
      res.end(`</div><script>      
              window.__PRELOADED_STATE__ = ${JSON.stringify(store.getState()).replace(/</g, '\\\u003c')}
              </script>${footer}`);
    });

Client:

      ReactDom.hydrate(
        typeof window !== 'undefined' ? (
          // @ts-ignore
          <Provider store={store}>
            <OidcProvider store={store} userManager={userManager}>
              <PageObjects>
                <SharedInfoContext.Provider value={{ userManager }}>
                  <ThemeProvider theme={themeModule.theme}>
                    <ModalElement
                      stackHighestLayer={this.props.stackHighestLayer}
                      onClick={() => ExternalClick()}
                    >
                      <Container onClick={e => e.stopPropagation()}>
                        <Content>
                          {!this.props.showHeader && (
                            <Header>
                              {this.props.title && (
                                <Title>{this.props.title}</Title>
                              )}
                              <CloseButton>
                                <IconButton
                                  autofocus={true}
                                  clickHandler={this.props.ExternalClick}
                                  iconName="Close"
                                  iconFillColour={
                                    themeModule.theme.colors.uiColors.greyscale4
                                  }
                                  ariaLabel="close modal"
                                />
                              </CloseButton>
                            </Header>
                          )}
                          <ModalBody>{this.props.children}</ModalBody>
                        </Content>
                      </Container>
                    </ModalElement>
                  </ThemeProvider>
                </SharedInfoContext.Provider>
              </PageObjects>
            </OidcProvider>
          </Provider>
        ) : (
          <div>Loading</div>
        ),
        this.modalTarget
      );

One peculiarity of this project is that styled components are written in js and they are imported into tsx files where we use them in our React components. We are using webpack and transpiling our ts with ts-loader and our js with babel on both server and client.

Any idea what we are doing wrong?

[casperle]

Same problem here but with renderToString. I can change the settings of babel-plugin-styled-components but nothing changes in the rendered markup. Any idea?