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 es 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 typescript file is not being piled/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';

// /config/
export default defineConfig({
  base: "/solar-analysis-faroe-island/",
  plugins: [svelte()],
  resolve: {
    alias: {
      src: path.resolve('src/'),
    }
  },
})

tsconfig.node.json looks like this:

{
  "pilerOptions": {
    "posite": true,
    "module": "ESNext",
    "moduleResolution": "Node"
  },
  "include": ["vite.config.ts"]
}

tsconfig.json looks like this:

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "pilerOptions": {
    "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 /docs#pile-time-svelte-preprocess
  // for more information about preprocessors
  preprocess: vitePreprocess(),

}

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 es 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 typescript file is not being piled/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:

{
  "pilerOptions": {
    "posite": true,
    "module": "ESNext",
    "moduleResolution": "Node"
  },
  "include": ["vite.config.ts"]
}

tsconfig.json looks like this:

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "pilerOptions": {
    "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#pile-time-svelte-preprocess
  // for more information about preprocessors
  preprocess: vitePreprocess(),

}

• javascript
• typescript
• svelte
• vite
• web-worker

Share Improve this question Follow asked Apr 18, 2023 at 3:59 Ólavur NónÓlavur Nón 40544 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

There is an open issue regarding that; a suggested workaround is importing via with a ?worker&url query, that would be:

import workerUrl from "src/lib/Functions/CalculateRidge?worker&url";
const worker = new Worker(workerUrl, { type: 'module' })

Relevant docs