add support for cjs files in project and in modules

packages/react-scripts/config/paths.js

@@ -34,6 +34,8 @@ const buildPath = process.env.BUILD_PATH || 'build';
 const moduleFileExtensions = [
   'web.mjs',
   'mjs',
+  'web.cjs',
+  'cjs',
   'web.js',
   'js',
   'web.ts',

packages/react-scripts/config/webpack.config.js

@@ -353,7 +353,7 @@ module.exports = function (webpackEnv) {
         shouldUseSourceMap && {
           enforce: 'pre',
           exclude: /@babel(?:\/|\\{1,2})runtime/,
-          test: /\.(js|mjs|jsx|ts|tsx|css)$/,
+          test: /\.(js|mjs|cjs|jsx|ts|tsx|css)$/,
           loader: require.resolve('source-map-loader'),
         },
         {
@@ -414,7 +414,7 @@ module.exports = function (webpackEnv) {
             // Process application JS with Babel.
             // The preset includes JSX, Flow, TypeScript, and some ESnext features.
             {
-              test: /\.(js|mjs|jsx|ts|tsx)$/,
+              test: /\.(js|mjs|cjs|jsx|ts|tsx)$/,
               include: paths.appSrc,
               loader: require.resolve('babel-loader'),
               options: {
@@ -466,7 +466,7 @@ module.exports = function (webpackEnv) {
             // Process any JS outside of the app with Babel.
             // Unlike the application JS, we only compile the standard ES features.
             {
-              test: /\.(js|mjs)$/,
+              test: /\.(js|mjs|cjs)$/,
               exclude: /@babel(?:\/|\\{1,2})runtime/,
               loader: require.resolve('babel-loader'),
               options: {
@@ -594,7 +594,12 @@ module.exports = function (webpackEnv) {
               // its runtime that would otherwise be processed through "file" loader.
               // Also exclude `html` and `json` extensions so they get processed
               // by webpacks internal loaders.
-              exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+              exclude: [
+                /^$/,
+                /\.(js|mjs|cjs|jsx|ts|tsx)$/,
+                /\.html$/,
+                /\.json$/,
+              ],
               type: 'asset/resource',
             },
             // ** STOP ** Are you adding a new loader?
@@ -766,7 +771,7 @@ module.exports = function (webpackEnv) {
       !disableESLintPlugin &&
         new ESLintPlugin({
           // Plugin options
-          extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
+          extensions: ['js', 'mjs', 'cjs', 'jsx', 'ts', 'tsx'],
           formatter: require.resolve('react-dev-utils/eslintFormatter'),
           eslintPath: require.resolve('eslint'),
           failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),

test/fixtures/cjs-support/__snapshots__/index.test.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`can use cjs library in development 1`] = `"Using Headless"`;
+
+exports[`can use cjs library in production 1`] = `"Using Headless"`;

test/fixtures/cjs-support/index.test.js

+'use strict';
+
+const testSetup = require('../__shared__/test-setup');
+
+const puppeteer = require('puppeteer');
+
+test('can use cjs library in development', async () => {
+  const { port, done } = await testSetup.scripts.start();
+
+  const browser = await puppeteer.launch({ headless: true });
+  try {
+    const page = await browser.newPage();
+    await page.goto(`http://localhost:${port}/`);
+    await page.waitForSelector('.cjs-result', { timeout: 0 });
+    const output = await page.evaluate(() => {
+      return Array.from(document.getElementsByClassName('cjs-result')).pop()
+        .innerHTML;
+    });
+    expect(output).toMatchSnapshot();
+  } finally {
+    browser.close();
+    done();
+  }
+});
+test('can use cjs library in production', async () => {
+  await testSetup.scripts.build();
+  const { port, done } = await testSetup.scripts.serve();
+
+  const browser = await puppeteer.launch({ headless: true });
+  try {
+    const page = await browser.newPage();
+    await page.goto(`http://localhost:${port}/`);
+    await page.waitForSelector('.cjs-result', { timeout: 0 });
+    const output = await page.evaluate(() => {
+      return Array.from(document.getElementsByClassName('cjs-result')).pop()
+        .innerHTML;
+    });
+    expect(output).toMatchSnapshot();
+  } finally {
+    browser.close();
+    done();
+  }
+});

test/fixtures/cjs-support/package.json

+{
+  "dependencies": {
+    "@headlessui/react": "^1.6.6",
+    "react": "latest",
+    "react-dom": "latest",
+    "serve": "^10.0.2"
+  }
+}

test/fixtures/cjs-support/src/App.js

+import React, { useState } from 'react';
+const { Switch } = require('@headlessui/react');
+
+function App() {
+  const [enabled, setEnabled] = useState(false);
+
+  return (
+    <Switch
+      checked={enabled}
+      onChange={setEnabled}
+      className={`${
+        enabled ? 'bg-blue-600' : 'bg-gray-200'
+      } relative inline-flex h-6 w-11 items-center rounded-full cjs-result`}
+    >
+      <span className="sr-only">Using Headless</span>
+      <span
+        className={`${
+          enabled ? 'translate-x-6' : 'translate-x-1'
+        } inline-block h-4 w-4 transform rounded-full bg-white`}
+      />
+    </Switch>
+  );
+}
+
+export default App;

test/fixtures/cjs-support/src/index.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));