fix failing esm import for react-markdown in tests

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
keplergl · Mar 1, 2025 · e72440c · e72440c
1 parent 128df06
commit e72440c
Show file tree

Hide file tree

Showing 5 changed files with 610 additions and 413 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -5,54 +5,62 @@ const {resolve} = require('path');
 const KeplerPackage = require('./package');
 const {RESOLVE_ALIASES} = require('./webpack/shared-webpack-configuration');
 
+const srcDir = resolve(__dirname, 'src');
 const nodeModules = resolve(__dirname, 'node_modules');
 
 const PRESETS = ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'];
-const PLUGINS = [
-  ['@babel/plugin-transform-typescript', {isTSX: true, allowDeclareFields: true}],
-  '@babel/plugin-transform-modules-commonjs',
-  '@babel/plugin-transform-class-properties',
-  '@babel/plugin-transform-optional-chaining',
-  '@babel/plugin-transform-logical-assignment-operators',
-  '@babel/plugin-transform-nullish-coalescing-operator',
-  '@babel/plugin-transform-export-namespace-from',
-  [
-    '@babel/transform-runtime',
-    {
-      regenerator: true
-    }
-  ],
-  [
-    'module-resolver',
-    {
-      extensions: ['.js', '.ts', '.tsx', '.json'],
-      root: ['./src'],
-      alias: {
-        test: './test',
-        // We explicitly transpile this ESM library in scripts/fix-dependencies.js and consume the transpiled version here
-        // This may not be needed once switch to Jest is complete as it is handled by transformIgnorePatterns
-        '@mapbox/tiny-sdf': `${nodeModules}/@mapbox/tiny-sdf/index.cjs`,
-        // fix ERR_REQUIRE_ESM in yarn cover
-        'maplibregl-mapbox-request-transformer': `${nodeModules}/maplibregl-mapbox-request-transformer/src/index.cjs`,
-        // compile from @kepler.gl src
-        ...RESOLVE_ALIASES,
-        // loaders.gl cjs bundle of polyfills is not transpiled properly, use esm instead
-        '@loaders.gl/polyfills': `${nodeModules}/@loaders.gl/polyfills/src`
+
+const getPlugins = isTest => {
+  const PLUGINS = [
+    ['@babel/plugin-transform-typescript', {isTSX: true, allowDeclareFields: true}],
+    '@babel/plugin-transform-modules-commonjs',
+    '@babel/plugin-transform-class-properties',
+    '@babel/plugin-transform-optional-chaining',
+    '@babel/plugin-transform-logical-assignment-operators',
+    '@babel/plugin-transform-nullish-coalescing-operator',
+    '@babel/plugin-transform-export-namespace-from',
+    [
+      '@babel/transform-runtime',
+      {
+        regenerator: true
       }
-    }
-  ],
-  [
-    'search-and-replace',
-    {
-      rules: [
-        {
-          search: '__PACKAGE_VERSION__',
-          replace: KeplerPackage.version
+    ],
+    [
+      'module-resolver',
+      {
+        extensions: ['.js', '.ts', '.tsx', '.json'],
+        root: ['./src'],
+        alias: {
+          test: './test',
+          // We explicitly transpile this ESM library in scripts/fix-dependencies.js and consume the transpiled version here
+          // This may not be needed once switch to Jest is complete as it is handled by transformIgnorePatterns
+          '@mapbox/tiny-sdf': `${nodeModules}/@mapbox/tiny-sdf/index.cjs`,
+          // fix ERR_REQUIRE_ESM in yarn cover
+          'maplibregl-mapbox-request-transformer': `${nodeModules}/maplibregl-mapbox-request-transformer/src/index.cjs`,
+          // compile from @kepler.gl src
+          ...RESOLVE_ALIASES,
+          // loaders.gl cjs bundle of polyfills is not transpiled properly, use esm instead
+          '@loaders.gl/polyfills': `${nodeModules}/@loaders.gl/polyfills/src`,
+          // react-markdown is pure ESM module, not really used during tests
+          ...(isTest ? {'react-markdown': `${srcDir}/utils/src/noop.ts`} : {})
         }
-      ]
-    }
-  ]
-];
+      }
+    ],
+    [
+      'search-and-replace',
+      {
+        rules: [
+          {
+            search: '__PACKAGE_VERSION__',
+            replace: KeplerPackage.version
+          }
+        ]
+      }
+    ]
+  ];
+  return PLUGINS;
+};
+
 const ENV = {
   test: {
     plugins: ['istanbul']
@@ -64,11 +72,12 @@ const ENV = {
 };
 
 module.exports = function babel(api) {
+  const isTest = api.env('test'); // Check if running in test mode
   api.cache(true);
 
   return {
     presets: PRESETS,
-    plugins: PLUGINS,
+    plugins: getPlugins(isTest),
     env: ENV
   };
 };
diff --git a/examples/demo-app/package.json b/examples/demo-app/package.json
@@ -45,7 +45,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intl": "^6.3.0",
-    "react-markdown": "^8.0.7",
+    "react-markdown": "^10.0.0",
     "react-redux": "^8.0.5",
     "react-resizable-panels": "^2.1.7",
     "react-router": "3.2.5",

diff --git a/src/components/package.json b/src/components/package.json
@@ -116,7 +116,7 @@
     "react-json-pretty": "^2.2.0",
     "react-lifecycles-compat": "^3.0.4",
     "react-map-gl": "^7.1.6",
-    "react-markdown": "^8.0.7",
+    "react-markdown": "^10.0.0",
     "react-modal": "^3.12.1",
     "react-redux": "^8.0.5",
     "react-sortable-hoc": "^1.8.3",

diff --git a/src/layers/package.json b/src/layers/package.json
@@ -79,7 +79,7 @@
     "prop-types": "^15.6.0",
     "react": "^18.2.0",
     "react-intl": "^6.3.0",
-    "react-markdown": "^8.0.7",
+    "react-markdown": "^10.0.0",
     "reselect": "^4.1.0",
     "s2-geometry": "^1.2.10",
     "styled-components": "6.1.8",