File extension pattern matching in React Native 0.62.4 for mjs cjs main and module files

[HowardLin114]

@bhousel Thank you very much for the help. Just one small thing left before package is fully ready for RN again.

Yes browser export was causing issues, and I get the actual root issue now aside from browser export.

It's the file extension pattern matching.

This is v4.1.0 package.json, it conforms to pattern

"main": "./dist/country-coder.js",
"module": "./dist/country-coder.module.js",

it conforms to this pattern that React-Native wants, notice the .js extension (.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.svg|.native.svg|.svg), without this Xcode will not build.

However in v5.0.3, it becomes

"main": "./dist/country-coder.cjs",
"module": "./dist/country-coder.mjs",

If I just added a .js to both of these files (RN uses module but both pattern matching was needed)

"main": "./dist/country-coder.cjs.js",
"module": "./dist/country-coder.mjs.js",

This works perfectly. All features are now back online. It's silly, but the pattern matching is strict.

[bhousel]

This is a known issue with metro: facebook/metro#535

It's going to be more of an issue going forward as maintainers upgrade their JavaScript projects to ESM. The meaning of the .js file extension is ambiguous in Node - it depends on whether the package maintainer has specified "type": "module" (by default, js files are treated as ESM) or "type": "commonjs" (by default, js files are treated as cjs).

So whichever a maintainer picks, we need those .cjs or .mjs extensions to support the other way of doing things, at least for a while.

[bhousel]

Also I browsed the commits linked to that metro issue, it looks like you might be adjust the metro config as a workaround:
voidrender/demo-react-native-emotion@d868225

[HowardLin114]

Amazing explanation and thank you for the action item. The facebook metro team should really permanently fix this from their side so people can upgrade long term.

I confirm it is now working as expected this link you posted, and it works beautifully.

Have a great day! Love the package, and keep up the amazing work!

[bhousel]

Have a great day! Love the package, and keep up the amazing work!

Thank you! I'm happy you are finding it useful!