Parcel 2 - Building TypeScript Node and React

[Rechdan]

I'm trying to make it work, but I'm not sure if what I'm doing is right, here are my files:

package.json

{
	"name": "gamers-test",
	"version": "1.0.0",
	"license": "MIT",
	"scripts": {
		"dev": "parcel watch --no-hmr --no-cache --no-autoinstall --log-level \"verbose\" \"src/client/index.tsx\" \"src/server/index.ts\""
	},
	"dependencies": {
		"express": "4.17.1",
		"helmet": "3.22.0",
		"react": "16.13.1",
		"react-dom": "16.13.1"
	},
	"devDependencies": {
		"@types/express": "4.17.6",
		"@types/helmet": "0.0.47",
		"@types/node": "14.0.5",
		"@types/react": "16.9.35",
		"@types/react-dom": "16.9.8",
		"parcel": "2.0.0-alpha.3.2",
		"typescript": "3.9.3"
	},
	"app": "src/client/index.tsx",
	"server": "src/server/index.ts",
	"targets": {
		"app": {
			"context": "browser",
			"includeNodeModules": true,
			"outputFormat": "esmodule",
			"engines": {
				"browsers": [
					"> 1%",
					"not dead"
				]
			}
		},
		"server": {
			"context": "node",
			"includeNodeModules": true,
			"outputFormat": "commonjs",
			"engines": {
				"node": ">=12.x"
			}
		}
	}
}

index.tsx:

// npm
import React from 'react';
import ReactDOM from 'react-dom';

// react render
ReactDOM.render(
	<>
		<h1>TEST</h1>
	</>,
	document.getElementById('gamers'),
);

index.ts:

// npm
import express from 'express';
import http from 'http';
import helmet from 'helmet';

// main
const main = async () => {
	// consts
	const app = express();
	const server = http.createServer(app);

	// prepare express
	app
		// http header protection
		.use(helmet());

	// prepare http
	server
		// listen
		.listen(3000, 'localhost');
};

// run main
main();

And finally, here is my console output:

yarn run v1.22.4
$ parcel watch --no-hmr --no-cache --no-autoinstall --log-level "verbose" "src/client/index.tsx" "src/server/index.ts"
(node:7392) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 17 error listeners added to [WriteStream]. Use emitter.setMaxListeners() to increase limit
(Use `node --trace-warnings ...` to show where the warning was created)
(node:7392) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 17 close listeners added to [WriteStream]. Use emitter.setMaxListeners() to increase limit
× Build failed.
@parcel/namer-default: Target "app" declares an output file path of "srcclientindex.tsx" which does not match the compiled bundle type "js".
D:\projects\gamers-test\package.json:23:9
  22 |   },
> 23 |   "app": "src/client/index.tsx",
>    |          ^^^^^^^^^^^^^^^^^^^^^^ Did you mean "src\client\index.js"?
  24 |   "server": "src/server/index.ts",
  25 |   "targets": {
Try changing the file extension of "app" in package.json.

[mischnic]

Multiple entries that map to different targets aren't supported at the moment: #3302

(And apart from that, the "app": "src/client/index.tsx" line specifies the output build of the target "app")

[Rechdan]

Got it, thanks!