Hello, first of all thank you very much for this guide. It was really good. But I'm stuck at one place. After completing the mobile and web installations, I get an error when I start it with "yarn web:start". I've created a repository and added the error screenshot to readme.md so you can test the faulty code.

https://github.com/OkancanCosar/react-personal-monorepo

Thank you for your help :)

This PR adds support for tvOS and Android TV.

Here are the dev notes, https://unequaled-ray-da9.notion.site/Add-TV-Support-8e62afc3d02b408489ed0b4f7d6a97a6

I'm going to turn it into a blog post tomorrow if that's fine with you.

Also, thanks for answering my issue so quick. Your advice was super helpful and I'm going to try to add Next next.

Hey everyone! I'm porting my current monorepo to this awesome setup and I'm facing some new issues that I didn't have before. I have some 3rd party libraries installed in my repo and I'm getting some errors on those libraries' code that I didn't have before.

The thing is that even though I have my node_modules folder excluded from transpiling within my tsconfig.json file (the same way you did), I'm still getting typescript errors from those libraries.

You can replicate this issue just by cloning your repo and installing react-native-linear-gradient or react-native-dialog in the app package, add some usage in the App.tsx file and then start the web package. You will see something like:

I don't know if I have to configure babel in a certain way in order to make this error disappear, but my previous monorepo was also using a CRA scaffold for the web package and I was not getting any of this errors.

Thank you very much,

Eric.

I noticed the project is unlicensed. Do you plan to release it under an open source license? A good reference for choosing a license that meets your needs can be found at choosealicense.com. For a template project like this MIT or a similar permissive license might make a good option.

I'm not entirely sure whether this has something to do with the Electron configuration in the universal-monorepo tutorial, or whether extra steps need to be taken because of files being outside of the src folder in the Electron app, but hoping to get some pointers here if possible.

I am building the Electron app with electron-builder. The app builds fine itself but will only display a blank screen. This is a widely documented issue with the build path being incorrect in the Electron configuration, but it seems fine to me and in line with what people suggest works.

Here is the package.json in my Electron package:

{
	"name": "@my-app/electron",
	"description": "my-app description",
	"version": "0.1.0",
	"author": "my-app",
	"private": true,
	"homepage": "./",
	"main": "./public/electron.js",
	"dependencies": {
		"firebase": "^9.2.0",
		"react": "^17.0.2",
		"react-dom": "^17.0.2",
		"react-native-web": "^0.17.5",
		"react-scripts": "4.0.3",
		"uuid": "^8.3.2",
		"web-vitals": "^1.0.1"
	},
	"scripts": {
		"cra:start": "craco start",
		"cra:build": "craco build",
		"start": "concurrently -k \"cross-env BROWSER=none yarn cra:start\" \"wait-on http://localhost:3000 && electronmon .\"",
		"build": "craco build",
		"test": "react-scripts test",
		"eject": "react-scripts eject",
		"dist": "electron-builder"
	},
	"eslintConfig": {
		"extends": [
			"react-app"
		]
	},
	"browserslist": {
		"production": [
			">0.2%",
			"not dead",
			"not op_mini all"
		],
		"development": [
			"last 1 chrome version",
			"last 1 firefox version",
			"last 1 safari version"
		]
	},
	"devDependencies": {
		"@craco/craco": "^6.3.0",
		"@types/jest": "^26.0.15",
		"@types/node": "^12.0.0",
		"@types/react": "^17.0.0",
		"@types/react-dom": "^17.0.0",
		"@types/uuid": "^8.3.1",
		"concurrently": "^6.3.0",
		"cross-env": "^7.0.3",
		"electron": "^15.2.0",
		"electron-builder": "^22.14.5",
		"electronmon": "^2.0.2",
		"react-native-monorepo-tools": "^1.1.1",
		"wait-on": "^6.0.0"
	},
	"build": {
		"extends": null,
		"appId": "com.my-app.my-app",
		"productName": "my-app",
		"directories": {
			"output": "dist"
		},
		"mac": {
			"target": "pkg",
			"darkModeSupport": "true",
			"extendInfo": "my-app"
		},
		"pkg": {
			"installLocation": "/Applications",
			"overwriteAction": "upgrade"
		},
		"extraFiles": [
			"../app/src/"
		]
	}
}

my electron.js:

// Module to control the application lifecycle and the native browser window
const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');

