I try to convert the Notepad example from the 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"
}
index.tsx
import React, { Component } from 'react';
import fs from 'fs';
import { App, AppRegistry, Window, TextInput, View } from 'proton-native';
class Notepad extends Component {
state = { text: '' };
shouldComponentUpdate(nextProps, nextState) {
if (typeof nextState.text === 'string') return false;
// nextState is set from input
else return true; // nextState is set from file
}
render() {
return (
<App>
<Window>
<View style={{ flex: 1 }}>
<TextInput
onChangeText={text => this.setState({ text })}
value={this.state.text}
style={{ flex: 1 }}
multiline
/>
</View>
</Window>
</App>
);
}
}
AppRegistry.registerComponent('notepad', <Notepad />);
I did not change anything in the other files, except of changing index.js to index.tsx. Related stackoverflow post. I could not figure out how to change the index.js (now index.tsx code) into the ES2015 format. (as suggested in 2)
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
