brunolemos/react-native-web-monorepo

metro and babel configs under mobile folder are useless

vitalyiegorov opened this issue · 9 comments

Mobile package metro.config.js and babel.config.js have no effect, to make them work they should be located inside the root folder. Is there a way to make them work from the mobile folder?
@brunolemos

When I add config in metro.config.js it is working

@raajnadar how do you check it? What have you added?

I added resetCache: true inside module.exports and the cache is cleared every time I use react-native start or react-native run-android

This gets printed in my console

warning: the transform cache was reset.
Loading dependency graph, done.

Make sure you are not adding the code inside the transformer object. In one of the project none of my config worked because the config was pasted in wrong place.

Read the metro docs to find where the config should live inside the export.

My mistake

module.exports = {
	transformer: {
                resetCache: true, // wrong place
		getTransformOptions: async () => ({
			transform: {
				experimentalImportSupport: false,
				inlineRequires: false
			}
		})
	}
}

But correct config

module.exports = {
	resetCache: true, // This is correct
	transformer: {
		getTransformOptions: async () => ({
			transform: {
				experimentalImportSupport: false,
				inlineRequires: false
			}
		})
	}
}

@raajnadar Just cloned the clear version of this repository, installed dependencies, and double-checked that adding invalid js code into packages/mobile/metro.config.js or removing it does not affect yarn android, please try.

Did you try adding resetCache: true? IDK why are you trying to add invalid js code and removing it?

I once added a wrong config the config was used during build, but it did not throw any error during development but the error was thrown when I tried to build apk.

KEMBL commented

@vitalyiegorov one way to use metro.config.js from the packages/mobile is to add

"nohoist": [ "**/react-native", "**/react-native/**" ]

into workspaces config of the main package.json, fix possible dependencies' problems and fix node_modules path in build.gradle, app/build.gradle, settings.gradle

If you guys open the file node_modules/@react-native-community/cli/build/commands/server/runServer.js you can dump the current configuration of metro. It seems that the metro.config.js file is not being used. It seems that the scripts under the package.sh is not taking into account a custom path for that monorepo package.

It seems this was happening if you run yarn android without having run yarn workspace mobile start first. I updated the script to run the start automatically.