如何在 react-native-web 中使用情感？答案

【问题标题】：How can I use emotion with react-native-web?如何在 react-native-web 中使用情感？
【发布时间】：2022-01-06 19:49:47
【问题描述】：

我在 monorepo 中开发了一个跨平台的 react-native 应用程序，并希望在浏览器中使用 react-native-web 呈现我的应用程序。为此，我遵循了本指南https://mmazzarolo.com/blog/2021-09-22-running-react-native-everywhere-web/。我还使用 metro-react-native-babel-preset 包来编译我的网络应用程序，如 react-native-web 指南 https://necolas.github.io/react-native-web/docs/multi-platform/ 中所述。这是我的 craco.config.js 文件的一部分（我将 create-react-app 与 craco 一起使用）：

// craco.config.js
const webpack = require("webpack");
const { getWebpackTools } = require("react-native-monorepo-tools");

const monorepoWebpackTools = getWebpackTools();

module.exports = {
  babel: {
    presets: ["module:metro-react-native-babel-preset", "@babel/preset-react"]
  },
  webpack: {
    configure: (webpackConfig) => {
      // Allow importing from external workspaces.
      monorepoWebpackTools.enableWorkspacesResolution(webpackConfig);
      // Ensure nohoisted libraries are resolved from this workspace.
      monorepoWebpackTools.addNohoistAliases(webpackConfig);
      return webpackConfig;
    },

现在看来metro-react-native-babel-preset 预设与 stylis 库（由 @emotion/react 导入）不兼容，因为在浏览器中启动应用程序时出现此错误（编译时没有错误）：

Uncaught TypeError: (0 , _stylis.middleware) is not a function
    at createCache (emotion-cache.browser.esm.js:288)
    at Object.../node_modules/@emotion/react/dist/emotion-element-699e6908.browser.esm.js (emotion-element-699e6908.browser.esm.js:11)
    at __webpack_require__ (bootstrap:851)
    at fn (bootstrap:150)
    at Object.<anonymous> (emotion-react.browser.esm.js:3)
    at Object.../node_modules/@emotion/react/dist/emotion-react.browser.esm.js (emotion-react.browser.esm.js:347)
    at __webpack_require__ (bootstrap:851)
    at fn (bootstrap:150)
    at Object.../node_modules...

我猜由于metro-react-native-babel-preset 预设，stylis-package 无法正确导入，因为没有预设错误就消失了（但编译步骤会引发错误，因此删除预设不是解决方案）。

我必须在我的 babel-/webpack-config 或代码中进行哪些更改才能消除此错误？

最小的、可重现的例子

https://github.com/Tracer1337/stackoverflow-mre

【问题讨论】：

标签： javascript reactjs react-native webpack babeljs

【解决方案1】：

我认为是包版本的问题。

当我尝试时，我也有这个错误。

但是当更新包到较新版本时它就消失了（发生了其他错误，但与 reactDOM 相关）。

我已将react-scripts 更新为 5.0.0；

看看它是否对你也有帮助。

{
  "name": "@meme-bros/web",
  ...
  "dependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mui/material": "^5.2.3",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "metro-react-native-babel-preset": "^0.66.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-native-web": "^0.17.5",
    "react-scripts": "5.0.0",
    "typescript": "^4.1.2"
  },
  "devDependencies": {
    "@craco/craco": "^6.4.3",
    "react-native-monorepo-tools": "^1.1.4"
  },
 ...

【讨论】：

react-scripts@5 与 craco 不兼容，我收到很多这样的错误：You attempted to import ... which falls outside of the project src/ directory。我想这必须先合并github.com/gsoft-inc/craco/pull/372

【解决方案2】：

您是否介意按照这些指南在 Web 上运行 React Native 应用程序。 Official Doc

并在compileNodeModules列表中添加@emotion/react

【讨论】：