Error: Cannot find module 'react-native' when used with next.js + react-native-web

[harrisrobin]

Hey 👋

Trying to use this package with a next.js app with react-native-web installed, like here.

When I run the server, I encounter the following error:

ERROR

Error: Cannot find module 'react-native'
Require stack:
- /Users/harrisrobin/code/zaboca/www.cash/node_modules/react-native-appearance/lib/commonjs/index.js
- /Users/harrisrobin/code/zaboca/www.cash/.next/server/static/development/pages/_app.js
- /Users/harrisrobin/code/zaboca/www.cash/node_modules/next/dist/next-server/server/load-components.js
- /Users/harrisrobin/code/zaboca/www.cash/node_modules/next/dist/next-server/server/api-utils.js
- /Users/harrisrobin/code/zaboca/www.cash/node_modules/next/dist/next-server/server/next-server.js
- /Users/harrisrobin/code/zaboca/www.cash/node_modules/next/dist/server/next.js
- /Users/harrisrobin/code/zaboca/www.cash/node_modules/next/dist/server/lib/start-server.js
- /Users/harrisrobin/code/zaboca/www.cash/node_modules/next/dist/cli/next-dev.js
- /Users/harrisrobin/code/zaboca/www.cash/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:957:15)
    at Function.Module._load (internal/modules/cjs/loader.js:840:27)
    at Module.require (internal/modules/cjs/loader.js:1019:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/Users/harrisrobin/code/zaboca/www.cash/node_modules/react-native-appearance/lib/commonjs/index.js:1:728)
    at Module._compile (internal/modules/cjs/loader.js:1133:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Module.require (internal/modules/cjs/loader.js:1019:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.react-native-appearance (/Users/harrisrobin/code/zaboca/www.cash/.next/server/static/development/pages/_app.js:659:18)
    at __webpack_require__ (/Users/harrisrobin/code/zaboca/www.cash/.next/server/static/development/pages/_app.js:23:31)
    at Module../src/pages/_app.js (/Users/harrisrobin/code/zaboca/www.cash/.next/server/static/development/pages/_app.js:113:81)
    at __webpack_require__ (/Users/harrisrobin/code/zaboca/www.cash/.next/server/static/development/pages/_app.js:23:31)
    at Object.0 (/Users/harrisrobin/code/zaboca/www.cash/.next/server/static/development/pages/_app.js:592:18) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/harrisrobin/code/zaboca/www.cash/node_modules/react-native-appearance/lib/commonjs/index.js',
    '/Users/harrisrobin/code/zaboca/www.cash/.next/server/static/development/pages/_app.js',
    '/Users/harrisrobin/code/zaboca/www.cash/node_modules/next/dist/next-server/server/load-components.js',
    '/Users/harrisrobin/code/zaboca/www.cash/node_modules/next/dist/next-server/server/api-utils.js',
    '/Users/harrisrobin/code/zaboca/www.cash/node_modules/next/dist/next-server/server/next-server.js',
    '/Users/harrisrobin/code/zaboca/www.cash/node_modules/next/dist/server/next.js',
    '/Users/harrisrobin/code/zaboca/www.cash/node_modules/next/dist/server/lib/start-server.js',
    '/Users/harrisrobin/code/zaboca/www.cash/node_modules/next/dist/cli/next-dev.js',
    '/Users/harrisrobin/code/zaboca/www.cash/node_modules/next/dist/bin/next'
  ]
}
[ event ] build page: /next/dist/pages/_error

Was hoping I could use this on the web in next.js. Am I missing anything?

Thank you in advance 😄

Steps to reproduce:

1 -

yarn create next-app --example with-react-native-web with-react-native-web-app

2 -
yarn add react-native-appearance

3 -
Add AppearanceProvider in _app.jsx (create this file)

_app.jsx

import * as React from "react"
import { AppearanceProvider, useColorScheme } from "react-native-appearance"
import { globalStyles } from "../styles/styles"
import { theme } from "../styles/theme"

function App({ Component, pageProps }) {
  const colorScheme = useColorScheme()

  const _theme = {
    isDarkMode: colorScheme === "dark",
    colorScheme,
    ...theme,
  }

  return (
        <AppearanceProvider>
            {globalStyles}
            <Component {...pageProps} />
        </AppearanceProvider>
  )
}

export default App