add more explicit support for .mjs and .cjs extensions

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/spicy-parents-fold.md

@@ -0,0 +1,13 @@
+---
+'@backstage/create-app': patch
+---
+
+Updated the root `package.json` to include files with `.cjs` and `.mjs` extensions in the `"lint-staged"` configuration.
+
+The make this change to an existing app, apply the following changes to the `package.json` file:
+
+```diff
+ "lint-staged": {
+-    "*.{js,jsx,ts,tsx}": [
++    "*.{js,jsx,ts,tsx,mjs,cjs}": [
+```

.changeset/strong-doors-destroy.md

@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+Add support for `.cjs` and `.mjs` extensions in local and dependency modules.

package.json

@@ -81,7 +81,7 @@
   },
   "prettier": "@spotify/prettier-config",
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
       "eslint --fix",
       "prettier --write"
     ],

packages/cli/config/jest.js

@@ -96,20 +96,22 @@ async function getProjectConfig(targetPath, displayName) {
     rootDir: path.resolve(targetPath, 'src'),
     coverageDirectory: path.resolve(targetPath, 'coverage'),
     coverageProvider: 'v8',
-    collectCoverageFrom: ['**/*.{js,jsx,ts,tsx}', '!**/*.d.ts'],
+    collectCoverageFrom: ['**/*.{js,jsx,ts,tsx,mjs,cjs}', '!**/*.d.ts'],
     moduleNameMapper: {
       '\\.(css|less|scss|sss|styl)$': require.resolve('jest-css-modules'),
     },
 
     transform: {
-      '\\.(js|jsx|ts|tsx)$': require.resolve('./jestSucraseTransform.js'),
+      '\\.(js|jsx|ts|tsx|mjs|cjs)$': require.resolve(
+        './jestSucraseTransform.js',
+      ),
       '\\.(bmp|gif|jpg|jpeg|png|frag|xml|svg|eot|woff|woff2|ttf)$':
         require.resolve('./jestFileTransform.js'),
       '\\.(yaml)$': require.resolve('jest-transform-yaml'),
     },
 
     // A bit more opinionated
-    testMatch: ['**/?(*.)test.{js,jsx,mjs,ts,tsx}'],
+    testMatch: ['**/?(*.)test.{js,jsx,ts,tsx,mjs,cjs}'],
 
     transformIgnorePatterns: [`/node_modules/(?:${transformIgnorePattern})/`],
   };

packages/cli/src/commands/lint.ts

@@ -20,7 +20,7 @@ import { paths } from '../lib/paths';
 
 export default async (cmd: Command, cmdArgs: string[]) => {
   const args = [
-    '--ext=js,jsx,ts,tsx',
+    '--ext=js,jsx,ts,tsx,mjs,cjs',
     '--max-warnings=0',
     `--format=${cmd.format}`,
     ...(cmdArgs ?? [paths.targetDir]),

packages/cli/src/lib/bundler/transforms.ts

@@ -61,7 +61,7 @@ export const transforms = (options: TransformOptions): Transforms => {
       },
     },
     {
-      test: /\.(jsx?|mjs)$/,
+      test: /\.(jsx?|mjs|cjs)$/,
       exclude: /node_modules/,
       loader: require.resolve('@sucrase/webpack-loader'),
       options: {
@@ -71,7 +71,7 @@ export const transforms = (options: TransformOptions): Transforms => {
       },
     },
     {
-      test: /\.m?js/,
+      test: /\.(js|mjs|cjs)/,
       resolve: {
         fullySpecified: false,
       },

packages/create-app/templates/default-app/package.json.hbs

@@ -38,7 +38,7 @@
   },
   "prettier": "@spotify/prettier-config",
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
       "eslint --fix",
       "prettier --write"
     ],

packages/storybook/.storybook/main.js

@@ -59,7 +59,7 @@ module.exports = ({ args }) => {
           },
         },
         {
-          test: /\.(jsx?|mjs)$/,
+          test: /\.(jsx?|mjs|cjs)$/,
           exclude: /node_modules/,
           loader: require.resolve('@sucrase/webpack-loader'),
           options: {

scripts/list-deprecations.js

@@ -129,7 +129,7 @@ async function main() {
           const srcDir = resolvePath(rootPath, packageDir, 'src');
 
           if (await fs.pathExists(srcDir)) {
-            const files = await globby(['**/*.{js,jsx,ts,tsx}'], {
+            const files = await globby(['**/*.{js,jsx,ts,tsx,mjs,cjs}'], {
               cwd: srcDir,
             });
             fileQueue.push(