How to use React-Native components in a Nextjs App inside an Nx monorepo

Question

I am trying to use React Native components inside an Nx monorepo.

When I run the Nextjs app, it compiles successfully:

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

When I visit http://localhost:4200, it compiles again and fails

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 module

This error only occurs when I am trying to use React Native components in Nextjs App.

score 4 · Answer 1 · answered Jan 17 '22 at 01:39

Just made it to work.

npm

npm install --save react-native-web
npm install --save-dev babel-plugin-react-native-web

yarn

yarn add react-native-web
yarn add --dev babel-plugin-react-native-web

Add .babelrc to apps/next-app-name/

{
    "presets": [
      [
        "@nrwl/next/babel",
        {
          "runtime": "automatic",
          "useBuiltIns": "usage"
        }
      ]
    ],
    "plugins": [["react-native-web", { "commonjs": true }]]
}

Create the _document.tsx in 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>
  )
 }
}

And bang! It worked

Hey, Szymon. Thank you for answering. It worked when I added the react-native-web plugin in the .babelrc file. Now, simple react-native components are working in my Nextjs App. However, when I am using any react-native dependencies like tailwind-rn or react-native-picker in the react-native components and try to reuse them in the Nextjs App, it breaks. — mohibkay, Jan 18 '22 at 11:06
Same issue, any idea how to make react-native-picker use on the web? — mocode10, Apr 14 '22 at 13:45
`"plugins": [["react-native-web", { "commonjs": true }]]` this is what i've been missing — Aylii, Mar 21 '23 at 22:17

How to use React-Native components in a Nextjs App inside an Nx monorepo

1 Answers1

npm

yarn