// Create the native browser window.
function createWindow() {
	const mainWindow = new BrowserWindow({
		width: 800,
		height: 600,
		webPreferences: {
			preload: path.join(app.getAppPath(), 'preload.js'),
		},
	});

	// In production, set the initial browser path to the local bundle generated
	// by the Create React App build process.
	// In development, set it to localhost to allow live/hot-reloading.
	const appURL = app.isPackaged
		? url.format({
			// @ts-ignore
			pathname: path.join(__dirname, 'index.html'),
			protocol: 'file:',
			slashes: true,
		})
		: 'http://localhost:3000';
	console.log('appURL -------------------->', appURL); // does not log
	mainWindow.loadURL(appURL);

	// newbedev.com/how-to-set-electron-useragent
	// mainWindow.webContents.userAgent = 'Chrome';
	// Automatically open Chrome's DevTools in development mode.
	if (!app.isPackaged) {
		mainWindow.webContents.openDevTools();
	}
}

// This method will be called when Electron has finished its initialization and
// is ready to create the browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
	createWindow();

	app.on('activate', () => {
		// On macOS it's common to re-create a window in the app when the
		// dock icon is clicked and there are no other windows open.
		if (BrowserWindow.getAllWindows().length === 0) {
			createWindow();
		}
	});
});

// Quit when all windows are closed, except on macOS.
// There, it's common for applications and their menu bar to stay active until
// the user quits  explicitly with Cmd + Q.
app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') {
		app.quit();
	}
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

app.setAsDefaultProtocolClient('my-app');

In the above file, I do not see any of the console.logs in the electron console. I'm using TypeScript in the rest of the app. Any ideas much appreciated.

One big problem yarn 2 and above versions is noHoist

nodeLinker: node-modules
nmHoistingLimits: workspaces

with this kind of configuration. each workspace/package will have it's own dependencies.

Pros: No more dependency hassles Cons: Duplicated dependencies with more disk space.

I can raise a pr if you want to consider upgrading yarn

Hi, this is my first pull request to an open source project ever. Hope everything is fine.

#35 I fixed the build script name in the electron package. Also removed the devDependency version prefix of electron, so that the electron-builder uses valid urls to download external dependencies. Thanks to @WayneKim92's comment.

Thank you for this excellent boilerplate. I wondered if there is a one-liner or a bash script that helps renaming the project from ReactNativeUniversalProject to something else. I actually only require iOS and Android builds if this matters. I am honestly not sure if this is something I can do from the Terminal/VSCode or if I have to run XCode when it comes to the iOS-Build. Any suggestion would be appreciated.

Greets -act

For Apple Silicon to work at all you need to address a linker problem with react-native and Swift libraries Fix as described in: https://github.com/facebookarchive/react-native-fbsdk/issues/755

Hi, First of all kudos to the maintainer you've done an awesome job. We're trying to integrate Native-Base in this project but we want this to reside under "my-app/app" space so we could share components based on native-base between web and mobile. After installing native-base under mentioned space "my-app/app" it says that cannot find module react-native /packages/app/src/components/Button.js

// import React from "react"
import { Button, Center, NativeBaseProvider } from "native-base"
function Button(){
  return (
    <>
      <Button onPress={() => console.log("hello world")}>Primary</Button>
    </>
  )
}
export default Button;

First of all, sorry for the issue title but that was the most accurate thing I was able to write.

I'm porting my current monorepo to this awesome setup and I'm facing some new issues that I didn't have before. For some features, I have two different files (in the same folder) one called index.ts and index.web.ts and based on what react-native-web defines on their docs, it should read the *.web.ts on the web and the other file on the rest of the platforms.

This react-native-web feature was working fine before, but now I'm getting some typescript errors from the non web file on the web platform.

I'm not sure if there is something specific that needs to be done in order to enable this feature in this monorepo setup.

Thank you very much,

Eric.

Compiled with problems:X

ERROR in ../app/src/index.js 5:0-85

Module not found: Error: Can't resolve 'react-native' in 'C:\wamp64\www\goolaMonoRepo\packages\app\src'

ERROR in ./src/index.js 4:0-26

Module not found: Error: You attempted to import C:\wamp64\www\goolaMonoRepo\packages\web\node_modules\react which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.0

Hi,

Thanks for the great repo that is of great help here,

I have a recurring error with this type of mono repo (react native + react native web) that I don't quite know how to handle:

The package was properly added to no hoist,

What else should I do?

Thanks again,

Théo

Hi all, After cloning the repo and installing with yarn I tried to simply launch the Android app using yarn android:start. However, the app launches with an error (see below).

My assumption is that this has to do with the nature of peer dependencies in the app package. If I remove the react import from .../packages/app/src/App.tsx the same error occurs with react-native.

