microsoft/ReSub

TS2304: Cannot find name 'RX'.

MartinOrtiz opened this issue · 13 comments

MartinOrtiz commented

LOVE Resub, want to use it a lot.....but am having compilation errors....

I am using ReactXP, which does use typescript.

My imports are like this

import {  ComponentBase } from 'resub';
import * as React from 'react'
import { TextInput, View, Text , TouchableHighlight, StyleSheet } from 'react-native'
import TodosStore = require('./TodosStore');

It complains about the View, TextInput, TouchableHighlight tags

<View>
<TextInput/>
</View>
 <TouchableHighlight>
   <Text></Text>
 </TouchableHighlight>
</View>
</View>
deregtd commented

Can you list the exact compiler errors?

Also, those are straight imports from react-native, which you can't use with ReactXP. You'll want to switch to importing things from ReactXP, and changing the jsx namespace in your tsconfig.json to ReactXP. Check out the samples in the ReactXP repo for how to set up your environment to use reactxp.

MartinOrtiz commented

I added
import RX = require("reactxp");

This fixed the issue with RX, but in fixing it, it introduced a bunch of others...
I think it's a namespace issue, but am not sure how to fix it.

MartinOrtiz commented

I get a lot of "Module not found" errors like this
ERROR in .//react-native/Libraries/react-native/react-native-implementation.js
Module not found: Error: Can't resolve 'UIManager' in 'C:\Stuff 2018\ReactXP\ResubTest\node_modules\react-native\Libraries\react-native'
@ .//react-native/Libraries/react-native/react-native-implementation.js 99:27-47
@ ./src/TodoList.tsx
@ ./src/ResubPanel.tsx
@ ./src/App.tsx
@ ./src/index.tsx

And these are the final errors....
ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:99:13
TS2300: Duplicate identifier 'require'.

ERROR in [at-loader] ./node_modules/@types/react-native/index.d.ts:3400:42
TS2304: Cannot find name 'Map'.

ERROR in [at-loader] ./node_modules/@types/react-native/index.d.ts:3413:42
TS2304: Cannot find name 'Map'.

ERROR in [at-loader] ./node_modules/@types/react-native/index.d.ts:8618:14
TS2300: Duplicate identifier 'require'.

MartinOrtiz commented

My tsconfig.json looks like this (I believe it is correct)

{
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "declaration": false,
    "noResolve": false,
    "jsx": "react",
    "reactNamespace": "RX",
    "module": "commonjs",
    "target": "es5",
    "experimentalDecorators": true,
    "sourceMap": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "outDir": "./dist/",
    "types": [
      "node"
    ]
  },
  "include": [
    "./src/**/*"
  ]
}
MartinOrtiz commented

My TodosStore is very simple and straightforward...I don't think anything is wrong there...

import { StoreBase, AutoSubscribeStore, autoSubscribe } from "resub";

@AutoSubscribeStore
//export default class TodosStore extends StoreBase {
class TodosStore extends StoreBase {
  private _todos: string[] = [];
  private _testInputValue: string = "";

  updateTextInputValue(value: string) {
    this._testInputValue = value;
    this.trigger();
  }

  addTodo() {
    if (this._testInputValue == "") return;

    // IMPORTANT, MUST CREATE NEW ARRAY, CAN NOT JUST ADD TO EXISTING ARRAY
    this._todos = [...this._todos, this._testInputValue];
    // IMPORTANT, MUST CREATE NEW ARRAY, CAN NOT JUST ADD TO EXISTING ARRAY
    this._testInputValue = ""; // EMPTY OUT STRING
    this.trigger();
  }

  @autoSubscribe
  getTodos() {
    return this._todos;
  }

  @autoSubscribe
  getTextInputValue() {
    return this._testInputValue;
  }
}

//export default new TodosStore();
export = new TodosStore();
MartinOrtiz commented

The panel to display list is the one causing problems.....

import RX = require("reactxp");
import {  ComponentBase } from 'resub';
import * as React from 'react'
//import { TextInput, View as LocalView, Text , TouchableHighlight, StyleSheet } from 'react-native'
import { TextInput, View, Text , TouchableHighlight, StyleSheet } from 'react-native'

import TodosStore = require('./TodosStore');

let styles = StyleSheet.create({
  buttonText: {
    color:'white'
  },
  button: {
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'blue'
  },
  inputContainer: {
    marginTop: 20,
    marginBottom: 20
  },
  input: {
    height: 50,
    backgroundColor: '#ededed',
    padding: 7
  }
})

interface TodoListState {
  todos?: string[];
  todo?: string;
}

class TodoList extends ComponentBase<{}, TodoListState> {
    protected _buildState(props: {}, initialBuild: boolean): TodoListState {
      return {
        todos:  TodosStore.getTodos(), 
        todo: TodosStore.getTextInputValue(),
      }
    }
      
    private _addTodo = () => {
      TodosStore.addTodo()
    }

    private _updateTextField = (value: string) => {
      TodosStore.updateTextInputValue(value)
    }

