CUMULUS-3659: Change Configuration Files to ESM Syntax

CHANGELOG.md

@@ -23,6 +23,10 @@ This version of the dashboard requires Cumulus API >= v18.2.0
     `@cumulus/[email protected]` to work with localstack v3.0.0
 - **Snyk Security Fix**
   - Upgraded axios from 1.6.0 to 1.6.8
+- **CUMULUS-3662**
+  - Upgrade node dependencies that were CommonJS(CJS) to ECMAScript Modules(ESM)
+- **CUMULUS-3659**
+  - Change configuration files to work with ECMAScript Modules(ESM)
 
 ## [v12.1.0] - 2023-10-27
 

app/src/js/config/config.js

@@ -11,7 +11,7 @@ function computeBool (value, defaultValue) {
   return value && value.toLowerCase() === 'true';
 }
 
-const config = {
+export default config = {
   target: process.env.DAAC_NAME || 'local',
   environment: process.env.STAGE || 'development',
   nav: {
@@ -29,5 +29,3 @@ const config = {
   enableRecovery: computeBool(process.env.ENABLE_RECOVERY, false),
   servedByCumulusAPI: computeBool(process.env.SERVED_BY_CUMULUS_API, '')
 };
-
-module.exports = config;

app/src/js/config/index.js

@@ -1,6 +1,6 @@
-const moment = require('moment');
+import moment from 'moment';
 
-const deploymentConfig = require('./config');
+import deploymentConfig from './config.config.js';
 
 /**
 * These are base config values that you can override in your config.js file
@@ -37,4 +37,4 @@ const baseConfig = {
 const config = Object.assign({}, baseConfig, deploymentConfig);
 config.apiRoot = config.apiRoot.replace(/\/?$/, '/');
 
-module.exports = config;
+export default config;

ava-conditional.config.cjs

@@ -1,7 +1,5 @@
-const baseConfig = require('./ava.config.cjs');
-
 module.exports = {
-  ...baseConfig,
+  require: ['./ava.config.js'],
   files: ['test/**/condition*', '!node_modules/', '!test/fixtures/**/*'],
   environmentVariables: {
     HIDE_PDR: 'false',

ava.config.cjs

@@ -6,17 +6,22 @@ module.exports = {
         [
           'babel-plugin-webpack-alias-7',
           {
-            config: './config/webpack.config.test.js',
+            config: './config/webpack.config.test.mjs',
           },
         ],
       ],
     },
-    extensions: ['js', 'jsx', 'ts'],
+    extensions: ['js', 'jsx', 'ts', 'mjs', 'cjs'],
   },
   require: ['@babel/register', './test/_setup-browser-env.js', 'ignore-styles'],
   timeout: '3m',
-  files: ['test/**/*', '!test/**/condition*', '!node_modules/', '!test/fixtures/**/*'],
+  files: [
+    'test/**/*',
+    '!test/**/condition*',
+    '!node_modules/',
+    '!test/fixtures/**/*',
+  ],
   environmentVariables: {
-    NODE_ENV: 'test'
-  }
+    NODE_ENV: 'test',
+  },
 };

babel.config.js → babel.config.cjs

@@ -13,6 +13,9 @@ module.exports = {
   plugins: [
     '@babel/plugin-syntax-jsx',
     '@babel/plugin-transform-runtime',
+    ['transform-commonjs', {
+      'synchronousImport': true
+    }],
     ...process.env.NODE_ENV === 'test' && !process.env.CYPRESS_TESTING ? ['babel-plugin-rewire'] : []
   ]
-};
+};

config/babel.register.js

@@ -1,6 +1,9 @@
 /* eslint-disable node/no-deprecated-api */
 /* eslint-disable lodash/prefer-noop */
-require('@babel/register');
+import babelRegister from '@babel/register';
 
-require.extensions['.css'] = () => {};
-require.extensions['.jpg'] = () => {};
+babelRegister(
+  {
+    extensions: ['.css', '.jpg']
+  }
+);

config/webpack.config.test.js → config/webpack.config.test.mjs

