react / react/metro

Metro should work out of the box with React-Native

Open
#403 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
5.6k
Forks
696
Avg merge
8m
Merged PRs (30d)
7

Description

Do you want to request a feature or report a bug?

It really depends on your point of view, the Metro bundler is marketed with the slogan:

The JavaScript bundler for React Native

This isn't the case, as the current default configuration does not configure it for React-Native. So from that point of view, it's a bug.

But with a lot of effort you can alter the default configuration to support React-Native, so in that case it's a feature request.

So, WHY NOT BOTH?!

What is the current behavior?

The way Metro bundler is currently set up is that you pass it a configuration, and it does it's thing. The configuration can be created using either using the getDefaultConfig method from metro-config or merging your own custom config with the mergeConfig method exposed by the same library.

The problem, however, is that that the defaults provided by Metro are not the defaults that react-native uses for the configuration. The @react-native-communit/cli project adds additional defaults to the configuration in order to make the bundle work under React-Native (https://github.com/react-native-community/cli/blob/master/packages/cli/src/tools/loadMetroConfig.js & https://github.com/react-native-community/cli/blob/master/packages/cli/src/tools/config/index.js)

So in order to create a bundle, that works with React-native, you need to replicate that logic for your own configuration before a valid bundle could be made.

What is the expected behavior?

A default configuration file that works out of the box, without any additional configuration resolving. Ideally, merging the @react-native-communit/cli's efforts with the metro-config resolve logic.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by comparing Metro's metro-config defaults with the React Native CLI logic in packages/cli/src/tools/loadMetroConfig.js and packages/cli/src/tools/config/index.js. Determine how those defaults should be combined so a React Native bundle works without extra configuration; done means the default Metro configuration supports that workflow out of the box.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
build-system, tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.