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

Question

你好呀，

我正在关注这篇文章来设置 react-native + web 代码共享。 这是上面文章中描述的带有裸机 monorepo 设置的 repo 链接。

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

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

但是我在这里遇到的错误与我认为的 webpack 配置更相关。 我的config-override.js文件与原始文件基本相同，除了这一部分（我对其进行了更改，希望能解决我将在下面提到的错误）：

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

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

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

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

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

然后你可以在任何地方导入和使用 cookieManagerWrapper.js，并且 react-native-web 会在可用时自动用 cookieManagerWrapper.web.js 替换它。

一些 React Native 包也可以在 Web 上运行，因为它们只包含独立于平台的 JavaScript 代码。 还有一些包具有可以在 webpack 中别名的 web 实现，例如 react-native-gradients 和 react-native-web-gradients，遗憾的是问题中提到的包并非如此。

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

Answer 2

我能够通过在config-override.js添加： config.module.strictExportPresence = false来克服这个错误

现在我被困在进一步的问题上。

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