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

Question

你好，

我正在按照 this article to setup a react-native + web code sharing. Here is the repo link 使用上述文章中所述的基本 monorepo 设置。

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

当我尝试运行网络应用程序（使用 react-native-web 将 react-native 转换为网络）时，我遇到了一些错误。这并不是说我没有预料到会出现一些错误，我知道 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';

它给出：

Attempted import error: 'Grayscale' is not exported from 'react-native-color-matrix-image-filters'.

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

Attempted import error: 'react-native-cookies' does not contain a default export (imported as '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

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

现在我陷入了进一步的问题。

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

Answer 2

您可能无法在 Web 上使用这些包，因为它们是 React 本机包（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 本机包在仅由平台无关的 JavaScript 代码组成时也可以在 Web 上运行。此外，一些软件包具有可以在 webpack 中使用别名的 Web 实现，例如 react-native-gradients 和 react-native-web-gradients，遗憾的是，问题中提到的软件包并非如此。

此文件拆分为 file.js、file.web.js、file.android.js 和 file.ios.js 可以为每个平台编写不同的实现。这对于某些用户界面代码也非常有用，您可以在 Web 上使用第 3 方 React 组件，在移动设备上使用第 3 方 React Native 组件，看起来类似于实现更复杂的用户交互，因为 React Native Web 支持所有常规 React 代码和 jsx 标签网络。

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

Attempted import errors in react-native-web monorepo architecture

javascript

react-native

webpack

babeljs

react-native-web