Trying to get repository working

[Bessonov]

Hey @benawad, thank you very much for your great tutorial. react-native and code sharing is really crappy nd I have a problem to get your repository working:

# terminal 1
cd /tmp
git clone https://github.com/benawad/react-native-web-series.git
cd react-native-web-series/
yarn install
cd packages/app/
wml add ../common node_modules/@wow/common
wml start

# terminal 2
cd /tmp/react-native-web-series/packages/app/
yarn start

# terminal 3
cd /tmp/react-native-web-series/packages/app/
yarn run android
$ yarn run android
yarn run v1.14.0
$ react-native run-android
info JS server already running.
info Building and installing the app on the device (cd android && ./gradlew app:installDebug)...
Starting a Gradle Daemon, 1 incompatible Daemon could not be reused, use --status for details

> Configure project :app
WARNING: The specified Android SDK Build Tools version (28.0.2) is ignored, as it is below the minimum supported version (28.0.3) for Android Gradle Plugin 3.2.1.
Android SDK Build Tools 28.0.3 will be used.
To suppress this warning, remove "buildToolsVersion '28.0.2'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools.

FAILURE: Build failed with an exception.

* Where:
Script '/tmp/react-native-web-series/packages/app/node_modules/react-native/react.gradle' line: 95

* What went wrong:
A problem occurred configuring project ':app'.
> Could not get unknown property 'mergeResourcesProvider' for object of type com.android.build.gradle.internal.api.ApplicationVariantImpl.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 9s
error Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html
error Command failed: ./gradlew app:installDebug
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Ok, now:

sed -i'' 's/com.android.tools.build:gradle:3.2.1/com.android.tools.build:gradle:3.3.1/g' android/build.gradle
sed -i'' 's/4.7/4.10.2/g' android/gradle/wrapper/gradle-wrapper.properties

Now I get:

error: bundling failed: Error: Unable to resolve module `dayjs` from `/tmp/react-native-web-series/packages/app/node_modules/@wow/common/dist/modules/CurrentWorkout.js`: Module `dayjs` does not exist in the Haste module map or in these directories:
  /tmp/react-native-web-series/node_modules

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
    at ModuleResolver.resolveDependency (/tmp/react-native-web-series/packages/app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:183:15)
    at ResolutionRequest.resolveDependency (/tmp/react-native-web-series/packages/app/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/tmp/react-native-web-series/packages/app/node_modules/metro/src/node-haste/DependencyGraph.js:283:16)
    at Object.resolve (/tmp/react-native-web-series/packages/app/node_modules/metro/src/lib/transformHelpers.js:261:42)
    at dependencies.map.result (/tmp/react-native-web-series/packages/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31)
    at Array.map (<anonymous>)
    at resolveDependencies (/tmp/react-native-web-series/packages/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18)
    at /tmp/react-native-web-series/packages/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/tmp/react-native-web-series/packages/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)

$ ls -la /tmp/react-native-web-series/packages/app/node_modules/@wow/common/
total 24
drwxr-xr-x 4 dev dev 4096 Mar 10 20:10 .
drwxr-xr-x 3 dev dev 4096 Mar 10 20:10 ..
drwxr-xr-x 6 dev dev 4096 Mar 10 20:10 dist
-rw-r--r-- 1 dev dev  725 Mar 10 20:10 package.json
drwxr-xr-x 6 dev dev 4096 Mar 10 20:10 src
-rw-r--r-- 1 dev dev  517 Mar 10 20:10 tsconfig.json

How it can work in your video? :)

[benawad]

I had some trouble getting it to work too. React Native will be fixing symlinks in the next couple of weeks and should make this easier.

[Bessonov]

Do you mean this one https://github.com/facebook/metro/issues/1?

[benawad]

yes

[benawad]

not yet, we're waiting on this pr https://github.com/facebook/metro/pull/257

[benawad]

I haven't found a good workaround besides wml for non expo apps

[MrNovado]

I had some success following Ben' tutorial: https://github.com/MrNovado/react-native-mono-playground

My version uses the same principle shown in Ben' video but uses newer versions of tools (rn 0.63.2), so it should be easier to simply install & run/play with it for a while (until something critical updates again).

Many thanks to @benawad for the amazing tutorial! But I won't recommend anyone to follow this path -- the monorepo support across the entire web-eco is hilariously bad and with RN it's especially brutal in my experience.

I've tried to document every issue I came across trying to make this project work & it's extensive -- check the readme in my repo if you are interested.