如何在Next.js中运行含第三方依赖的React-Native包？

问题根源 #

报错中的import type属于Flow类型语法，Next.js默认不会转译node_modules目录下的文件，而这类React Native专属包未针对Web端做预编译处理，导致Webpack无法解析该语法。

具体解决方案 #

1. 配置Next.js转译指定依赖 #

Next.js 13.1及以上版本支持内置的transpilePackages选项，直接在next.config.js中添加需要转译的包：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 添加需要转译的React Native相关包
  transpilePackages: [
    'react-native-picker-select',
    '@react-native-picker/picker',
    'react-native-gesture-handler'
  ],
  webpack: (config) => {
    // 保留原有的别名配置
    config.resolve.alias = {
      ...config.resolve.alias,
      'react-native$': 'react-native-web',
      'react-native-svg': 'svgs'
    };
    return config;
  }
};

module.exports = nextConfig;

如果使用的是Next.js 13.1之前的版本，需要借助next-transpile-modules包：

• 先安装依赖：

npm install next-transpile-modules --save-dev

• 再修改next.config.js：

const withTM = require('next-transpile-modules')([
  'react-native-picker-select',
  '@react-native-picker/picker',
  'react-native-gesture-handler'
]);

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'react-native$': 'react-native-web',
      'react-native-svg': 'svgs'
    };
    return config;
  }
};

module.exports = withTM(nextConfig);

2. 适配react-native-gesture-handler的Web环境 #

在Next.js的全局入口文件中导入手势处理器的Web适配代码，并包裹根组件：

• Pages Router（_app.js）：

import 'react-native-gesture-handler/web';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

function MyApp({ Component, pageProps }) {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Component {...pageProps} />
    </GestureHandlerRootView>
  );
}

export default MyApp;

• App Router（app/layout.js）：

import 'react-native-gesture-handler/web';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <GestureHandlerRootView style={{ flex: 1 }}>
          {children}
        </GestureHandlerRootView>
      </body>
    </html>
  );
}

3. 处理react-native-picker-select的Web兼容性 #

转译后若仍存在样式或功能问题，可通过条件渲染替换为Web端专用组件（如react-select）：

import { Platform } from 'react-native';
import RNPickerSelect from 'react-native-picker-select';
import Select from 'react-select';

const CustomPicker = (props) => {
  if (Platform.OS === 'web') {
    return <Select {...props} />;
  }
  return <RNPickerSelect {...props} />;
};

export default CustomPicker;

为什么Storybook能正常运行？ #

Storybook默认会对node_modules中的部分包进行转译，且通常已配置了处理Flow语法的Babel预设（如@babel/preset-flow），因此不会出现解析错误。

内容的提问来源于stack exchange，提问作者Khim Bahadur Gurung