CODEWITHSUNDEEP
javascriptnode.jsamazon-web-servicesreact-native
rdrgtec
rdrgtec

Reputation: 640

Expo Error when Running AWS App on web browser only (AmplifyI18n)

My aws-react-native app runs perfectly on Android (using expo), but when I try to use the "w" option in expo and then run it in the browser, I get the following error page. It looks to me some lib is missing or something like that, does anyone knows what I could try to make it available on the web?

Tested on Android and it has worked fine - the problem seems to happen just in the browser and it seems to be aws-amplify related.

My App.js imports:

import * as Localization from 'expo-localization';   
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';


// Necessary for "Auth" service
import Auth from '@aws-amplify/auth';
import Analytics from '@aws-amplify/analytics';
import { Authenticator } from 'aws-amplify-react-native';
import awsconf from './source/aws-exports';
Auth.configure(awsconf);
Analytics.configure(awsconf);

//Necessary for Translation
console.log(Localization.locale);
import { I18n } from 'aws-amplify';
import dict from  './source/translations';
I18n.setLanguage(Localization.locale);
I18n.putVocabularies(dict);

...

Error Page:

×
ReferenceError: dict is not defined
Module.../../../../../../../../../../../environment/node_modules/aws- 
amplify-react-native/dist/AmplifyI18n.js
node_modules/aws-amplify-react-native/dist/AmplifyI18n.js:14
  11 |  * and limitations under the License.
  12 |  */
  13 | 
> 14 | export default dict = {
  15 |     'fr': {
  16 |         'Loading...': "S'il vous plaît, attendez",
  17 |         'Sign In': "Se connecter",
View compiled
__webpack_require__
/home/ubuntu/environment/webpack/bootstrap:724
  721 | };
  722 | 
  723 | // Execute the module function
> 724 | modules[moduleId].call(module.exports, module, module.exports, 
 hotCreateRequire(moduleId));
      | ^  725 | 
  726 | // Flag the module as loaded
  727 | module.l = true;
View compiled
fn
/home/ubuntu/environment/webpack/bootstrap:101
   98 |         );
   99 |         hotCurrentParents = [];
  100 |     }
> 101 |     return __webpack_require__(request);
      | ^  102 | };

Upvotes: 0

Views: 226

Answers (2)

Yann AMSELLEM
Yann AMSELLEM

Reputation: 56

Try to remove the dict = from your export default dict =, so that it looks like:

export default {
  'fr': {
    ...

Upvotes: 1

hong developer
hong developer

Reputation: 13906

There are things you need to install and set up.

  1. Ensure you’re using the latest version of babel-preset-expo
  2. Install react-native-web, and react-dom.
  3. Add the property “web” to the expo.platforms array in your app.json 
    "expo": {
        "platforms": ["web"]
      }
  1. Then run expo start with the latest version of the expo-cli after the bundler has started, you can press the w key to open your app in the browser.

NOTE: Because most libraries in the React-native community do not support the Web, it may not work as well as RNW can expect.

Upvotes: 1

Related Questions