Metro can not find index.cjs which is designated in package.json's main key

[junderw]

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

Bug

What is the current behavior?

See this issue: bitcoinjs/tiny-secp256k1#84

Our package uses exports to expose ESM and CJS. But someone said their tool needed a legacy main key for package.json pointing to CJS...

So the current state is exports + a main pointing to CJS (.cjs file)

I was given this as an issue downstream and asked them to report the issue, but they did not... If the solution doesn't jump out at anyone feel free to close it... as figuring out the repro steps from an unresponsive reporter will take too long.

Perhaps some regex isn't including .cjs / .mjs files? (shot in the dark)

[robhogan]

Thanks @junderw for forwarding this on - reply below for your users

This is a known issue (eg #535) with the way Metro's file crawl works - it needs to know all source extensions ahead of time - and we don't currently include cjs by default.

We're working on it - there are some subtleties about a "correct", spec-compliant solution (comments under #770) but the practical advice for now is to add cjs to sourceExts in your Metro configuration.

In a stock React Native project you should have a metro.config.js in your project root which exports a config object. You'll need to add cjs to the exported resolver.sourceExts, something like this:

// metro.config.js
const { getDefaultConfig } = require("metro-config");
const { resolver: defaultResolver } = getDefaultConfig.getDefaultValues();

module.exports = {
  resolver: {
    ...defaultResolver,
    sourceExts: [
      ...defaultResolver.sourceExts,
      "cjs",
    ],
  }
  // ...Any other config
}

[niteshbalusu11]

@robhogan adding that did not seem to solve the issue, I am still getting:

error: Error: While trying to resolve module `tiny-secp256k1` from file `/node_modules/invoices/bolt11/parse_payment_request.js`, the package `node_modules/tiny-secp256k1/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/node_modules/tiny-secp256k1/lib/cjs/index.cjs`. Indeed, none of these files exist:

  */node_modules/tiny-secp256k1/lib/cjs/index.cjs(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)

Here's my metro.config.js

const {getDefaultConfig} = require('metro-config');
const {resolver: defaultResolver} = getDefaultConfig.getDefaultValues();
module.exports = {
  resolver: {
    ...defaultResolver,
    sourceExts: [...defaultResolver.sourceExts, 'cjs'],
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

Is there anything else I need to be doing?

[mantusuff420]

Same issue here