Skip to content

BUG when metro.confg.js file is used #27518

Closed
@mahi8813

Description

@mahi8813

I am trying to enable RAM bundles for a ios react-native project to improve startup performance. I have bundled using ram-bundle option of react-native cli which worked fine. But after this, i tried to use preloadedModules feature to further improve startup time as described in https://facebook.github.io/react-native/docs/performance#updating-the-metroconfigjs

added both metro.config.js & packager/modulePaths.js in my project.
Bundled my code using ram-bundle.
However, the resultant bundle is not working properly, the home never loads and stucks at the loading screen. Upon further debugging, the issue seems to be that none of the callbacks from native to js are being invoked. As a result, my home screen response nevers comes to JS side and stuck at loading screen.

This only happens when i add metro.config.js file to my project. Suspecting the entries in preloadedModules, i have remved add entries in packager/modulePaths.js and return empty config in metro.config.js. Even then resultant bundle is not working. It works only if remove metro.config.js from my project.

I wanted to use preloadedModules feature to further improve startup time but facing this issue. Any help to solve this would be highly appreciated?

To Reproduce:

  1. Add the attached metro.config.js file to project root folder.
  2. Bundle the code (plain or ram bundle) using the following command
    node_modules/.bin/react-native bundle --reset-cache --entry-file index.ios.js --platform ios --dev false --bundle-output main.jsbundle --sourcemap-output main.jsbundle.map
  3. Run in debug mode, you ll see the application behaviour is undefined.

Env:

React Native - 0.61.4
metro - 0.56.0

metro.config.js

`const modulePaths = require('./packager/modulePaths');
const resolve = require('path').resolve;
const fs = require('fs');

// Update the following line if the root folder of your app is somewhere else.
const ROOT_FOLDER = resolve(__dirname);

const config = {
serializer: {
getModulesRunBeforeMainModule: () => [
resolve('node_modules/react-native/Libraries/Core/InitializeCore.js')
]
},
transformer: {
getTransformOptions: () => {
const moduleMap = {};
modulePaths.forEach(path => {
if (fs.existsSync(path)) {
moduleMap[resolve(path)] = true;
}
});
return {
preloadedModules: moduleMap,
transform: { inlineRequires: { blacklist: moduleMap } },
};
},
},
projectRoot:ROOT_FOLDER,
};

module.exports = config;`

NOTE: Plain bundle with metro.config.js added also has the same [issue.](url)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions