CODEWITHSUNDEEP
reactjsreact-nativeexpo
albertski
albertski

Reputation: 2622

Attempted import error: 'DeviceEventEmitter' is not exported from 'react-native'

I am trying to build a barcode scanner web app. I found some code samples online but when I run yarn start-web I get the following error:

Failed to compile.

./node_modules/expo/build/Notifications/Notifications.js Attempted import error: 'DeviceEventEmitter' is not exported from 'react-native'.

package.json

{
  "name": "BarcodeExpo",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "jest-expo": "~27.0.0",
    "react-native-scripts": "1.14.0",
    "react-test-renderer": "16.3.1"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "jest",
    "start-web": "react-scripts start",
    "build-web": "react-scripts build"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "expo": "32.0.0",
    "query-string": "^6.2.0",
    "react": "16.7.0",
    "react-art": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-native": "0.57.8",
    "react-native-web": "^0.9.13",
    "react-router-dom": "^4.3.1",
    "react-router-native": "^4.3.0",
    "react-scripts": "^2.1.3"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

App.js

'use strict';

import React, { Component } from 'react';
import { Text, View, StyleSheet, Alert } from 'react-native';
import { Constants, BarCodeScanner, Permissions } from 'expo';

export default class App extends Component {
  state = {
    hasCameraPermission: null
  };

  componentDidMount() {
    this._requestCameraPermission();
  }

  _requestCameraPermission = async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({
      hasCameraPermission: status === 'granted',
    });
  };

  _handleBarCodeRead = data => {
    Alert.alert(
      'Scan successful!',
      JSON.stringify(data)
    );
  };

  render() {
    return (
      <View style={styles.container}>
        {this.state.hasCameraPermission === null ?
          <Text>Requesting for camera permission</Text> :
          this.state.hasCameraPermission === false ?
            <Text>Camera permission is not granted</Text> :
            <BarCodeScanner
              onBarCodeRead={this._handleBarCodeRead}
              style={{ height: 200, width: 200 }}
            />
        }
      </View>
    );
  }
}

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

Could this be a bug in the expo module by any chance?

Edit

I created a repo (https://github.com/albertski/barcode) that basically has the default Expo items but as soon as I add import { Constants, BarCodeScanner, Permissions } from 'expo'; to my App.js file and run yarn start-web I get the error.

Upvotes: 0

Views: 3011

Answers (1)

albertski
albertski

Reputation: 2622

I think the problem here is that I am trying to use BarCodeScanner on a web app but that is only available for IOS/Android.

Upvotes: 2

Related Questions