Ts-loader: appendTsxSuffixTo: [/\.vue$/] not work with happyPackMode

[vegawong]

Expected Behaviour

work with vue single file compoent, use HappyPack plugin to decalre the loader's option like

new HappyPack({
            id: 'ts',
            verbose: false,
            loaders: [
                {
                    loader: 'ts-loader',
                    options: {
                        appendTsSuffixTo: [/\.vue$/],
                        happyPackMode: true,
                    }
                }
            ]
        }),

Actual Behaviour

it not work!
but only i use the appendTsSuffixTo in the webpack config without happypack like

 const rules = [
        {
            test: /\.(ts|js)$/,
            // loader: 'happypack/loader?id=ts',
            loader: 'ts-loader',
            options: {
                appendTsxSuffixTo: [/\.vue$/]
            },
            exclude: /node_modules/
        }
    ];

then it work, but i can not use it with happypack mode

Steps to Reproduce the Problem

when i declare the HappyPack plugin like

new HappyPack({
            id: 'ts',
            verbose: false,
            loaders: [
                {
                    loader: 'ts-loader',
                    options: {
                        appendTsSuffixTo: [/\.vue$/],
                        happyPackMode: true,
                    }
                }
            ]
        }),

and declare the rule section like

 const rules = [
        {
            test: /\.(ts|js)$/,
            loader: 'happypack/loader?id=ts',
            exclude: /node_modules/
        }
    ];

then it would be show the error:

ERROR in ./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/page/index/Index.vue
Module build failed: Error: Could not find file: '/Users/vega/Project/my/cloud-platform/src/page/index/Index.vue'.

Location of a Minimal Repository that Demonstrates the Issue.

[johnnyreilly]

Hi, I'm not a Vue user so I'm not sure if this is a ts-loader problem or not. I know that the vue-cli uses ts-loader with the fork-ts-checker-webpack-plugin successfully which is a similar setup. I don't know if they have happypack or thread-loader in the mix too or not. Either way, I suspect this could work but I haven't tried.

@wonderful-panda / @CKGrafico have you tried using happypack with ts-loader / Vue?

[wonderful-panda]

@johnnyreilly
I've not used happypack yet.
As far as trying shortly, it seems to work for me.

https://github.com/wonderful-panda/inazuma/blob/happypack-test/src/renderer/webpack.config.js

[CKGrafico]

BTW I think that with Webpack 4 you don't need happypack.
EDIT: ouch parallelize only for prod https://medium.com/webpack/webpack-4-beta-try-it-today-6b1d27d7d7e2

Not sure why is not working but I'll try asap

[johnnyreilly]

Thanks @wonderful-panda and @CKGrafico

FWIW I'm a thread-loader + cache-loader user rather than happypack. Same principle though - see

https://github.com/TypeStrong/ts-loader/tree/master/examples/thread-loader for an example

[vegawong]

@wonderful-panda thanks! I will try again by your example

[vegawong]

@CKGrafico webpack 4 maybe a wonderful way!

[vegawong]

@wonderful-panda it work! and i found that i must set ts/tsx loader option to vue-loader

before that, i only set the ts/tsx loader but not in the vue-loader option and it work with muti file mode in vue project, like the script/style/templte section become with three files as xxx.ts/xxx.scss/xxx.vue in a component

why use with babel that it didn't use to set vue-loader'option with js loader but must be setted with ts?

[wonderful-panda]

@vegawong

babel is necessary to transpile tsx with babel-plugin-transform-vue-jsx.
(So, *.ts does not need babel actually.)

[johnnyreilly]

Closing as seems to be resolved