Problems with converting the notepad example from js to tsx

Author: SingheskanCreated Apr 14, 2021Updated Apr 14, 2021

I try to convert the given Notepad example from the base proton-native repository into Typescript. I ran into some issues I could not fix.

Code: TSConfig: { "compilerOptions": { "strict": true, "target": "es6", "module": "ES2015" } }

package.json: `{ "name": "notepad", "version": "1.0.0", "type": "module", "description": "a notepad app built using proton-native", "main": "index.tsx", "scripts": { "start": "babel-node index.tsx" }, "dependencies": { "@types/jest": "^26.0.22", "@types/node": "^14.14.37", "@types/react": "^17.0.3", "@types/react-dom": "^17.0.3", "proton-native": "^2.0.0", "typescript": "^4.2.4" }, "devDependencies": { "@babel/cli": "^7.4.4", "@babel/core": "^7.4.4", "@babel/node": "^7.2.2", "@babel/plugin-proposal-class-properties": "^7.4.4", "@babel/preset-env": "^7.4.4", "@babel/preset-react": "^7.0.0", "@babel/preset-stage-0": "^7.0.0" }, "author": "", "license": "ISC" }

I did not change anything in the other files, except of changing index.js to index.tsx.

Error: babel-node index.tsx

internal/process/esm_loader.js:74 internalBinding('errors').triggerUncaughtException( ^

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".tsx" for C:\\xxx\Notepad\index.tsx at Loader.defaultGetFormat [as _getFormat] (internal/modules/esm/get_format.js:71:15) at Loader.getFormat (internal/modules/esm/loader.js:102:42) at Loader.getModuleJob (internal/modules/esm/loader.js:231:31) at processTicksAndRejections (internal/process/task_queues.js:93:5) at async Loader.import (internal/modules/esm/loader.js:165:17) at async Object.loadESM (internal/process/esm_loader.js:68:5) { code: 'ERR_UNKNOWN_FILE_EXTENSION' } npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: babel-node index.tsx npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\\xxx\2021-04-14T08_50_04_846Z-debug.log

Related stackoverflow post