Open acuntex opened 6 years ago
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.
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);
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.
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
).
@shirakaba But it's pretty hacky :(
Last time i used this manual approach referenced Assets were not copied.
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:
Somehow I believe the transformers are not compatible with the babel-plugins replacing the import of react-native.
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