Can't resolve 'react-native' in web

[liebharc]

Description of the bug

I hope I haven't just overlooked something obvious, but the web app throws an error directly at startup:

../../packages/ui/build/commonjs/Paragraph.js:8:0
Module not found: Can't resolve 'react-native'
   6 | exports.Paragraph = void 0;
   7 | var _react = _interopRequireDefault(require("react"));
>  8 | var _reactNative = require("react-native");
   9 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

I see that there is a resolve alias in the next.config.js, but it doesn't seem to kick in?:

'react-native$': 'react-native-web',

To Reproduce

What steps did you perform which led to this issue?

1. Git clone https://github.com/byCedric/expo-monorepo-example/
2. pnpm install; pnpm -r install
3. cd apps/web
4. pnpm run dev

Expected behavior

Showing the page with "Hello from ..." as the mobile app does.

Actual behavior

Throws a "Module not found" error. Full next.js log:

$ pnpm run dev

> @acme/app-web@0.1.0 dev /home/liebharc/expo-monorepo-example/apps/web
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Disabled SWC as replacement for Babel because of custom Babel configuration "babel.config.js" https://nextjs.org/docs/messages/swc-disabled
event - compiled client and server successfully in 396 ms (172 modules)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 97 ms (173 modules)
wait  - compiling / (client and server)...
error - ../../packages/ui/build/commonjs/Paragraph.js:8:0
Module not found: Can't resolve 'react-native'
   6 | exports.Paragraph = void 0;
   7 | var _react = _interopRequireDefault(require("react"));
>  8 | var _reactNative = require("react-native");
   9 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  10 | function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  11 | const Paragraph = _ref => {

Import trace for requested module:
../../packages/ui/build/commonjs/index.js
../../packages/feature-home/build/commonjs/HomeIcon.js
../../packages/feature-home/build/commonjs/index.js
./pages/index.tsx

https://nextjs.org/docs/messages/module-not-found
wait  - compiling /_error (client and server)...
error - ../../packages/ui/build/commonjs/Paragraph.js:8:0
Module not found: Can't resolve 'react-native'
   6 | exports.Paragraph = void 0;
   7 | var _react = _interopRequireDefault(require("react"));
>  8 | var _reactNative = require("react-native");
   9 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  10 | function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  11 | const Paragraph = _ref => {

Import trace for requested module:
../../packages/ui/build/commonjs/index.js
../../packages/feature-home/build/commonjs/HomeIcon.js
../../packages/feature-home/build/commonjs/index.js
./pages/index.tsx

https://nextjs.org/docs/messages/module-not-found

Additional context

Environment: Tried it on Windows directly and inside the Linux Subsystem (WSL).

On the Debian WSL these are the versions installed:

> node --version
v16.19.0
> pnpm --version
7.9.0

[byCedric]

Hi @liebharc! Thanks for the issue report. However, I'm having trouble reproducing your error. When I run these command on a clean repo, I get:

• $ pnpm install
• $ cd apps/web
• $ pnpm dev

Which makes sense. This repository does not have any opinion on how packages are being built. Just to keep the example as "vanilla" as possible, see my comment for more info.

When running these commands, I don't have any issues whatsoever: (just on Windows 11, without WSL)

• $ pnpm install
• $ pnpm build
• $ cd apps/web
• $ pnpm dev

[byCedric]

It might be interesting to debug the Next config and check if the react-native-web integration is working as expected. Unfortunately, I can't do that on my end since I can't repro it.

The integration itself comes from Vercel's React Native Web starter: https://github.com/vercel/turbo/blob/main/examples/with-react-native-web/apps/web/next.config.js

[liebharc]

Success :). I've updated pnpm to 7.23.0 and repeated your steps (including the build step) and this way the Next.js app starts without issues. Thanks for your help!

[byCedric]

No problem, glad you solved it! Also, small heads up, I just made a change that supports the "decoupled build system", while keeping live reload alive :) (see PR #78)

[liebharc]

Nice 😊