I am using a Web Worker in typescript the following way:
const url = new URL("src/lib/Functions/CalculateRidge.ts", import.meta.url);
const worker = new Worker(url, { type: 'module' })
In development, this work perfectly fine, the worker is loaded from the given url, and the worker executes the function and gives the correct result. But when building, all files get converted to .js except my worker file. Then in deployment (Github Pages) when the same code above is being executed, the url request IS succesful (it finds the file and makes a valid/succesful request for it), but the code fails with the following error message:
“Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “video/mp2t”. Strict MIME type checking is enforced for module scripts per HTML spec.”
I believe this error comes because a typescript file (a file with .ts extentions) cannot be executed or read, so i believe the error lays in that the Web Worker file is not being compiled/transformed into Javascript.
This is an image of the distribution/build folder:
I use “vite build” to build the project and “npx gh-pages -d dist” to deploy the project to Github Pages. The vite.config.ts file looks like this:
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
base: "/solar-analysis-faroe-island/",
plugins: [svelte()],
resolve: {
alias: {
src: path.resolve('src/'),
}
},
})
tsconfig.node.json looks like this:
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node"
},
"include": ["vite.config.ts"]
}
tsconfig.json looks like this:
{
"extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": {
"baseUrl": ".",
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"resolveJsonModule": true,
"paths": {
"src/*": [
"src/*"
]
},
/**
* Typecheck JS in `.svelte` and `.js` files by default.
* Disable checkJs if you'd like to use dynamic types in JS.
* Note that setting allowJs false does not prevent the use
* of JS in `.svelte` files.
*/
"allowJs": true,
"checkJs": true,
"isolatedModules": true
},
"include": ["src/*.ts","src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
"references": [{ "path": "./tsconfig.node.json" }]
}
And svelte.config.js looks like this:
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
export default {
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
// for more information about preprocessors
preprocess: vitePreprocess(),
}
