FIX: When using ESM, resolve Typescript imports using .js extension

[luongjames8]

When using ESM imports and Typescript, the convention that the typescript team is pushing is to import typescript .ts files using .js file extension when using ESM modules in Node16 or NodeNext.

See this issue for more background: #TypeStrong/ts-loader/issues/111

However, older version of webpack (prior to v.5.74.0) could not resolve these typescript files with .js extension.

#Environment
ESM Modules, NodeNext

Observed Behaviour

ERROR in ../handler.ts 5:32-66
Module not found: Error: Can't resolve './balancesController.js' in '\sigma'
// balancesController file is named balancesController.ts

How to Fix

webpack bundled with serverless-bundle can resolve these filenames since webpack version v5.74.0, which gets included in the serverless-bundle repo. However, it requires some small modification to the webpack.config.js file, which is not exposed on serverless-bundle. Namely, we need to add an extension alias to module.exports.resolve

I have to add these lines in manually to my node_modules for serverless-bundle each time. Think will be relevant to have in the base configuration as more people may be using ESM modules.

[jayair]

Thanks for this. I think the tests are failing with this:

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
[681](https://github.com/AnomalyInnovations/serverless-bundle/actions/runs/3638996789/jobs/6167130454#step:6:682)
       - configuration.resolve has an unknown property 'extensionAlias'. These properties are valid:
[682](https://github.com/AnomalyInnovations/serverless-bundle/actions/runs/3638996789/jobs/6167130454#step:6:683)
         object { alias?, aliasFields?, byDependency?, cache?, cachePredicate?, cacheWithContext?, conditionNames?, descriptionFiles?, enforceExtension?, exportsFields?, extensions?, fallback?, fileSystem?, fullySpecified?, importsFields?, mainFields?, mainFiles?, modules?, plugins?, preferAbsolute?, preferRelative?, resolver?, restrictions?, roots?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
[681](https://github.com/AnomalyInnovations/serverless-bundle/actions/runs/3638996789/jobs/6167130454#step:6:682)
       - configuration.resolve has an unknown property 'extensionAlias'. These properties are valid:
[682](https://github.com/AnomalyInnovations/serverless-bundle/actions/runs/3638996789/jobs/6167130454#step:6:683)
         object { alias?, aliasFields?, byDependency?, cache?, cachePredicate?, cacheWithContext?, conditionNames?, descriptionFiles?, enforceExtension?, exportsFields?, extensions?, fallback?, fileSystem?, fullySpecified?, importsFields?, mainFields?, mainFiles?, modules?, plugins?, preferAbsolute?, preferRelative?, resolver?, restrictions?, roots?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }

[luongjames8]

OK. Seems like resolve: needs to be create dynamically with some check based on the webpack version. Will do another iteration.