[Vuejs]-Vue with Typescript and Audio Worklets

by

0👍

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"]
}
```

Leave a comment