如何在 Nx monorepo 内的 Nextjs 应用程序中使用 React-Native 组件答案

【问题标题】：How to use React-Native components in a Nextjs App inside an Nx monorepo如何在 Nx monorepo 内的 Nextjs 应用程序中使用 React-Native 组件
【发布时间】：2022-01-05 08:23:11
【问题描述】：

我正在尝试在 Nx monorepo 中使用 React Native 组件。

当我运行 Nextjs 应用程序时，它编译成功：

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

当我访问http://localhost:4200时，它再次编译并失败

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

仅当我尝试在 Nextjs App 中使用 React Native 组件时才会出现此错误。

【问题讨论】：

标签： javascript reactjs react-native monorepo nomachine-nx

【解决方案1】：

刚刚开始工作。

npm

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

将.babelrc 添加到apps/next-app-name/

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

在apps/next-app-name/pages/中创建_document.tsx

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>
  )
 }
}

然后砰！成功了

【讨论】：

嗨，席蒙。谢谢你的回答。当我在 .babelrc 文件中添加 react-native-web 插件时，它起作用了。现在，简单的 react-native 组件在我的 Nextjs 应用程序中运行。但是，当我在 react-native 组件中使用任何 react-native 依赖项（如 tailwind-rn 或 react-native-picker）并尝试在 Nextjs 应用程序中重用它们时，它会中断。