Next.js "Can't resolve 'react-native'"

[gunnartorfis]

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.

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;

Am I missing some config to either the root lib or my example dir project?

[gunnartorfis]

Solved by adding a custom babel config to Next.js:

This did not solve it but gave me some further insights.
If I load the page without importing the library, everything works of course. If I then add the import and render the UI component, it works if HMR handles the reload. But as soon as I do a full page reload, it breaks.

{
  "presets": ["next/babel"],
  "plugins": [["react-native-web", { "commonjs": true }]]
}

[gunnartorfis]

Furthermore, it works without issues when dynamically importing the component with ssr: false

[gunnartorfis]

Adding transpilePackages: ["PACKAGE_NAME"], to next.config.js does the job for an external Next.js project.
I'm still having issues using it within the example project.

I've tried to transpile '../src' and '../src/index', without luck.

[gunnartorfis]

Replied in #376