File extension pattern matching in React Native 0.62.4 for mjs cjs main and module files
Closed this issue ยท 4 comments
@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.
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.
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
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!
Have a great day! Love the package, and keep up the amazing work!
Thank you! I'm happy you are finding it useful!