    render() {
      console.log('state:', this.state)
        return (
            <View style={{ marginTop: 100 }}>
                { this.state.todos.map((x, i) => <Text key={i}>{x}</Text>) }
                <View style={styles.inputContainer}>
                  <TextInput
                    
                    value={this.state.todo}
                    onChangeText={this._updateTextField}
                    style={styles.input}
                  />
                </View>
                <TouchableHighlight onPress={this._addTodo} style={styles.button}>
                  <Text style={styles.buttonText}>Add Todo</Text>
                </TouchableHighlight>
            </View>
        );
    }
}

//export default TodoList;
export = TodoList;
MartinOrtiz commented

The issue I believe is related to extending/using ComponentBase.

class TodoList extends ComponentBase<{}, TodoListState>
{
...
}

MartinOrtiz commented

For ReactXP here are the build commands...

Initial Setup

  • Run npm install. This fetches the dependencies.

Building for Web

  • Run npm run web-watch. This compiles the TypeScript code and recompiles it whenever any files are changed.
  • Open index.html in your browser to view the result.

Building for React Native

  • Run npm run rn-watch. This compiles the TypeScript code and recompiles it whenever any files are changed.
  • In another command prompt run npm start. This starts the React Native Packager.
  • Use Xcode or Android Studio to build and deploy the native app code just like you would with any other React Native project.
MartinOrtiz commented

It's quicker to do the build for the web....you don't have to deal with XCode or Android Studio....
npm run web-watch

If I can build it for web, then building with XCode or Android Studio will not be an issue

a-tarasyuk commented

@MartinOrtiz I think this problem is not related to ReSub. In order to run your example do the following steps

  1. Remove package-lock.json
  2. Use the following package.json
{
  "name": "rxpjupiter",
  "version": "1.0.0",
  "private": true,
  "main": "index.js",
  "scripts": {
    "web-watch": "webpack --progress --colors --watch",
    "rn-watch": "tsc --watch",
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "android": "node node_modules/react-native/local-cli/cli.js run-android",
    "ios": "node node_modules/react-native/local-cli/cli.js run-ios"
  },
  "devDependencies": {
    "@types/node": "^7.0.12",
    "@types/webpack": "^2.2.14",
    "awesome-typescript-loader": "3.1.2",
    "rnpm-plugin-windows": "^0.2.8",
    "source-map-loader": "^0.1.6",
    "tslint": "5.8.0",
    "tslint-microsoft-contrib": "5.0.0",
    "ts-node": "^3.2.1",
    "typescript": "2.7.2",
    "webpack": "2.2.1"
  },
  "dependencies": {
    "react": "16.2.0",
    "react-dom": "16.2.0",
    "react-native": "^0.53.3",
    "react-native-windows": "^0.51.0-rc.1",
    "reactxp": "^1.0.0",
    "axios": "0.18.0",
    "reactxp-imagesvg": "^0.2.7",
    "reactxp-navigation": "^1.0.14",
    "reactxp-video": "^0.2.2",
    "resub": "^1.0.7"
  }
}
  1. run npm install
  2. TodoList can be changed like so
import * as React from 'react'
import RX = require("reactxp");
import {  ComponentBase } from 'resub';

// import { TextInput, View as LocalView, Text , TouchableHighlight, StyleSheet } from 'react-native'
// import { TextInput, View, Text, TouchableHighlight, StyleSheet } from 'react-native'

import TodosStore = require('./TodosStore');

let styles = {
  buttonText: RX.Styles.createTextStyle({
    color:'white'
  }),
  button: RX.Styles.createButtonStyle({
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'blue'
  }),
  inputContainer: RX.Styles.createViewStyle({
    marginTop: 20,
    marginBottom: 20
  }),
  input: RX.Styles.createTextInputStyle({
    height: 50,
    backgroundColor: '#ededed',
    padding: 7
  })
};

interface TodoListState {
  todos?: string[];
  todo?: string;
}

class TodoList extends ComponentBase<{}, TodoListState> {
  protected _buildState(props: {}, initialBuild: boolean): TodoListState {
    return {
      todos:  TodosStore.getTodos(), 
      todo: TodosStore.getTextInputValue(),
    }
  }
      
  private _addTodo = () => {
    TodosStore.addTodo()
  }

  private _updateTextField = (value: string) => {
    TodosStore.updateTextInputValue(value)
  }

  render() {
    console.log('state:', this.state)
    return (
      <RX.View style={{ marginTop: 100 }}>
        { this.state.todos.map((x, i) => <RX.Text key={i}>{x}</RX.Text>) }

        <RX.View style={styles.inputContainer}>
          <RX.TextInput
            value={this.state.todo}
            onChangeText={this._updateTextField}
            style={styles.input}
          />
        </RX.View>

        <RX.Button onPress={this._addTodo} style={styles.button}>
          <RX.Text style={styles.buttonText}>Add Todo</RX.Text>
        </RX.Button>
      </RX.View>
    );
  }
}

export = TodoList;

Note: Example uses components from reactxp, it is the main difference from your example.

@deregtd I think this issue can be closed.

  • 👍1
MartinOrtiz commented

YOU ARE THE MAN!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

It compiles and works.......

One mistake I did was to forget to remove the package-lock.json file....
After I did that and then re-did the "npm install", and "npm run web-watch" (or rn-watch)...it worked.

:-)

  • 😄1
MartinOrtiz commented

THANKS A HEAP!

  • 👍1
  • 😄1