Optional require doesn't work as expected

[karol-bisztyga]

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

Report a bug

Current behavior

I wanted to implement an optional require that was discussed here. It's said that this functionality has been added in metro 59.0, PR. RN 0.64.0 uses @react-native-community/cli version 5.0.1-alpha.0(here) and that uses metro version 0.64.0(here) so that change should be included there.

Ok, there's a stack trace but still, I don't think this functionality works as expected.

Reproducing the issue

I just installed an RN app with this commend: npx react-native init appName --version 0.64.0 and added some js code to test the thing.

Reproducing repository

Here is the repository.

Clone the repo I posted, install the packages(yarn && cd ios && pod install), run the app, and press the button with the label FAIL.

Expected behavior

Running the app from the repro I linked, I still get the Redbox. I want to be able to handle a lack of files in require on my own providing a specific error message with instructions on what can be done(or do whatever I want with this basically). Instead, I get the Redbox with something like this:

ERROR  Error: Requiring unknown module "undefined". If you are sure the module exists, try restarting Metro. You may also want to run `yarn` or `npm install`. 

Am I missing something or the optional require is broken?

Configuration

• Metro: 0.64.0(comes with RN 0.64.0)
• Node: v15.11.0
• yarn: 1.22.10
• OS: MacOs BigSur 11.2.3 (20D91)

[StampixSMO]

Any update on this @karol-bisztyga ?
I'm having the same issue, this setting is even enabled by default in @react-native-community/cli, but I cannot get it to work.
Same with import():

  try {
    await import('./does-not-exist.json');
  } catch {
    console.warn('NON EXISTING');
  }

Gives me error: Error: Unable to resolve module

  try {
    require('./does-not-exist.json');
  } catch {
    console.warn('NON EXISTING');
  }

Gives me:

 ERROR  Error: Requiring unknown module "undefined". If you are sure the module exists, try restarting Metro. You may also want to run `yarn` or `npm install`., js engine: hermes
 ERROR  Unhandled promise rejection [TypeError: Cannot set property 'importedAll' of undefined]

[Jei]

I'm experiencing the same problem in my project built with React Native (and Metro) 0.64.2.

[focux]

I'm also experiencing the same, I'm using react native 0.64.1.

EDIT.
I was able to fix this issue by changing inlineRequires: true to false in the metro.config.js file.

[kibolho]

@focux Even with this config inlineRequires: false I wasn't able to fix it =/

[kibolho]

I have tried to use babel-plugin-optional-require (https://github.com/satya164/babel-plugin-optional-require) with success when the module don't exists but without success when the module exists.

[smn-snkl]

Running into the same issue. Did you ever solve this?

[dcalhoun]

I too have been unsuccessful in loading an optional require. Even with allowOptionalDependencies: true in my app's metro.config.js, the following code...

try {
  require( './setup-local' ).default();
} catch ( _error ) {}

...results in errors like the following...

 ERROR  Error: Requiring unknown module "undefined". If you are sure the module exists, try restarting Metro. You may also want to run `yarn` or `npm install`.

However, I found a workaround relying upon the unstable_allowRequireContext option. As outlined in a post on React Native Storybook, one can search a directory for files matching a regular expression pattern, importing found files. This feature was added in #822 and should be available in Metro v0.72.1 onward. Keep in mind the feature is experimental and could break in future versions.

As an example, the following searches for a setup-local.js file in the same directory, without searching subdirectories.

const req = require.context("./", false, /setup-local\.js$/);
req.keys().forEach((key) => req(key).default());