我在monoreto中开发了一个跨平台的react原生应用程序，并希望在浏览器中使用react原生web来呈现我的应用程序。为了实现这一点，我遵循了本指南https://mmazzarolo.com/blog/2021-09-22-running-react-native-everywhere-web/.我还使用metro-react-native-babel-preset包编译我的web应用程序，如react原生web指南中所述https://necolas.github.io/react-native-web/docs/multi-platform/.以下是我的craco.config.js文件的一部分(我使用craco创建react应用程序(：
// 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库不兼容(由@memotion/rect导入(，因为我在浏览器中启动应用程序时遇到了这个错误(它编译时没有错误(：
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包无法正确导入，因为如果没有预设，错误就会消失(但编译步骤会引发错误，因此删除预设不是解决方案(。
我必须在babel-/webpack配置或代码中更改什么才能删除此错误？
可重复的最小示例
https://github.com/Tracer1337/stackoverflow-mre
我认为这是软件包版本的问题。
当我尝试它时，我也会出现这个错误。
但当将软件包更新到新版本时，它就不见了(其他错误也发生了，但与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"
},
...
您是否介意遵循这些准则在web上运行React Native应用程序。官方文件
并在compileNodeModules列表中添加@情感/反应