App.js error when importing redux


#1

When I try to import redux in my App.js it throws an error:

You are currently using minified code outside of NODE_ENV === "production". This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or setting mode to production in webpack (https://webpack.js.org/concepts/mode/) to ensure you have the correct code for your production build.

Is there anything I can do with it?

Tried this, but no success:
watchman watch-del-all && rm -rf node_modules && rm -rf $TMPDIR/react-* && npm i


#2

Hey @aogurzow,

Can you share the relevant code (imports, etc) from your App.js file as well as your package.json and app.json?

Cheers,

Adam


#3

Sure, it’s quite straightforward:

App.js

import React from 'react';
import { Platform, StatusBar, StyleSheet, View, Text, AsyncStorage } from 'react-native';
import { AppLoading, Asset, Font, Icon } from 'expo';
import { StyleProvider, Root } from 'native-base';
import getTheme from './native-base-theme/components'
import AppNavigator from './navigation/AppNavigator';
import styles from './constants/Styles'

import { Provider, connect } from 'react-redux';
import store from './store';
import * as Actions from './container/actions';



export default class App extends React.Component {
    state = {
        isLoadingComplete: false,
    };

    render() {
        if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
            return (
                <AppLoading
                    startAsync={this._loadResourcesAsync}
                    onError={this._handleLoadingError}
                    onFinish={this._handleFinishLoading}
                />
            );
        } else {
            return (
                <StyleProvider style={getTheme()}>
                    <Root>
                        <View style={styles.baseContainer}>
                            {/* <StatusBar backgroundColor="#000" /> */}
                            {/* {Platform.OS === 'ios' && <StatusBar barStyle="default" />} */}
                            <Provider store={store}>
                                <AppNavigator />
                            </Provider>
                        </View>
                    </Root>
                </StyleProvider>
            );
        }
    }

    _loadResourcesAsync = async () => {
        return Promise.all([
            Font.loadAsync({
                // This is the font that we are using for our tab bar
                ...Icon.Ionicons.font,
                // We include SpaceMono because we use it in HomeScreen.js. Feel free
                // to remove this if you are not using it in your app
                'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
                Roboto: require("native-base/Fonts/Roboto.ttf"),
                Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf")
            }),
        ]);
    };

    _handleLoadingError = error => {
        // In this case, you might want to report the error to your error
        // reporting service, for example Sentry
        console.warn(error);
    };

    _handleFinishLoading = () => {
        this.setState({ isLoadingComplete: true });
    };
}

package.json

{
  "name": "My-app-name",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject",
    "test": "node ./node_modules/jest/bin/jest.js --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/samples": "2.1.1",
    "@expo/vector-icons": "github:expo/vector-icons",
    "@expo/videoplayer": "^0.4.0",
    "adm-zip": "^0.4.13",
    "axios": "^0.18.0",
    "expo": "^31.0.6",
    "native-base": "^2.10.0",
    "plist": "^3.0.1",
    "react": "^16.6.3",
    "react-native": "^0.57.7",
    "react-native-keyboard-aware-scroll-view": "^0.8.0",
    "react-native-lightbox": "^0.8.0",
    "react-native-render-html": "^3.10.0",
    "react-native-status-bar-height": "^2.2.0",
    "react-native-video": "^4.3.1",
    "react-navigation": "^2.18.2",
    "react-redux": "^6.0.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "xcode": "^1.1.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0",
    "jest-expo": "^31.0.0"
  }
}

app.json

{
  "expo": {
    "name": "My-app-name",
    "version": "1.0.0",
    "slug": "My-app-name",
    "sdkVersion": "31.0.0",
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourappname"
    },
    "android": {
      "package": "com.yourcompany.yourappname"
    }
  }
}