undefined is not a constructor

[obeleh]

I must be doing something wrong, can you point me in the right direction?

undefined is not a constructor(evaluating 'new _reactNativeUsbserial.UsbSerial()')

"dependencies": {
    "expo": "^20.0.0",
    "react": "16.0.0-alpha.12",
    "react-native": "^0.47.0",
    "react-native-usbserial": "^1.0.0"
  }

[mapaiva]

Hello @obeleh,

When is this error happening (build, test, start)? Can you share your index.android.js?

[obeleh]

I only have an App.js (mostly generated)

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { UsbSerial} from 'react-native-usbserial';

console.log('1');

const usbs = new UsbSerial();

console.log('2');

async function getDeviceAsync() {

    try {
        const deviceList = await usbs.getDeviceListAsync();
        const firstDevice = deviceList[0];

        console.log(firstDevice);

        if (firstDevice) {
            const usbSerialDevice = await usbs.openDeviceAsync(firstDevice);

            console.log(usbSerialDevice);
        }
    } catch (err) {
        console.warn(err);
    }
}

getDeviceAsync();


export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

It happens onLoad

[mapaiva]

@obeleh,

The problem was being caused by a bad export in the library index.js file and it's already fixed!

Could you please update to [email protected] and check if the problem persists?

[obeleh]

The problem is solved. But further along I get the following message. Probably a similar issue?

[TypeError: undefined is not an object (evaluating 'UsbSerialModule.getDeviceListAsync')]

[mapaiva]

@obeleh,

Unfortunately, I couldn't simulate it 😞.

I ran the following code on a fresh project and everything worked just fine.

Steps:

$ react-native init rnUsbSerial
$ yarn add react-native-usbserial
$ react-native link react-native-usbserial
$ react-native start
$ react-native run-android

index.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { UsbSerial } from 'react-native-usbserial'

const usbs = new UsbSerial();

export default class rnUsbSerial extends Component {
	constructor(props) {
		super(props);
		
		async function getDeviceAsync() {
			try {
				const deviceList = await usbs.getDeviceListAsync();
				const firstDevice = deviceList[0];

				console.log(deviceList);
				console.log(firstDevice);
				if (firstDevice) {
					const usbSerialDevice = await usbs.openDeviceAsync(firstDevice);
					console.log(usbSerialDevice);
				}
			} catch (err) {
				console.warn(err);
			}
		}
		
		getDeviceAsync();
}

  render() {
		console.log(usbs);
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

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

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

Can you try to recreate your project under the conditions mentioned above?

[obeleh]

Wow that is totally different from what I did.

Anyway I also ran into this: #3
Did what he suggested and got a step further.

And now I get:

error: bundling failed: "TransformError: /Users/sjuul/workspace/rnUsbSerial/index.android.js: Unexpected token ) (While processing preset: \"/Users/sjuul/workspace/rnUsbSerial/node_modules/babel-preset-react-native/index.js\")"

PyCharm nor https://babeljs.io are giving parse errors.

[mapaiva]

Hmmm, this error is quite generic 🤔. It's most likely to be a Pycharm error transpiling the javascript code.

In order to run the snippet I've posted before I've used the following dependencies:

package.json

{
  "name": "rnUsbSerial",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.0.0-alpha.12",
    "react-native": "0.47.1",
  },
  "devDependencies": {
    "babel-jest": "20.0.3",
    "babel-preset-react-native": "^2.1.0",
    "jest": "20.0.4",
    "react-test-renderer": "16.0.0-alpha.12"
  },
  "jest": {
    "preset": "react-native"
  }
}

Could you check if you're able to run and build it manually using these deps?