Estoy tratando de usar componentes React Native dentro de un monorepo Nx.
Cuando ejecuto la aplicación Nextjs, se compila correctamente:
info - automatically enabled Fast Refresh for 1 custom loader event - compiled client and server successfully in 375 ms (173 modules) [ ready ] on http://localhost:4200 Cuando visito http://localhost:4200 , se compila nuevamente y falla
wait - compiling / (client and server)... error - ../../node_modules/react-native/index.js Module parse failed: Unexpected token (14:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | // Components > import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo'; | import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator'; | import typeof Button from './Libraries/Components/Button'; (node:17163) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API (Use `node --trace-deprecation ...` to show where the warning was created) info - automatically enabled Fast Refresh for 1 custom loader wait - compiling /_error (client and server)... error - ../../node_modules/react-native/index.js Module parse failed: Unexpected token (14:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | // Components > import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo'; | import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator'; | import typeof Button from './Libraries/Components/Button'; error - SyntaxError: Cannot use import statement outside a moduleEste error solo ocurre cuando intento usar componentes React Native en la aplicación Nextjs.
Acabo de llegar a trabajar.
npm install --save react-native-web npm install --save-dev babel-plugin-react-native-web yarn add react-native-web yarn add --dev babel-plugin-react-native-webAgregue .babelrc a apps/next-app-name/
{ "presets": [ [ "@nrwl/next/babel", { "runtime": "automatic", "useBuiltIns": "usage" } ] ], "plugins": [["react-native-web", { "commonjs": true }]] }Cree el _document.tsx en apps/next-app-name/pages/
import Document, { Html, Head, Main, NextScript } from 'next/document' import { AppRegistry } from 'react-native' export default class MyDocument extends Document { static async getInitialProps({renderPage} ) { AppRegistry.registerComponent('main', () => Main) const page = await renderPage() return{ ...page} } render() { return ( <Html style={{ height: '100%' }}> <Head /> <body style={{ height: '100%', overflow: 'hidden' }}> <Main /> <NextScript /> </body> </Html> ) } }Y ¡bang! Funcionó