require() of ES Module from awesome-library\example\metro.config.js not supported.

[Alexufo]

Description

npx create-react-native-library@latest awesome-library2
√ What is the name of the npm package? ... react-native-awesome-library2
....
√ What type of library do you want to develop? » Turbo module
✔ Project created successfully at awesome-library2!

1. npx create-react-native-library@latest awesome-library2

2. npx react-native start inside example folder

E:\awesome-library2\example>yarn react-native start
error require() of ES Module E:\awesome-library2\example\node_modules\react-native-monorepo-config\index.js from E:\awesome-library2\example\metro.config.js not supported.
Instead change the require of index.js in E:\awesome-library2\example\metro.config.js to a dynamic import() which is available in all CommonJS modules.
Error [ERR_REQUIRE_ESM]: require() of ES Module E:\awesome-library2\example\node_modules\react-native-monorepo-config\index.js from E:\awesome-library2\example\metro.config.js not supported.
Instead change the require of index.js in E:\awesome-library2\example\metro.config.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (E:\awesome-library2\example\metro.config.js:3:29)
    at module.exports (E:\awesome-library2\example\node_modules\cosmiconfig\node_modules\import-fresh\index.js:28:9)
    at loadJs (E:\awesome-library2\example\node_modules\cosmiconfig\dist\loaders.js:9:18)
    at Explorer.loadFileContent (E:\awesome-library2\example\node_modules\cosmiconfig\dist\createExplorer.js:230:12)
    at E:\awesome-library2\example\node_modules\cosmiconfig\dist\createExplorer.js:252:21

Packages

• create-react-native-library
• react-native-builder-bob

Selected options

latest

Link to repro

/

Environment

windows 10

[Alexufo]

metro.config.js
helped...

const path = require('path');
const { getDefaultConfig } = require('@react-native/metro-config');
const root = path.resolve(__dirname, '..');

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
module.exports = (async () => {
  const { withMetroConfig } = await import('react-native-monorepo-config'); 
  const defaultConfig = await getDefaultConfig(__dirname);
  
  const config = withMetroConfig(defaultConfig, {
    root,
    dirname: __dirname,
  });
  config.resolver.unstable_enablePackageExports = true;
  return config;
})();

[vpodolyan]

@Alexufo thank you for the fix! It'd be great to update the template

[raahimkhan]

The error was gone after using the code provided by Alexufo above. However, upon running, I am still getting this error. I added no new code at this point. Just used the command mentioned in the docs and trying to run the example code. Can anyone help please.

[Alexufo]

@raahimkhan please create new empty project from react-native-builder-bob and compare package.json with yours. Its the same?

[raahimkhan]

@raahimkhan please create new empty project from react-native-builder-bob and compare package.json with yours. Its the same?

I create a fresh one and it is working now. Weird though because previous one was also fresh :) Maybe some cache or other issue. Thanks though!!

[vikrant-kukadiya]

@Alexufo @raahimkhan @vpodolyan Thanks for the helpful direction! I was able to get things working based on your suggestion, with a slight adjustment for my Expo setup.

In case it helps others using Expo in a monorepo, here's the Metro config that worked for me:

const path = require('path');
const { getDefaultConfig } = require('@expo/metro-config');
const root = path.resolve(__dirname, '..');

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
module.exports = (async () => {
  const { withMetroConfig } = await import('react-native-monorepo-config');
  const defaultConfig = await getDefaultConfig(__dirname);

  const config = withMetroConfig(defaultConfig, {
    root,
    dirname: __dirname,
  });

  config.resolver.unstable_enablePackageExports = true;
  return config;
})();

The key change for me was switching from @react-native/metro-config to @expo/metro-config since I'm working with an Expo-managed workflow. Everything else aligns closely with your setup.

Thanks again!

[Nodonisko]

I created fresh library using npx create-react-native-library@latest and I am getting this error when I try to run example app.

[satya164]

You are getting the error because you're on an old version of Node.js. See the .nvmrc in your generated project for the Node.js version supported by the project.

Alternatively, you should be able to use any of the following versions of Node.js

• v20.19.0 and higher (LTS)
• v22.12.0 and higher (LTS)
• v23.4.0 and higher

[John251314]

react-native-builder-bob version is to height, in my case, I create library with create-react-native-library@0.49.8, and the react-native-builder-bob version is 0.43.13. When i run command with NodeJS 23.4, it success! By the way, this package is so hard to use...

[pedrol2b]

You are getting the error because you're on an old version of Node.js. See the .nvmrc in your generated project for the Node.js version supported by the project.

Alternatively, you should be able to use any of the following versions of Node.js

* v20.19.0 and higher (LTS)

* v22.12.0 and higher (LTS)

* v23.4.0 and higher

    "react-native": "0.81.1",
    "react-native-builder-bob": "^0.40.13",

Can confirm than by doing this it worked for me
for reference was using node v20.15.0 upgraded to v22.21.1 and worked fine

Tip

For anyone doing this remember to update your .xcode.env.local

Cheers