Compatibility with react-native-typescript-transformer

[acuntex]

Description

I have an existing project with which i create an android, ios and windows-app (react-native-windows). This project uses "react-native-typescript-transformer" to use TypeScript as language. I've integrated react-native-macos as explained in other issues, with modifications for the rn-cli.config.js and .babelrc. When trying to run the app, the metro builder crashed with the following error:

Bundling `index.macos.js`  ░░░░░░░░░░░░░░░░  0.0% (0/124)/path/node_modules/react-native-macos/packager/src/JSTransformer/worker/worker.js:116
    code = code.replace(/^#!.*/, '');
                ^

TypeError: Cannot read property 'replace' of undefined
    at transformCode (/path/node_modules/react-native-macos/packager/src/JSTransformer/worker/worker.js:116:17)
    at exports.transformAndExtractDependencies (/path/node_modules/react-native-macos/packager/src/JSTransformer/worker/worker.js:149:3)
    at handle (/path/node_modules/react-native-macos/packager/src/worker-farm/lib/child/index.js:51:8)
    at process.<anonymous> (/path/node_modules/react-native-macos/packager/src/worker-farm/lib/child/index.js:57:3)
    at process.emit (events.js:180:13)
    at emit (internal/child_process.js:783:12)
    at process._tickCallback (internal/process/next_tick.js:178:19)
 ERROR  Channel closed
Error [ERR_IPC_CHANNEL_CLOSED]: Channel closed
    at ChildProcess.target.send (internal/child_process.js:599:16)
    at Object.send (/path/node_modules/react-native-macos/packager/src/worker-farm/lib/fork.js:30:15)
    at Farm.stopChild (/path/node_modules/react-native-macos/packager/src/worker-farm/lib/farm.js:135:11)
    at Farm.<anonymous> (/path/node_modules/react-native-macos/packager/src/worker-farm/lib/farm.js:102:10)
    at ontimeout (timers.js:466:11)
    at tryOnTimeout (timers.js:304:5)
    at Timer.listOnTimeout (timers.js:267:5)

Somehow I believe the transformers are not compatible with the babel-plugins replacing the import of react-native.

module.exports = {
//... react-native-macos patches
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer');
  },
  getSourceExts() {
    return ['ts', 'tsx'];
  }
}

Reproduction Steps and Sample Code

Install "react-native-typescript-transformer" according to https://github.com/ds300/react-native-typescript-transformer in a fresh react-native-macos project and import a ts file. (you have to install react-native, too, and add the patches needed for the rn-cli.config.js and .babelrc)

Additional Information

• React Native version: 0.55.3
• Platform: iOS, Android, Windows, MacOS
• Development Operating System: MacOS

[ptmt]

Thanks for reporting this. Just wanted to let you know, I've read this, but don't have a solution yet, need some time to debug.

[shirakaba]

I have reproduced this too:

rn-cli.config.js

Note that I didn't include any of the react-native-macos patches yet.

module.exports = {
    getTransformModulePath() {
        return require.resolve('react-native-typescript-transformer');
    },
    getSourceExts() {
        return ['ts', 'tsx'];
    }
};

package.json

{
	"name": "MyProject",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"start": "node node_modules/react-native-macos/local-cli/cli.js start",
		"ios": "react-native run-ios",
		"android": "react-native run-android",
		"macos": "react-native-macos run-macos",
		"test": "jest"
	},
	"dependencies": {
		"react": "16.0.0-alpha.12",
		"react-native": "^0.55.3",
		"react-native-macos": "0.16.1"
	},
	"devDependencies": {
		"@types/react": "^16.3.13",
		"@types/react-native": "^0.55.12",
		"babel-jest": "22.4.3",
		"babel-preset-react-native": "4.0.0",
		"jest": "22.4.3",
		"react-native-typescript-transformer": "^1.2.5",
		"react-test-renderer": "16.0.0-alpha.12",
		"typescript": "^2.8.3"
	},
	"jest": {
		"preset": "react-native-macos"
	}
}

tconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "jsx": "react-native",
    "baseUrl": ".",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true
  }
}

index.macos.js

import React, { Component } from 'react';

import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import TSDemo from "./TSDemo";

export default class MyProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native macOS!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.macos.js
        </Text>
        <TSDemo/>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('MyProject', () => MyProject);

The TypeScript module, TSDemo.tsx

import React, {Component} from "react";
import {Text} from "react-native";

export default class TSDemo extends Component<{}, {}> {
    render(){
        return <Text>TYPESCRIPT WORKING</Text>
    }
}

I will continue to investigate this, but I haven't made any progress in the last few hours; anything involving debugging the packager is beyond me.

[shirakaba]

Note to all: Although I can't get react-native-typescript-transformer working, we can at least still develop with TypeScript:

react-native-macos init MyProject
cd MyProject
# npm install --save-dev @types/react @types/react-native typescript
yarn add --dev @types/react @types/react-native typescript
touch tsconfig.json
open macos/MyProject.xcodeproj

Now add the following to tsconfig.json:

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "jsx": "react-native",
    "lib": ["ES5", "ScriptHost", "ES2015.Collection"], // Standard ES5 libs
    "baseUrl": ".",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true
  }
}

Now, run the following to automatically transpile .ts(x) files to .js:

node_modules/.bin/tsc --watch

... Then, with MyProject.xcodeproj open, Run the My Mac target.

Hot module reloading even works (from the React Native menu, just select Enable Hot Reloading).

[acuntex]

@shirakaba But it's pretty hacky :(

Last time i used this manual approach referenced Assets were not copied.