ts-loader with Typescript 4.5 beta: "Error: TypeScript emitted no output for .../index.mts"

[JasonKleban]

Anyone have luck webpack-5-ing with the new .mts extension? I'm able to output from tsc -p . fine, but through webpack I'm getting "Error: TypeScript emitted no output for .../index.mts".

Thanks!

    resolve: {
      // Add `.ts` and `.tsx` as a resolvable extension.
      extensions: [".mts", ".ts", ".tsx", ".js"]
    },
    module: {
      rules: [
        {
            test: /(\.mts$)|(\.tsx?$)/,
            use: [
                {
                    loader: 'ts-loader',
                    options: {
                        //transpileOnly: true
                        compilerOptions: {
                            noEmit: false
                        }
                    }
                }
            ]
        }
      ]
    }

[johnnyreilly]

Haven't tried this at all - am interested with how this pans out!

[JasonKleban]

Yes, I believe it is because of the inclusion of the eventual extension.

import { foo } from "./misc" works as always
import { foo } from "./misc.ts" is wrong and gives TS2691: An import path cannot end with a '.ts' extension. Consider importing './misc.js' instead.

but

import { foo } from "./misc.js"; works with tsc but fails only in webpacking with Module not found: Error: Can't resolve './misc.js' in 'C:\example\src' resolve './misc.js'

Does ts-loader need to correct these paths for resolution? Or what?

[johnnyreilly]

I'm not sure - webpack may need to be configured directly to support modules. Probably worth checking that out first. It may be that ts-loader just works with appropriate config. Or tweaks may be required. Please feel free to investigate; I'll assist where I can.

[johnnyreilly]

I suspect this issue may be interesting to you @JasonKleban webpack/webpack#13252

[johnnyreilly]

It's possible that @alexander-akait's advice here may be what you need:

webpack/webpack#13252 (comment)

Simple: we should not do this https://github.com/TypeStrong/ts-loader/blob/main/src/resolver.ts, instead we should use this.getResolve (simple example https://github.com/webpack-contrib/less-loader/blob/master/src/utils.js#L35), by default you can set extensions: [".ts", "..."], so in future developers don't need to set resolve.extension with .ts extension, it will work out of box.

Plus no problems with future major webpack versions and no need to have enhanced-resolve in deps

[andrewbranch]

I just want to cross-reference microsoft/TypeScript#37582 which is where I redirected microsoft/TypeScript#46344 to. I would love to hear feedback there from Webpack users about

• Why do you want/need to use .mts/.cts files?
• Do you rely on other node12/nodenext module resolution features like export maps?
• Do you have a mix of ESM and CJS dependencies?
• Is anyone using Webpack’s resolve.conditionNames and why?
• Do you want/need to write import paths with complete file extensions? Why?

[johnnyreilly]

Thanks @andrewbranch - much appreciated!

[johnnyreilly]

@djcsdy - feels like this might be interesting to you given your work on https://github.com/softwareventures/resolve-typescript-plugin

[alexander-akait]

I think we don't need a plugin here, webpack already do the same for cjs/mjs, https://github.com/webpack/webpack/blob/main/lib/config/defaults.js#L490, somebody can shortly write problems places with resolving and what is expected and I will show/send a PR with implement

[andrewbranch]

@alexander-akait the issue is that in the new TypeScript module resolution modes, users must write import "./foo.js" even though on disk, the colocated file is ./foo.ts. This is because TypeScript expects TS code to be compiled to JS with these import paths unchanged, that way the output JS will resolve correctly at runtime. But this breaks the expectations of bundlers like Webpack, which does module resolution before a 1:1 TS→JS compilation happens. So the correct specifier for Webpack would be import "./foo.ts" but TypeScript doesn’t allow that. The correct specifier for TypeScript is import "./foo.js" but Webpack can’t resolve that by default.

[alexander-akait]

@andrewbranch Thanks

@johnnyreilly Does we support import foo from './test.ts' here before? want to understand how do not break it for other

[johnnyreilly]

So people don't specify extensions when they're writing TypeScript with ts-loader at present. An import would be extensionless like so:

import { faqsPath } from './misc/FAQs';

Even though the underlying file is FAQs.tsx in this case.