仅在 Web 浏览器上运行 AWS 应用程序时出现 Expo 错误 (AmplifyI18n)

Question

我的 aws-react-native 应用程序在 Android 上完美运行（使用 expo），但是当我尝试在 expo 中使用“w”选项然后在浏览器中运行它时，我收到以下错误页面。在我看来，缺少一些库或类似的东西，有谁知道我可以尝试使其在网络上可用吗？

在 Android 上测试并且运行良好 - 问题似乎只发生在浏览器中，并且似乎与 aws-amplify 相关。

我的 App.js 导入：

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);

...

错误页面：

×
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 | };

Answer 1

您需要安装和设置一些东西。

1. 确保您使用的是最新版本的babel-preset-expo
2. 安装react-native-web和react-dom。
3. 将属性 “web” 添加到您的 expo.platforms 数组中 app.json

    "expo": {
        "platforms": ["web"]
      }

4. 然后使用最新版本的expo-cli 运行expo start 打包器启动后，可以按w键打开 浏览器中的应用。

注意：由于React-native 社区中的大多数库不支持 Web，它可能无法像 RNW 预期的那样工作。

Answer 2

尝试从您的export default dict = 中删除dict =，使其看起来像：

export default {
  'fr': {
    ...