Vue with Typescript and Audio Worklets

Question

I am having trouble configuring Vue to compile audio worklets. This is basically this issue, which is already solved, but with Typescript instead of JavaScript. My idea was to put ts-loader before the worklet-loader when parsing *.worklet.ts files, so that the worklet is first compiled down to JavaScript and then the worklet loader can parse it. TypeScript does not emit any output for some reason:

 ERROR  Failed to compile with 1 error                                                                                                                                                     20:37:39
 error  in ./src/window.worklet.ts

Syntax Error: Error: TypeScript emitted no output for D:\(...)\equalizer\src\window.worklet.ts.


 @ ./src/visualizer.ts 44:0-50 45:12-30
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/TabVisuals.vue?vue&type=script&lang=ts
 @ ./src/components/TabVisuals.vue?vue&type=script&lang=ts
 @ ./src/components/TabVisuals.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=ts
 @ ./src/App.vue?vue&type=script&lang=ts
 @ ./src/App.vue
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://(...):8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

This is my vue.config.js:

module.exports = {
    css: {
        loaderOptions: {
            sass: {},
        },
    },
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.worklet\.tsx?$/i,
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: "ts-loader",
                            options: { projectReferences: true },
                        },
                        {
                            loader: "worklet-loader",
                            options: {
                                name: "js/[hash].worklet",
                            },
                        },
                    ],
                },
            ],
        },
    },
};

At the moment, TypeScript does not not fully support Audio Worklets, which is why I included the suggested definitions into my project for TypeScript to parse my worklet.

Answer 1

I fixed the issue by digging into the Weboack documentation. Loaders are applied in reverse array order. This is a working vue.config.js:

module.exports = {
    css: {
        loaderOptions: {
            sass: {},
        },
    },
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.worklet\.ts$/i,
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: "worklet-loader",
                            options: {
                                name: "js/[hash].worklet.js",
                            },
                        },
                        {
                            loader: "ts-loader",
                            options: {
                                configFile: "tsconfig.worklet.json",
                            },
                        },
                    ],
                },
            ],
        },
    },
};

tsconfig.worklet.json:

{
    "compilerOptions": {
        "target": "ES2018",
        "module": "esnext",
        "strict": true,
        "importHelpers": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "experimentalDecorators": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "baseUrl": ".",
        "types": ["webpack-env"],
        "paths": {
            "@/*": ["src/*"]
        },
        "lib": ["esnext", "scripthost"]
    },
    "include": ["src/**/*.worklet.ts"],
    "exclude": ["node_modules"]
}
```