cli: Fix handling of dynamic imports in esm.js files

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
Co-authored-by: blam<ben@blam.sh>
Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/green-beds-sell.md

@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+Updated transform of `.esm.js` files to be able to handle dynamic imports.

packages/cli/config/jest.js

@@ -83,10 +83,8 @@ async function getConfig() {
       },
     },
 
-    // We build .esm.js files with plugin:build, so to be able to load these in tests they need to be transformed
-    // TODO: jest is working on module support, it's possible that we can remove this in the future
     transform: {
-      '\\.esm\\.js$': require.resolve('jest-esm-transformer'),
+      '\\.esm\\.js$': require.resolve('./jestEsmTransform.js'), // See jestEsmTransform.js
       '\\.(js|jsx|ts|tsx)$': require.resolve('ts-jest'),
       '\\.(bmp|gif|jpg|jpeg|png|frag|xml|svg)$': require.resolve(
         './jestFileTransform.js',

packages/cli/config/jestEsmTransform.js

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const babel = require('@babel/core');
+
+// We build .esm.js files with plugin:build, so to be able to load these in tests they need to be transformed
+// TODO: jest is working on module support, it's possible that we can remove this in the future
+module.exports = {
+  process(src) {
+    const result = babel.transform(src, {
+      babelrc: false,
+      compact: false,
+      plugins: [
+        // This transforms the regular ESM syntax, import and export statements
+        require.resolve('@babel/plugin-transform-modules-commonjs'),
+        // This transforms dynamic `import()`, which is not supported yet in the Node.js VM API
+        require.resolve('babel-plugin-dynamic-import-node'),
+      ],
+    });
+
+    return result.code;
+  },
+};

packages/cli/package.json

@@ -28,6 +28,8 @@
     "backstage-cli": "bin/backstage-cli"
   },
   "dependencies": {
+    "@babel/core": "^7.4.4",
+    "@babel/plugin-transform-modules-commonjs": "^7.4.4",
     "@backstage/cli-common": "^0.1.1",
     "@backstage/config": "^0.1.2",
     "@backstage/config-loader": "^0.5.1",
@@ -53,6 +55,7 @@
     "@typescript-eslint/eslint-plugin": "^v4.14.0",
     "@typescript-eslint/parser": "^v4.14.0",
     "@yarnpkg/lockfile": "^1.1.0",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
     "bfj": "^7.0.2",
     "chalk": "^4.0.0",
     "chokidar": "^3.3.1",
@@ -78,7 +81,6 @@
     "inquirer": "^7.0.4",
     "jest": "^26.0.1",
     "jest-css-modules": "^2.1.0",
-    "jest-esm-transformer": "^1.0.0",
     "lodash": "^4.17.19",
     "mini-css-extract-plugin": "^0.9.0",
     "ora": "^4.0.3",

yarn.lock

@@ -15906,14 +15906,6 @@ jest-environment-node@^26.6.2:
     jest-mock "^26.6.2"
     jest-util "^26.6.2"
 
-jest-esm-transformer@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/jest-esm-transformer/-/jest-esm-transformer-1.0.0.tgz#b6c58f496aa48194f96361a52f5c578fd2209726"
-  integrity sha512-FoPgeMMwy1/CEsc8tBI41i83CEO3x85RJuZi5iAMmWoARXhfgk6Jd7y+4d+z+HCkTKNVDvSWKGRhwjzU9PUbrw==
-  dependencies:
-    "@babel/core" "^7.4.4"
-    "@babel/plugin-transform-modules-commonjs" "^7.4.4"
-
 jest-get-type@^24.9.0:
   version "24.9.0"
   resolved "https://registry.npmjs.org/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"