With HappyPack

[alteredtastes]

Hi there @Igorbek - I'm having some issues setting this up but my team would love to have this improved debugging experience. We are not using hot reloading and we have ts-loader v3.1.1 with HappyPack. My configuration currently looks like..

const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default;
const styledComponentsTransformer = createStyledComponentsTransformer({options: getStyledComponentDisplay});

function getStyledComponentDisplay(filename, bindingName) {
    return bindingName || makePascalCase(filename);
}

// webpack plugins...
plugins {
   typescriptTranspiler: function(workers) {
      return new HappyPack({
         id: 'ts',
         threads: workers,
         loaders: [
            {
               path: 'ts-loader',
               query: { happyPackMode: true },
               options: {
                getCustomTransformers: () => ({before: [styledComponentsTransformer]})
               }
            }
         ]
      })
   }

Is there something you see that is missing or problematic in this usage? I am seeing the build succeed but still with no bindingName/filenames on the generated html. Thanks for any help!

[Igorbek]

Hi, thank you for reporting.
Unfortunately, as far as I know, ts-loader did not implement that feature.
The issue is that when HappyPack/thread-loader forks processes it cannot serialize functions inside options. And since getCustomTransformers is a function, it is not transferred to a forked process.
awesome-typescript-loader has implemented a feature where getCustomTransformers can be a string that identifies a module that will be resolved in a forked process. That totally solves that issue there.
You can file the similar issue in ts-loader and refer to similar issue.

[alteredtastes]

I see. I suppose I'll take this up in ts-loader. Thanks for reply!

[alteredtastes]

Pending fix is in review thanks to @vagusX 🎉 👉 TypeStrong/ts-loader#745

[Igorbek]

README has been updated with the instructions.

[bernatfortet]

@alteredtastes did this ever work for me?
It's still an issue for me. HappyPack and Webpack load just fine but there's no effect on the className side.