Example SSR alias with Next.js - "Can't resolve 'react-native'"

[Gunnar Torfi Steinarsson]

Description

I've recently kickstarted a project in hopes to create a shared UI library for Next.js and React Native.

Everything worked fine when using Expo web that ships with react-native-builder-bob. However, when changing that to a Next.js project, I'm getting the error Can't resolve 'react-native' when importing my components from the lib, with the path being ../src/components/Box/index.tsx

It is worth noting that when importing anything from 'react-native' directly within ./example, it works fine - it is just when importing from the library, and only occurs when SSR handles the rendering. HMR updates work fine.

babel.config.js, metro.config.js and webpack.config.js are unchanged.

next.config.js

const { withExpo } = require('@expo/next-adapter');

/** @type {import('next').NextConfig} */
const nextConfig = withExpo({
  reactStrictMode: true,
  swcMinify: true,
  transpilePackages: [
    'react-native',
    'expo',
    '@noonahq/noona-marketplace-ui',
    './src/index',
    // Add more React Native / Expo packages here...
  ],
  experimental: {
    forceSwcTransforms: true,
  },
  webpack: (config) => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // Transform all direct `react-native` imports to `react-native-web`
      'react-native$': 'react-native-web',
    };

    config.resolve.extensions = [
      '.web.js',
      '.web.jsx',
      '.web.ts',
      '.web.tsx',
      ...config.resolve.extensions,
    ];

    return config;
  },
});

module.exports = nextConfig;

I posted a discussion here that has some more info but this is the gist of it.

Packages

• create-react-native-library
• react-native-builder-bob

Selected options

I don't remember exactly what I chose but it was not a Fabric/View, just a library.

Link to repro

No response

Environment

info Fetching system and libraries information...
System:
OS: macOS 13.0
CPU: (10) arm64 Apple M1 Pro
Memory: 1.69 GB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.12.0 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9123335
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 11.0.18 - /opt/homebrew/opt/openjdk@11/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.3 => 0.71.3
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

[Gunnar Torfi Steinarsson]

I found a workaround!
yarn example web does not work
yarn example start (then 'w') works