Desarrollo una aplicación nativa de reacción multiplataforma dentro de un monorepo y quiero renderizar mi aplicación usando la web nativa de reacción en el navegador. Para lograrlo, seguí esta guía https://mmazzarolo.com/blog/2021-09-22-running-react-native-everywhere-web/ . También estoy usando el paquete metro-react-native-babel-preset para compilar mi aplicación web, como se describe en la guía de react-native-webhttps://necolas.github.io/react-native-web/docs /multiplataforma/ . Aquí hay una parte de mi archivo craco.config.js (uso create-react-app con 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; }, Ahora parece que el metro-react-native-babel-preset no es compatible con la biblioteca stylis (importada por @emotion/react), porque aparece este error al iniciar la aplicación en el navegador (se compila sin errores):
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... Supongo que el paquete stylis no se puede importar correctamente debido al ajuste preestablecido metro-react-native-babel-preset preset, ya que sin el ajuste preestablecido el error desaparece (pero el paso de compilación genera errores, por lo que eliminar el ajuste preestablecido no es una solución) ).
¿Qué tengo que cambiar en mi babel-/webpack-config o código para eliminar este error?
Ejemplo mínimo y reproducible
Creo que es un problema con la versión de los paquetes.
Cuando lo pruebo, también tengo este error.
Pero cuando se actualizaron los paquetes a una versión más nueva, desapareció (se pensó en otro error, pero relacionado con reactDOM).
He actualizado react-scripts a 5.0.0;
A ver si te ayuda a ti también.
{ "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" }, ...¿Le importaría seguir estas pautas para ejecutar la aplicación React Native en la web?Documento oficial
Y agregue @emotion/react en la lista compileNodeModules