Can this work with typescript?

[fallenleavesguy]

I use it like this:

...
files: [
      'test/unit/index.ts'
    ],
preprocessors: {
      'test/unit/index.ts': ['webpack', 'sourcemap']
    },

....

That can't work, because the output file is index.ts,
browser doesn't recognize .ts file.

Refused to execute script from 'http://localhost:9876/base/test/unit/index.ts?1686cc9319418c4d4ff5c972e81d9d948a0309e4' because its MIME type ('video/mp2t') is not executable.

when I change all .ts to .js,and index.ts to index.js,
it work well. How can I solve this?
thanks.

[fallenleavesguy]

I can fix this by add some code to karma.conf.js:

 mime: {
      'text/x-typescript': ['ts','tsx']
    }

is there something better?

[zuzusik]

More info on this issue:

• this started happened with Chrome starting from version 55
• Karma always served .ts files with Content-Type:"video/mp2t" header, previously both Chrome and Firefox just executed this type of files as javascript files for some reason, but seems like Chrome 55 fixed this
• probably it would be fixed in Firefox soon too
• considering this, it would be nice to add possibility to configure extension - now original name is used, should have possibility to specify .js extension. This could be even the default extension (breaking change, will need new major version of Karma-webpack), because, actually, this is the only file format that browser accepts for javascript files.

[joshwiens]

@MikaAK - Something that we should address in #master at the very least. Back porting it later is another issue.

[MikaAK]

Interesting I was unaware of this previously. I'll make sure to get this fixed in v2

[joshwiens]

It's new(ish) as of Chrome 55 unless you run Canary.

[ngbrown]

Just caught this on an older project I loaded up, and it suddenly wasn't working... Of course Chrome had changed in the meantime. Updated to newest version of Karma, etc., and still not working till I added the mime config change.

@MikaAK Is there a commit or merge request to track for this getting released?

[hannah23280]

My karma-webpack is currently v2.0.2. The karma-webpack still does not transpile the file in .ts to .js, and current workaround is mime: {'text/x-typescript': ['ts','tsx']}.

Also, i read on internet that WebPack, by default, doesn't pass source maps up to Karma unless the file extension is .js. the workaround is to explicitly configure the webpack property in Karma config file to be as shown below
webpack: {
.....
plugins:[
new webpack.SourceMapDevToolPlugin({
filename: null
test: /.(ts|js)($|?)/i // to allow webpack to pass sourcemap if the file is ts or js.

})]

If karma-webpack can transpile ts to js, the above workaround will not be needed.

[gluons]

Is it posible to have the option like transformPath in karma-coffee-preprocessor? 😏

Changing mime seems like hacking. 😅

[bradharms]

@hanct
I got a syntax error with that regex. I tried this instead:

plugins: [
    new webpack.SourceMapDevToolPlugin({
      filename: null,
      test: /\.(ts|tsx|js)($|\?)/i
    })
  ],

It did change the stack traces but it still doesn't seem quite right.

[quantuminformation]

  mime: {
      'text/x-typescript': ['ts','tsx']
    },

Works, OP deserves a coffee from all of us, or a virtual hifi, whatever is easiest.

[sechel]

See also #334.

[fallenleavesguy]

I have moved to jest for a few years

[quantuminformation]

Jest can do everything that you need with Karma???

[gluons]

@quantuminformation Jest don't need Karma.
They use jsdom. So, it doesn't need browser.