ESM export broken in react-native 0.64.2 (non-expo) about country-coder HOT 4 CLOSED

I did a bit more testing today and everything seems fine from what I can tell.
I made a simple project to depend on country-coder like this:

package.json

{
  "name": "test",
  "version": "0.0.0",
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "@ideditor/country-coder": "5.0.2"
  },
  "engines": {
    "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
  }
}

test.cjs

const countryCoder = require('@ideditor/country-coder');
const result = countryCoder.iso1A2Code('Q145');
console.log(result);

test.mjs

import * as countryCoder from '@ideditor/country-coder';
const result = countryCoder.iso1A2Code('Q145');
console.log(result);

both imports work:

~/Projects/test  % node --version
v12.22.1
~/Projects/test  % node test.cjs
GB
~/Projects/test  % node test.mjs
GB

My guess is that whatever tool you used bundle your react app is using the iife "browser" build instead of the "main" or "module" exports. (webpack and esbuild are common culprits here).

Can you check if this is the problem (edit node_modules/@ideditor/country-coder/package.json and remove the 2 lines like "browser": "./dist/country-coder.iife.js", and see if things start working again)

I'll probably just remove the "browser" export. Some guides say to add it, but I dont know why.

from country-coder.

Thanks for reporting - can you double check that you are definitely using v5.0.2 (sometimes a package-lock or yarn.lock file will lock in an older non-working dependency)

I have v5.0.1 working over in the sister project https://github.com/ideditor/location-conflation , will test it with v5.0.2 tomorrow. It's very possible that the export map has a problem.

from country-coder.

Thanks. I am definitely using v5.0.2, just double checked.

The specific error is (the result of calling the function iso1A2Code twice, or any function that is imported)

WARN  0 [TypeError: undefined is not a function]
WARN  1 [TypeError: undefined is not a function]
Error: EISDIR: illegal operation on a directory, read
    at Object.readSync (fs.js:523:3)
    at tryReadSync (fs.js:348:20)
    at Object.readFileSync (fs.js:385:19)
    at UnableToResolveError.buildCodeFrameMessage

"react": "^17.0.2",
"react-native": "^0.64.2",

from country-coder.

@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.

from country-coder.