.tsx files not correctly parsed

[rmccue]

The default ts-loader doesn't appear to work correctly, as it then never gets Babelified. Looks like it needs to be babel-loader!ts-loader instead of just ts-loader?

Digging further.

[rmccue]

The following modifications look to be needed to properly support TS + JSX:

loaders.ts.defaults.loader = 'babel-loader';
module.exports = presets.development( {
	// ...
	resolve: {
		extensions: [
			'.ts',
			'.tsx',
			'.js',
			'.json',
		],
	},
] );

That is, the loader needs to be set to Babel (with @babel/preset-typescript added to the babelrc?) in order to parse the Babel parts from files (see this post). react-scripts does the same; they're also using ForkTsCheckerWebpackPlugin (matching this example); it's probably worth considering this, because ts-loader is hella slow at scale.

Also, the extensions need to include .ts/.tsx by default. Compare react-scripts' extension list (which is filtered based on TS support).

[kadamwhite]

@rmccue Thanks for this catch. Could I ask you to put together a gist or a PR that demonstrates the issue? Should be able to get this fix in pretty quickly if so. Otherwise, it may need to wait for the next major as I should be able to allocate some more significant time once @igmoweb's Webpack 5 pr is ready to fly, and could tackle this during that.

[rmccue]

Could potentially use https://github.com/rmccue/experimental-navigation/blob/main/.config/webpack.config.dev.js and toggle the additions off to see what it looks like; it's a fairly simple project.

Should be fairly easy to PR the change, will do so soon.