Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

mjs module resolution for React Native/Metro is broken

See original GitHub issue

error While trying to resolve module `use-context-selector` from file 
`/Users/groza/Work/welearn/welearn-app/src/components/UI/video-player/VideoPlayerController.tsx`, the package `/Users/groza/Work/welearn/welearn-app/node_modules/use-context-selector/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/groza/Work/welearn/welearn-app/node_modules/use-context-selector/dist/index.native.modern.js`. Indeed, none of these files exist:

  * /Users/groza/Work/welearn/welearn-app/node_modules/use-context-selector/dist/index.native.modern.js(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.mjs|.native.mjs|.mjs)
  * /Users/groza/Work/welearn/welearn-app/node_modules/use-context-selector/dist/index.native.modern.js/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.mjs|.native.mjs|.mjs).

my metro.config.js (i’ve already added mjs here):

const defaultSourceExts = require('metro-config/src/defaults/defaults').sourceExts;

module.exports = {
    transformer: {
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: true,
            },
        }),
    },
    resolver: {
        sourceExts: process.env.RN_SRC_EXT
            ? [...process.env.RN_SRC_EXT.split(',').concat(defaultSourceExts), 'mjs']
            : [...defaultSourceExts, 'mjs'],
    },
};

manually changing "react-native": "./dist/index.native.modern.js", to "react-native": "./dist/index.native.modern.mjs", or "react-native": "./dist/index.native.modern", allows the build to go through

same thing for manually renaming index.native.modern.mjs to index.native.modern.js

RN version 0.68.0