Add .cjs and .mjs files support

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

bug

What is the current behavior?

If you have require('./index.cjs') you will have issue:

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

      * project/node_modules/lib/index.cjs(.native|.web.js|.native.js|.js|.web.json|.native.json|.json|.web.ts|.native.ts|.ts|.web.tsx|.native.tsx|.tsx)
      * project/node_modules/lib/index.cjs/index(.native|.web.js|.native.js|.js|.web.json|.native.json|.json|.web.ts|.native.ts|.ts|.web.tsx|.native.tsx|.tsx)

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

1. Create empty project
2. Add lib.cjs
3. Create index.js with require('./lib.cjs')

What is the expected behavior?

Load .cjs files as any .js files.

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.

• No Metro config
• Metro 0.59.0
• Node 13.11.0
• Yarn 1.22.4

Extra details

I opened this issue because users of my dual CJS/ESM project have a problem with using my lib to React Native https://github.com/ai/nanoevents/issues/44#issuecomment-601722303

You had .mjs issue before, but it was closed because in 2017 it was not clear about .mjs standard. Now .mjs and .cjs is an official Node.js API.

[rossmartin]

I wanted to chime in and mention how I worked around this currently with RN 0.65.1

metro.config.js

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */
const defaultSourceExts =
  require('metro-config/src/defaults/defaults').sourceExts;
module.exports = {
  transformer: {
    getTransformOptions: () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    sourceExts: process.env.RN_SRC_EXT
      ? [...process.env.RN_SRC_EXT.split(',').concat(defaultSourceExts), 'cjs'] // <-- cjs added here
      : [...defaultSourceExts, 'cjs'], // <-- cjs added here
  },
};

The latest version of @apollo/client (3.5.2) is using .mjs as the entry point of the package. The above change fixed the issue with the dep.

[huntie]

This issue is resolved in c1c6d9c which should ship in the next major release (0.72.0) 🙂.

• Metro will now resolve .cjs and .mjs extensions by default when imported explicitly (import/require that includes the module file extension).
• Additional source file extensions for explicit resolution can now be configured via the watcher.additionalExts option.
• Importing .cjs and .mjs files implicitly (without giving the extension) can still be configured via resolver.sourceExts.