@@ -1,6 +1,6 @@
-const path = require('path');
+import * as path from 'path';
 
-module.exports = {
+const testConfig = {
   resolve: {
     extensions: ['.js', '.jsx', '.scss'],
     alias: {
@@ -19,15 +19,19 @@ module.exports = {
     ],
     '@babel/preset-react',
   ],
-  plugins: ['@babel/plugin-syntax-jsx'],
+  plugins: [
+    '@babel/plugin-syntax-jsx'
+  ],
   env: {
     test: {
       plugins: [
         [
           'babel-plugin-webpack-alias-7',
-          { config: './config/webpack.config.test.js', findConfig: true },
+          { config: './config/webpack.config.test.mjs', findConfig: true },
         ],
       ],
     },
   },
 };
+
+export default testConfig;

cypress/plugins/seedEverything.js

@@ -1,27 +1,27 @@
-const { testUtils } = require('@cumulus/api');
-const { promiseS3Upload } = require('@cumulus/aws-client/S3');
-const fs = require('fs');
-const path = require('path');
-const CSV = require('csv-string');
-const serveUtils = require('@cumulus/api/bin/serveUtils');
-const { eraseDataStack } = require('@cumulus/api/bin/serve');
-const {
+import testUtils from '@cumulus/api';
+import promiseS3Upload from '@cumulus/aws-client/S3';
+import fs from 'fs';
+import path from 'path';
+import CSV from 'csv-string';
+import serveUtils from '@cumulus/api/bin/serveUtils';
+import eraseDataStack from '@cumulus/api/bin/serve';
+import {
   localUserName,
   localStackName,
   localSystemBucket,
-} = require('@cumulus/api/bin/local-test-defaults');
+} from '@cumulus/api/bin/local-test-defaults';
 
-const collections = require('../fixtures/seeds/collectionsFixture.json');
-const executions = require('../fixtures/seeds/executionsFixture.json');
-const granules = require('../fixtures/seeds/granulesFixture.json');
-const granulesExecutions = require('../fixtures/seeds/granulesExecutionsFixture.json');
-const providers = require('../fixtures/seeds/providersFixture.json');
-const rules = require('../fixtures/seeds/rulesFixture.json');
-const pdrs = require('../fixtures/seeds/pdrsFixture.json');
-const reconciliationReports = require('../fixtures/seeds/reconciliationReportFixture.json');
+import collections from '../fixtures/seeds/collectionsFixture.json';
+import executions from '../fixtures/seeds/executionsFixture.json';
+import granules from '../fixtures/seeds/granulesFixture.json';
+import granulesExecutions from '../fixtures/seeds/granulesExecutionsFixture.json';
+import providers from '../fixtures/seeds/providersFixture.json';
+import rules from '../fixtures/seeds/rulesFixture.json';
+import pdrs from '../fixtures/seeds/pdrsFixture.json';
+import reconciliationReports from '../fixtures/seeds/reconciliationReportFixture.json';
 const reconciliationReportDir = path.resolve(__dirname, '../fixtures/seeds/reconciliation-reports');
 
-function resetIt() {
+export function resetIt() {
   process.env.system_bucket = localSystemBucket;
   process.env.stackName = localStackName;
   process.env.ReconciliationReportsTable = `${localStackName}-ReconciliationReportsTable`;
@@ -61,7 +61,7 @@ function seedPdrs() {
   return serveUtils.addPdrs(pdrs.results);
 }
 
-function uploadReconciliationReportFiles() {
+export function uploadReconciliationReportFiles() {
   const reconcileReportList = fs
     .readdirSync(reconciliationReportDir)
     .map((f) => {
@@ -97,7 +97,7 @@ function seedGranulesExecutions() {
   return serveUtils.addGranules(updatedGranules);
 }
 
-function seedEverything() {
+export function seedEverything() {
   return Promise.all([
     resetIt()
       .then(seedProviders)
@@ -111,9 +111,3 @@ function seedEverything() {
     uploadReconciliationReportFiles(),
   ]);
 }
-
-module.exports = {
-  resetIt,
-  seedEverything,
-  uploadReconciliationReportFiles,
-};