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.

Create empty project
Add lib.cjs
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
ai/nanoevents#44 (comment)

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.

Update metro config to support loading .cjs files

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.

How do I resolve this using expo?. I am using expo w/ typescript & I have no metro.config. any ideas on how to go about this?

https://docs.expo.dev/guides/customizing-metro/

const { getDefaultConfig } = require('@expo/metro-config');

const config = getDefaultConfig(__dirname);

config.resolver.sourceExts = process.env.RN_SRC_EXT
    ? [...process.env.RN_SRC_EXT.split(',').concat(config.resolver.sourceExts), 'cjs'] // <-- cjs added here
    : [...config.resolver.sourceExts, 'cjs'] // <-- cjs added here

module.exports = config;

Thanks works great. Now I'm having another error.

ReferenceError: Can't find variable: indexedDB

Does React-Native even support IndexedDB?

You should research this away from this page as it's not relevant to this topic.

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

if anyone will encount problem with react navigation on react native:

Error: While trying to resolve module `nanoid/non-secure` from file `node_modules/@react-navigation/core/lib/commonjs/useRegisterNavigator.js`, the package `node_modules/nanoid/non-secure/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/node_modules/nanoid/non-secure/index.cjs`. Indeed, none of these files exist:

This answer will help you too! Thanks @rossmartin

@vladimirevstratov

I ran into an issue with firebase session persistence on React Native where it would not persist the auth session with the default fix of

[...defaultSourceExts, 'cjs']

@vladimirevstratov 's solution above

    sourceExts: process.env.RN_SRC_EXT
      ? [...process.env.RN_SRC_EXT.split(',').concat(defaultSourceExts), 'cjs'] // <-- cjs added here
      : [...defaultSourceExts, 'cjs'], // <-- cjs added here

Fixed that issue

This solution :
const { getDefaultConfig } = require("metro-config");
const { resolver: defaultResolver } = getDefaultConfig.getDefaultValues();
exports.resolver = {
...defaultResolver,
sourceExts: [
...defaultResolver.sourceExts,
"cjs",
],
};

doesn't solve it all I still get some errors like:
[TypeError: undefined is not a function (near '...graphql.parse...')]
https://gist.github.com/Ahmed-ao/69653660b03660cc94c7830b3bfbc8f9

here is a link to a simple gist that shows my dependencies and component

I solved it like this for now:

// metro.config.js
const { getDefaultConfig } = require('@expo/metro-config');
const defaultConfig = getDefaultConfig(__dirname);

module.exports = (async () => {
  ...
  defaultConfig.resolver.sourceExts.push('cjs');
  ...
  return defaultConfig;
})();

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.

Add watcher.additionalExts option, enable inclusion of .cjs and .mjs …

Navigation Menu

Repository navigation

Add .cjs and .mjs files support #535

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Add .cjs and .mjs files support #535

Description

Activity

rossmartin commented on Nov 16, 2021

ndukachukz commented on Jan 19, 2022

mchambaud commented on Jan 19, 2022

ndukachukz commented on Jan 19, 2022

mchambaud commented on Jan 19, 2022

vladimirevstratov commented on Mar 21, 2022

mobinni commented on Apr 15, 2022

Ahmed-ao commented on Apr 23, 2022

bombillazo commented on Jul 11, 2022

huntie commented on Jul 28, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions