2

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! notepad@1.0.0 start: babel-node index.tsx
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the notepad@1.0.0 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
Singheskan
  • 43
  • 3

1 Answers1

1

You can check here on how to setup you tsconfig.json. I know it's for React Native, but it should still be helpful.

JC_
  • 83
  • 7