Somehow, the bundler does not use the react/react-native packages provided in the node_modules of the mobile package. Did I forget to do something or is this a bug?

I am using yarn 1.22.18

error: Error: Unable to resolve module react from C:\Users\Username\Git\react-native-universal-monorepo\packages\app\src\App.tsx: react could not be found within the project or in these directories:
  ..\app\node_modules
  ..\..\node_modules

If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*

1 | import React from "react";
  |                    ^
2 | import {
3 |   Image,
4 |   ImageSourcePropType,
    at ModuleResolver.resolveDependency (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:129:15)
    at DependencyGraph.resolveDependency (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\node-haste\DependencyGraph.js:288:43)
    at Object.resolve (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\lib\transformHelpers.js:129:24)
    at resolve (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:396:33)
    at C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:412:26
    at Array.reduce (<anonymous>)
    at resolveDependencies (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:411:33)
    at processModule (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:140:31)
    at async addDependency (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:230:18)
    at async Promise.all (index 0)

rnvi works without being in a monorepo, but when it is in one it throws this:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|       return (
>         <Text selectable={false} {...props}>
|           {glyph}
|           {children}

How did I test it? I tried importing a screen from the /packages/app with an icon in it and the error was shown. When I put the screen directly into the /packages/next/pages/index.tsx file it works perfectly

Here is my next.config.js file

/** @type {import('next').NextConfig} */
const path = require("path");

const withPlugins = require('next-compose-plugins')
// Necessary to handle statically imported images
const withImages = require('next-images');
// Necessary to handle statically imported fonts
const withFonts = require('next-fonts');

const withTM = require('next-transpile-modules')([
	// 'react-native-paper',
	'react-native-vector-icons',
  'react-native-svg'
],{resolveSymlinks:true});




module.exports = withPlugins(
  [
    withTM, withFonts, withImages,
  ],
  {
      devIndicators: {
        autoPrerender: false
      },
      enableSvg: true,
      // Allows us to access other directories in the monorepo
      experimental: {
        externalDir: true,
        // concurrentFeatures: true,
      },
      // This feature conflicts with next-images
      images: {
        disableStaticImages: true,
      },
      webpack: (config, options) => {
        config.resolve.alias = {
          ...(config.resolve.alias || {}),
          // Transform all direct `react-native` imports to `react-native-web`
          'react-native$': 'react-native-web',
          'recyclerlistview$': 'recyclerlistview/web',
        }
        config.resolve.extensions = [
          '.web.js',
          '.web.ts',
          '.web.tsx',
          ...config.resolve.extensions,
        ]

        if (options.isServer) {
          config.externals = ['react', 'react-native-web', ...config.externals];
        }
        config.resolve.alias['react'] = path.resolve(__dirname, '.', 'node_modules', 'react');
        config.resolve.alias['react-native-web'] = path.resolve(__dirname, '.', 'node_modules', 'react-native-web');

        config.module.rules.push(
          {
            test: /\.(jpe?g|png|gif|svg)$/i,
            use: [ 'url-loader?limit=10000', 'img-loader' ]
          },
          {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            exclude: /node_modules/,
            use: [
              {
                loader: 'url-loader',
              }
            ],
            include: path.resolve(__dirname, '../app/node_modules/react-native-vector-icons')
            }
        )

        return config;
      }
 
  }
)

Hi,

we are trying to upgrade react-scripts (CRA) from 4.0.3 to 5.0.0 (CRA5). This is mainly due to High risk vulnerabilities within the following dependencies:

ansi-html-0.0.7.tgz node-forge-0.10.0.tgz com.google.code.gson-gson-2.8.0.jar browserslist-4.14.2.tgz url-parse-1.5.4.tgz css-what-3.4.2.tgz ansi-regex-3.0.0.tgz nth-check-1.0.2.tgz immer-8.0.1.tgz follow-redirects-1.14.7.tgz glob-parent-3.1.0.tgz ejs-2.7.4.tgz jdom2-2.0.6.jar

As CRA5 has already or will update these dependencies, we have to upgrade as well due to our internal policies. When just using react-scripts 5.0.0 (web), we got

Failed to compile.

Module not found: Error: You attempted to import C:\Temp\React-native-universal-monorepo\react-native-universal-monorepo\packages\web\node_modules\react-dom which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

As we thought, this might be depended on CRACO addressing Webpack5 as well, we tried to update craco to 7.0.0-alpha.3 but this resulted in the same compiler error.

So my question is, due have any information on how to use CRA5 with RNUM or do you have any plans to upgrade this to CRA5 in the future? Any help /information is apprciated!

Thanks

Guido