I've encountered a challenge with configuring Vue to compile audio worklets. Specifically, I am facing a similar issue to this problem that has already been resolved, but using Typescript instead of JavaScript. My approach was to include the ts-loader before the worklet-loader when processing *.worklet.ts files. However, TypeScript is not generating 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",
},
},
],
},
],
},
},
};
Currently, TypeScript lacks full support for Audio Worklets. Hence, I have integrated the recommended definitions into my TypeScript project to enable parsing of worklets.