TypeScript support or merge existing rn-cli.config.js

[brunolemos]

I have a custom rn-cli.config.js to use with TypeScript, it seems this is overriding it.

I'm getting this error:

error: bundling failed: Error: Unable to resolve module `./App.tsx` from `/Users/brunolemos/Projects/workspace/mobile/index.js`: The module `./App.tsx` could not be found from `/Users/brunolemos/Projects/workspace/mobile/index.js`. Indeed, none of these files exist:

  * `/Users/brunolemos/Projects/workspace/mobile/App.tsx(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
  * `/Users/brunolemos/Projects/workspace/mobile/App.tsx/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`

So in my case I had to copy paste this comment and merge manually to get symlink working.

[MrLoh]

Sorry the usecase for this library is to be a drop in replacement for metro to accept symlinks but it cannot merge a custom rn-cli.config.js. If you need more customization, than you should just build your own script. This library could help you to kickstart a custom rn-cli.config.js or you could use it's source code to build your own.

I have the following config in a project of mine that needed more customization. Maybe that is usefull for you too, if you need some inspiration.

const fs = require('fs');
const path = require('path');
const blacklist = require('metro/src/blacklist');

const linkedDependenciesPaths = fs
	.readdirSync('./node_modules')
	// check if module is symlinked
	.filter((dep) => fs.lstatSync(`node_modules/${dep}`).isSymbolicLink())
	// return path of linked module
	.map((dep) => fs.realpathSync(`node_modules/${dep}`));

const projectRoots = [
	// Include current packaage and workspace root
	path.resolve(__dirname),
	path.resolve(__dirname, '../node_modules/'),
	// Include symlinked packages roots
	...linkedDependenciesPaths.map((depPath) => path.resolve(__dirname, depPath)),
];

const extraNodeModules = Object.assign(
	...linkedDependenciesPaths
		.map((depPath) => require(`${depPath}/package.json`).peerDependencies)
		.map((peerDep) => (peerDep ? Object.keys(peerDep) : []))
		// flatten the array of arrays
		.reduce((flatDeps, deps) => [...flatDeps, ...deps], [])
		// filter to make array elements unique
		.filter((dep, i, deps) => deps.indexOf(dep) === i)
		// return object that maps name to path
		.map((dep) => ({ [dep]: path.resolve(__dirname, `node_modules/${dep}`) }))
);

const blacklistRE = blacklist(
	linkedDependenciesPaths.map(
		(depPath) =>
			new RegExp(
				`${depPath.replace(/\//g, '[/\\\\]')}[/\\\\]node_modules[/\\\\]react-native[/\\\\].*`
			)
	)
);

module.exports = {
	extraNodeModules,
	getBlacklistRE: () => blacklistRE,
	getProjectRoots: () => projectRoots,
};