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.
Just made it to work.
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-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