React Native Cannot assign to read only property 'exports' of object

Question

I was studying React Native in coursera. I followed every step of teacher but somehow written code works in his machine. But Exactly the same code I realize in my computer there is shows following errors. I'm running this code in chrome browser. I installed the Expo successfully.

bundle.js:78667 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.<anonymous> (bundle.js:78667)
    at Module.E:\WORKING PROJECT\coursera\courserReactNat\node_modules\react-native-elements\src\helpers\normalizeText.js (bundle.js:78668)
    at __webpack_require__ (bundle.js:727)
    at fn (bundle.js:101)
    at Module.E:\WORKING PROJECT\coursera\courserReactNat\node_modules\react-native-elements\src\helpers\index.js (bundle.js:78556)
    at __webpack_require__ (bundle.js:727)
    at fn (bundle.js:101)
    at Module.<anonymous> (bundle.js:76709)
    at Module.E:\WORKING PROJECT\coursera\courserReactNat\node_modules\react-native-elements\src\buttons\Button.js (bundle.js:76965)
    at __webpack_require__ (bundle.js:727)
    at fn (bundle.js:101)
    at Module.E:\WORKING PROJECT\coursera\courserReactNat\node_modules\react-native-elements\src\index.js (bundle.js:79112)
    at __webpack_require__ (bundle.js:727)
    at fn (bundle.js:101)
    at Module.E:\WORKING PROJECT\coursera\courserReactNat\components\MenuComponent.js (bundle.js:12291)
    at __webpack_require__ (bundle.js:727)
    at fn (bundle.js:101)
    at Module.E:\WORKING PROJECT\coursera\courserReactNat\components\mainComponent.js (bundle.js:12356)
    at __webpack_require__ (bundle.js:727)
    at fn (bundle.js:101)
    at Module.E:\WORKING PROJECT\coursera\courserReactNat\App.js (bundle.js:12263)
    at __webpack_require__ (bundle.js:727)
    at fn (bundle.js:101)
    at Module.E:\WORKING PROJECT\coursera\courserReactNat\node_modules\expo\AppEntry.js (bundle.js:20679)
    at __webpack_require__ (bundle.js:727)
    at fn (bundle.js:101)
    at Object.0 (bundle.js:12246)
    at __webpack_require__ (bundle.js:727)
    at bundle.js:794
    at bundle.js:797

My code has three classes MainComponent

import React,{Component} from 'react'
import {DISHES} from '../shared/dishes'
import Menu from './MenuComponent';


class MainComponent extends Component{


    constructor(props) {
        super(props);
        this.state = {
            dishes:DISHES
        }
    }

    render() {
        return (
            <Menu dishes={this.state.dishes}/>
        );
    }
}
export default MainComponent;

Menu

import React from 'react'
import {View,FlatList} from 'react-native'
import  {ListItem} from 'react-native-elements'



function Menu(props) {

    const renderMenuItem = ({item,index}) =>{
        return(
            <ListItem
                key={index}
                title={item.name}
                subtitle={item.description}
                hideChevron={true}
                leftAvatar={{source:require('../shared/images/uthappizza.png')}}
            />
        );
    }

    return(
        <FlatList
           data={props.dishes}
           renderItem={renderMenuItem}
           keyExtractor={item => item.id.toString()}
          />
    )
}

export default Menu;

App Class

import React from 'react';
import Main from "./components/mainComponent";

export default function App() {
  return (
    <Main />
  );
}

What might be wrong guys here I'm stuck with it. No any idea how to solve this problem. Thanks in advance

score 0 · Answer 1 · answered Apr 04 '20 at 13:13

Heyy! Im also doing the same course and was stuck with the same error. The problem is that you cannot run a react native app on web browser as given here. As far as i know, one way of running react native app is to install Expo App on your Android/IOS device and scan the QR code using the Expo App. The second problem which i was facing was "Uncaught Error: Packager is not running at http://192.168.0.100.19001" in the Expo App which was then resolved by connecting both the PC/Laptop and Andoid/IOS device with the same LAN Connection.

React Native Cannot assign to read only property 'exports' of object

1 Answers1