diff --git a/packages/@vue/cli-plugin-typescript/__tests__/tsPluginBabel.spec.js b/packages/@vue/cli-plugin-typescript/__tests__/tsPluginBabel.spec.js
index 42b1af65d9..e88d243989 100644
--- a/packages/@vue/cli-plugin-typescript/__tests__/tsPluginBabel.spec.js
+++ b/packages/@vue/cli-plugin-typescript/__tests__/tsPluginBabel.spec.js
@@ -1,6 +1,7 @@
jest.setTimeout(30000)
const Service = require('@vue/cli-service/lib/Service')
+const create = require('@vue/cli-test-utils/createTestProject')
const { assertServe, assertBuild } = require('./tsPlugin.helper')
test('using correct loader', () => {
@@ -30,3 +31,25 @@ const creatorOptions = {
assertServe('ts-babel-serve', creatorOptions)
assertBuild('ts-babel-build', creatorOptions)
+
+test('tsx-build', async () => {
+ const project = await create('tsx', creatorOptions)
+ await project.write('src/components/HelloWorld.vue', `
+
+ `)
+
+ const { stdout } = await project.run('vue-cli-service build')
+ expect(stdout).toMatch('Build complete.')
+})
diff --git a/packages/@vue/cli-plugin-typescript/index.js b/packages/@vue/cli-plugin-typescript/index.js
index a6f8aef9e6..be65dff5b7 100644
--- a/packages/@vue/cli-plugin-typescript/index.js
+++ b/packages/@vue/cli-plugin-typescript/index.js
@@ -22,12 +22,13 @@ module.exports = (api, projectOptions) => {
const tsxRule = config.module.rule('tsx').test(/\.tsx$/)
// add a loader to both *.ts & vue
- const addLoader = ({ loader, options }) => {
- tsRule.use(loader).loader(loader).options(options)
- tsxRule.use(loader).loader(loader).options(options)
+ const addLoader = ({ name, loader, options }) => {
+ tsRule.use(name).loader(loader).options(options)
+ tsxRule.use(name).loader(loader).options(options)
}
addLoader({
+ name: 'cache-loader',
loader: require.resolve('cache-loader'),
options: api.genCacheConfig('ts-loader', {
'ts-loader': require('ts-loader/package.json').version,
@@ -38,6 +39,7 @@ module.exports = (api, projectOptions) => {
if (useThreads) {
addLoader({
+ name: 'thread-loader',
loader: require.resolve('thread-loader'),
options:
typeof projectOptions.parallel === 'number'
@@ -51,11 +53,13 @@ module.exports = (api, projectOptions) => {
// TODO: I guess the intent is to require the `babel-loader` provided by the Babel vue
// plugin, but that means we now rely on the hoisting. It should instead be queried
// against the plugin itself, or through a peer dependency.
+ name: 'babel-loader',
// eslint-disable-next-line node/no-extraneous-require
loader: require.resolve('babel-loader')
})
}
addLoader({
+ name: 'ts-loader',
loader: require.resolve('ts-loader'),
options: {
transpileOnly: true,