Support CJS file extensions

[joeldenning]

Currently CRA treats .cjs files as asset/resource files rather than javascript files. See https://nodejs.org/api/packages.html#determining-module-system for explanation of how the .cjs file extension is treated by NodeJS.

I wasn't able to add tests to this PR because all of the tests failed epicly when I ran them locally, after following the instructions in CONTRIBUTING.md and swapping between Node 14, 16, and 17. I manually tested this change on a local create-react-app project to verify that CJS files are now processed as javascript. I expect the lack of tests will make this PR not mergeable, so any guidance on how to fix the many many errors that occur while running npx jest test/ --watchAll is appreciated.

[jenseng]

👍 would be great to see this merged, quite a few libraries use .cjs (e.g. @apollo/client), so the current webpack config can cause weird module import failures depending on what you're doing. The alternative is to use something like craco to monkey-patch the webpack config, but that's obviously not ideal.

[paulhklam1122]

@jenseng Second that! This is also affecting the very popular file uploader package uppy and all its sub-packages (@uppy/react, @uppy/dashboard, @uppy/aws-s3, @uppy/drag-drop) to name a few.

[felschr]

This PR successfully fixes the issue for my project.
Shouldn't this be prioritised, @iansu? Looks like a common issue.

[ndrabins]

Would love if this gets merged in as it solves issues with a lot of libs

[nyan-left]

Would be great to have this merged in.

In the meantime, it's possible to continue using .cjs modules with react-app-rewired:

// config-overrides.js
module.exports = {
  webpack: function (config, env) {
    config.module.rules = config.module.rules.map(rule => {
      if (rule.oneOf instanceof Array) {
        rule.oneOf[rule.oneOf.length - 1].exclude = [/\.(js|mjs|jsx|cjs|ts|tsx)$/, /\.html$/, /\.json$/];
      }
      return rule;
    });
    return config;
  },
}

[Ionut-Milas]

Guys, any update on this ?

[aaronovz1]

This solved our issue in solana-labs/oyster#538 - it would be great to have this merged! 🙏

[weidonglian]

Any update? This is a blocker!

[zxl777]

Looking forward to someone finally fixing this.

[nyatskiv]

We need this as well and it's really important for our team, @UPPY doesn't work without a .cjs support and potentially @apollo/client in the future. Please review this and merge.

[nigelheap]

Hey @nyatskiv
I got uppy working by doing the following as a stopgap before they merge this

Install these packages

npm i react-app-rewired --save-dev
npm i customize-cra  --save-dev

Update your build and start scripts

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
  }

Create a config-overrides.js file with the following contents

//@ts-ignore
const {
  override,
  addWebpackModuleRule,
  setWebpackTarget,
} = require("customize-cra");

module.exports = override(
  addWebpackModuleRule({
    test: /\.(cjs)$/,
    exclude: /@babel(?:\/|\\{1,2})runtime/,
    loader: require.resolve("babel-loader"),
    options: {
      babelrc: false,
      configFile: false,
      compact: false,
      presets: [
        [
          require.resolve("babel-preset-react-app/dependencies"),
          { helpers: true },
        ],
      ],
      cacheDirectory: true,
      cacheCompression: false,
      sourceMaps: true,
      inputSourceMap: true,
    },
  })
);

[vezwork]

+1 Hoping this will be reviewed and merged. This fixes an issue I'm having and I believe this would fix #12155.

[rcbevans]

    config.module.rules = config.module.rules.map(rule => {
      if (rule.oneOf instanceof Array) {
        rule.oneOf[rule.oneOf.length - 1].exclude = [/\.(js|mjs|jsx|cjs|ts|tsx)$/, /\.html$/, /\.json$/];
      }
      return rule;
    });

You are my new favorite internet stranger @nyan-left! I've spent all afternoon fighting with this trying to figure out why my dependency importing axios wasn't working!

Thanks a lot, hopefully this can get merged in to fix it properly ASAP.

[deivamagalhaes]

I also would love for this to be reviewed and merged. 🙏

[tmilar]

    config.module.rules = config.module.rules.map(rule => {
      if (rule.oneOf instanceof Array) {
        rule.oneOf[rule.oneOf.length - 1].exclude = [/\.(js|mjs|jsx|cjs|ts|tsx)$/, /\.html$/, /\.json$/];
      }
      return rule;
    });

You are my new favorite internet stranger @nyan-left! I've spent all afternoon fighting with this trying to figure out why my dependency importing axios wasn't working!

Thanks a lot, hopefully this can get merged in to fix it properly ASAP.

Same here, importing axios@1.3.3 as require('axios') inside a dependency is not working. It's returning some path string instead of the actual module, causing axios_1.default to be undefined.

I could work around this by adding CRACO to my project, with the configuration suggested here: #11889 (comment).

Is there any estimated ETA for merging this PR, so we can just use latest react-scripts and axios versions out of the box?

[laustdeleuran]

This PR has been kicking around for a year, and it clearly solves a known issue. What's blocking the progress here? 😖

It, and several other PRs doing the same thing, seem like they would effectively solve #12700.

[maartenverbaarschot]

Ran into this issue today, I'm glad I was able to eventually find this PR and learn about the root cause + workarounds. But like the previous commenter, I'm also wondering what is blocking the PR for so long. This seems like a good solution for an issue that has been reported multiple times by now.

[nigelheap]

I think we need to give up on create react app, it looks like they are not supporting it anymore with the new docs anyway.

If you have a look at my comment from 9 months ago there is a way to use rewire to solve the issue

[laustdeleuran]

it looks like they are not supporting it anymore with the new docs anyway.

@nigelheap, can you expand on what you mean? Or link to where in the docs it says that they are not supporting (and what they're note supporting)?

[nigelheap]

@nigelheap, can you expand on what you mean? Or link to where in the docs it says that they are not supporting (and what they're note supporting)?

@laustdeleuran The new react docs don't mention using create react app.
https://react.dev/learn/start-a-new-react-project basically says to use a framework or use Vite or Percel.

Specific part about not using a framework https://react.dev/learn/start-a-new-react-project#can-i-use-react-without-a-framework

[TinyCamera]

Hello from 2023, burned a few hours on this frustrating issue! Any chance of getting this merged?

[deivamagalhaes]

I'm also having this issue.

[djejaquino]

@zpao sorry for the direct hit. But can you help merging this? Thank you

[javaspeak]

It is sad that this has not been sorted after 1 year of collective frustration - what is up?

[hugocostadev]

I'm still hopping this gets merge :/

[101arrowz]

This issue is still breaking otherwise correctly written packages used within CRA projects (e.g. 101arrowz/fflate#193). .cjs has been part of Node's module resolution system for a few years now, so I'd have hoped CRA would support it. Is there anything else that needs to be done for this to be merged?