Vue-loader: Babel loader handling TypeScript fails

[jorgy343]

Version

15.4.2

Reproduction link

https://github.com/jorgy343/TypeScript-Babel-Starter

Steps to reproduce

Run the "bundle" npm script.

What is expected?

babel-loader, which is setup to handle TypeScript, should strip out the interface in src/test.vue.

What is actually happening?

The following error is produced:

ERROR in ./src/test.vue?vue&type=script&lang=ts& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/test.vue?vue&type=script&lang=ts&)
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Repos\TypeScript-Babel-Starter\src\test.vue: interface is a reserved word in strict mode (7:0)

---

I can confirm that babel-loader is correctly stripping out typing information for .ts files. This is why I believe there may be an issue with vue-loader.

[jorgy343]

I was able to resolve the issue by adding "@babel/transform-typescript" as the first plugin in the .babelrc file. I think this is good enough to close the issue. For completeness the .babelrc file I am using in my project is included below.

{
    "presets": ["@babel/env", "@babel/typescript"],
    "plugins": [
        "@babel/transform-typescript",
        [
            "@babel/proposal-decorators",
            {
                "legacy": true
            }
        ],
        "@babel/proposal-class-properties",
        "@babel/transform-runtime",
        "@babel/transform-async-to-generator",
        "@babel/proposal-object-rest-spread"
    ],
    "comments": false
}

[pawelgabryelewicz]

Hi,

I have faced the same issue. Indeed adding @babel/transform-typescript works but it's not a perfect solution. The drawback is that Babel will try to transpile everything from TypeScript, also JS files. Usually it shouldn't be a problem, but I imagine some situations where the syntax will be ambiguous and the transpilation won't work properly.

To ultimately solve this problem, I have created my own babel-preset-typescript-vue which is a drop-in replacement for @babel/preset-typescript. Basically it does an exception for .vue files and parses them. If a particular file has a declared ts language for <script> tag, it will run @babel/plugin-transform-typescript to transpile it properly.

Hope it helps.

[fabd]

How is this issue solved then?

I tried following this "Babel + TypeScript marriage" and bumped into the same issue. The TS in .vue files, when configured to be handled by babel-loader, does not go through the @babel/typescript plugin.

https://iamturns.com/typescript-babel/