react-native-web monorepo 架构中尝试导入错误

Question

您好，

我正在关注 this article 来设置 react-native + web 代码共享。 Here is the repo link 使用上述文章中描述的准系统 monorepo 设置。

我成功地安装了上面文章中描述的准系统 monorepo 应用程序，然后我将现有的 react-native 应用程序代码移植到此架构（在组件文件夹中）并让移动应用程序正常工作。强>

当我尝试运行 web 应用程序时遇到一些错误（它使用 react-native-web 将 react-native 转换为 web）。并不是我没有预料到会出现一些错误，我知道react-native-web 还不是那么稳定，对于高于 0.55 的 react-native 版本和所有这些问题来说都不是最新的。

但我认为我在这里遇到的错误与我的 webpack 配置更相关。我的config-override.js 文件与original one 基本相同，除了这部分（我更改了它以希望解决我将在下面提到的错误）：

const appIncludes = [
  resolveApp('src'),
  resolveApp('../components/src'),
  resolveApp('../../node_modules/react-navigation-deprecated-tab-navigator'),
  resolveApp('../../node_modules/react-native-color-matrix-image-filters'),
  resolveApp('../../node_modules/react-native-htmlview'),
  resolveApp('../../node_modules/react-native-loading-spinner-overlay'),
  resolveApp('../../node_modules/@react-native-community/async-storage'),
  resolveApp('../../node_modules/react-native-cookies'),
  resolveApp('../../node_modules/react-native-router-flux'),
  resolveApp('../../node_modules/react-native-actionsheet'),
  resolveApp('../../node_modules/react-native-autocomplete-input'),
  resolveApp('../../node_modules/react-native-circular-progress'),
  resolveApp('../../node_modules/react-native-google-places-autocomplete'),
  resolveApp('../../node_modules/react-native-image-progress'),
  resolveApp('../../node_modules/react-native-image-zoom-viewer'),
  resolveApp('../../node_modules/react-native-image-pan-zoom'),
  resolveApp('../../node_modules/react-native-keyboard-aware-scroll-view'),
  resolveApp('../../node_modules/react-native-linear-gradient'),
  resolveApp('../../node_modules/react-native-permissions'),
  resolveApp('../../node_modules/react-native-phone-input'),
  resolveApp('../../node_modules/react-native-picker-select'),
  resolveApp('../../node_modules/react-native-progress'),
  resolveApp('../../node_modules/react-native-push-notification'),
  resolveApp('../../node_modules/react-native-snap-carousel'),
  resolveApp('../../node_modules/react-native-svg'),
  resolveApp('../../node_modules/react-native-tab-view'),
  resolveApp('../../node_modules/react-navigation-drawer'),
  resolveApp('../../node_modules/react-navigation-stack'),
  resolveApp('../../node_modules/react-native-screens'),
  resolveApp('../../node_modules/react-navigation-tabs'),
  resolveApp('../../node_modules/@react-navigation'),
  resolveApp('../../node_modules/react-native-router-flux'),
  resolveApp('../../node_modules/react-native-gesture-handler'),
  resolveApp('../../node_modules/react-navigation'),
]

我在yarn workspace web start 上遇到的几个或错误是：

import {
    Grayscale
} from 'react-native-color-matrix-image-filters';

它给出：

尝试导入错误：“灰度”未从 'react-native-color-matrix-image-filters'。

如果我只是删除此导入及其使用，我会得到：

尝试导入错误：“react-native-cookies”不包含 默认导出（导入为“CookieManager”）。

开启：

import CookieManager from 'react-native-cookies';

在玩的时候，我也得到了：

...../node_modules/react-native-router-flux/src/navigationStore.js
Attempted import error: 'TabBarBottom' is not exported from 'react-navigation-deprecated-tab-navigator' (imported as 'DEPRECATED_TabBarBottom').

我很确定这是我的 webpack/babel 配置有问题（config-override.js 文件）。我当然知道在解决这些问题后我会遇到更多错误。这种设置可能最终对我们根本不起作用。但值得一试，在您的帮助下，我必须能够解决这些错误。

谢谢。

Answer 1

您可能无法在 Web 上使用这些包，因为它们是响应本机包（Android 和 iOS）而不是 Web 包。

这意味着您必须拆分导入和使用这些包的文件。

为 CookieManager 创建包装器的示例：cookieManagerWrapper.js（其他所有内容：Android 和 iOS）和 cookieManagerWrapper.web.js（仅限 Web）。

在特定于网络的 js 文件中，您无需导入 CookieManager，而是导入替代网络库，以实现与移动设备相同的功能，但使用不同的代码在网络上运行。

然后您可以在任何地方导入和使用 cookieManagerWrapper.js，react-native-web 会在可用时自动将其替换为 cookieManagerWrapper.web.js。

当某些 React Native 包仅由独立于平台的 JavaScript 代码组成时，它们也可以在 Web 上运行。还有一些包有 web 实现，可以在 webpack 中使用别名，比如 react-native-gradients 和 react-native-web-gradients，遗憾的是问题中提到的包不是这种情况。

这种文件拆分与 file.js、file.web.js、file.android.js 和 file.ios.js 使得为每个平台编写不同的实现成为可能。这对于一些用户界面代码也很有用，您可以在 web 上使用 3rd 方 react 组件，在移动设备上使用 3rd 方 react 原生组件，它们看起来很相似，可以实现更复杂的用户交互，因为 react native web 支持所有常规的 react 代码和 jsx 标签网络。

Answer 2

我能够通过添加以下内容来克服此错误： config.module.strictExportPresence = false 在config-override.js

现在我陷入了更多问题。

问题中的原始问题由此消失。如果我有任何其他相关更新，我会发布。