ttsc and webpack not matching className

[SomethingSexy]

Do I need to use the same transformer reference if I am using ttsc to build the server-side and webpack to use the client side?

This is my tsconfig that is being run using ttsc.

    "plugins": [
      {
          "transform": "typescript-plugin-styled-components",
          "type": "config",
          "minify": true,
          "ssr": true
      }
    ] 

My webpack configuration is using:

      use: [{
        loader: 'awesome-typescript-loader',
        options: {
          getCustomTransformers: () => ({ before: [styledComponentsTransformer] })
        }
      }]

However, I am still getting Prop className did not match with a different class name on the server vs the client. Am I missing something?

[Igorbek]

Hey @SomethingSexy can you show how is styledComponentsTransformer gets created in your webpack? There's a way to pass options during creating of the transformer and make config match.

Nevertheless, it seems ssr = true is default (in the latest version). So we should expect the same ids. Could you please give any reproduction code to show different results between client and server?

[Igorbek]

Also, it'd be useful to know what the versions of the transformer as well as the versions of typescript are used to compile code for server and for client. If they are different it might produce discrepancies in generating ids of components.

Second, make sure the minify option has the same value on server and client.

And lastly, the difference may come from the styled-components itself. This tranformer only generates constant css classnames of components. They also have another classname that is dynamic and based on what styles are actually being applied.

[SomethingSexy]

Thanks for the feedback! I will look into your suggestions this week. If those don't work I will provide relevant code.

[SomethingSexy]

OK so made sure things matched up and I am still seeing differences.

Here are the versions I am using:

• "ttypescript": "^1.5.7"
• "typescript-plugin-styled-components": "^1.4.3"
• "typescript": "^3.6.3"

Here is what my webpack transformer looks like. I keep the ssr true in there for now.

const styledComponentsTransformer = createStyledComponentsTransformer.createTransformer({
  "minify": true,
  "ssr": true
});
...
use: [{
   loader: 'awesome-typescript-loader',
     options: {
       getCustomTransformers: () => ({ before: [styledComponentsTransformer] })
     }
}]

It doesn't look like any of the classes are matching up:

Prop className did not match. Server: "ThemeHeader-sc-1gicv12 hKAZxG h3" Client: "ThemeHeader-sc-14yh7i9 bsgTAg h3"

Also just to make sure I am not missing something, this is how I am running the TS build in my npm scripts:

ttsc --outDir ./modules

[Igorbek]

Hm, is it possible that the root compilation folder in webpack and ttsc are different in your setup? The hash is calculated based on the component name (ThemeHeader matched), filename relative to the compilation source root and component's number within the file (should be consistent). I suspect the relative file name might be different.

Please take a look if that is something you can configure on your site. I'll also investigate that case.

[SomethingSexy]

That is a good thought! I will investigate that further.

[SomethingSexy]

So I think your thought is correct but I am not sure why it is doing that. So when I run the build with ttsc the sourceRoot is undefined. When it runs through webpack though it has a sourceRoot set.

[Igorbek]

Try to set sourceRoot option in your tsconfig.json file.

[SomethingSexy]

Doh! Ya I think that is it. Makes sense. Testing it now.

[SomethingSexy]

Yup that did it! Thank you for working through this with me.

[Igorbek]

Good to hear it! I'm closing this, but with added an action item #73