fix(build): Fix ESM output (#7357) (#7358)

* fix: leave modules untouched in ESM build

This prevents Babel from converting the ESM module syntax to CommonJS.

* fix: include clearing the Nx cache in the clean script

Otherwise a "clean" build will still use old artefacts from the cache.

* fix: don't build dependant packages in parallel

This ensures that any local dependencies are built first.

* fix: don't import from dist/esm

Thanks to the other changes in this PR, we can now safely import from the decap-cms-app.

* fix(ci): use actions/setup-node cache option

This will hopefully fix the error we get on Windows during `npm install`

* chore(ci): fix typo and output matrix.node-version

* ci: run e2e tests in same container

* ci: fail fast to reduce build time and save cpu cycles

* ci: run on all branches

* ci: set IS_FORK=true if the repo owner is not decaporg

* ci: use afterEach hook to fail fast

* fix(app): add module field to package.json

* fix(app): add missing decap-cms-backend-gitea dependency

---------

Co-authored-by: Martin Jagodic <[email protected]>

Author: fgnass

.github/workflows/nodejs.yml

@@ -2,8 +2,6 @@ name: Node CI
 
 on:
   push:
-    branches:
-      - main
   pull_request:
     types: [opened, synchronize, reopened]
 
@@ -28,73 +26,37 @@ jobs:
       matrix:
         os: [macos-latest, windows-latest, ubuntu-latest]
         node-version: [18.x, 20.x]
+      fail-fast: true
     if: ${{ needs.changes.outputs.cms == 'true' }}
     steps:
       - uses: actions/checkout@v3
-      - name: Use Node.js {{ matrix.node-version }}
+      - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           check-latest: true
+          cache: 'npm'
       - name: log versions
         run: node --version && npm --version && yarn --version
-      - name: install dependecies
-        run: npm install
+      - name: install dependencies
+        run: npm ci
       - name: run unit tests
         run: npm run test:ci
-        env:
-          CI: true
-          NODE_OPTIONS: --max-old-space-size=4096
       - name: build demo site
         run: npm run build:demo
+      - name: run e2e tests
+        if: matrix.os == 'ubuntu-latest' && matrix.node-version == '20.x'
+        run: npm run test:e2e:run-ci
         env:
-          NODE_OPTIONS: --max-old-space-size=4096
-      - uses: actions/upload-artifact@master
-        with:
-          name: dev-test-website-${{ runner.os }}-${{ matrix.node-version }}
-          path: dev-test
-
-  e2e-with-cypress:
-    needs: [changes, build]
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [18.x, 20.x]
-      fail-fast: false
-
-    if: ${{ needs.changes.outputs.cms == 'true' }}
-    steps:
-      - uses: actions/checkout@v3
-      - name: Use Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          check-latest: true
-      - uses: actions/download-artifact@master
-        with:
-          name: dev-test-website-${{ runner.os }}-18.x
-          path: dev-test
-      - name: npm install
-        run: |
-          node --version
-          npm --version
-          yarn --version
-          npm install
-      - name: e2e test
-        run: |
-          npm run test:e2e:run-ci
-        env:
-          IS_FORK: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == true }}
+          IS_FORK: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == true || github.repository_owner != 'decaporg' }}
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           NODE_OPTIONS: --max-old-space-size=4096
-          MACHINE_COUNT: 2
-          MACHINE_INDEX: ${{ matrix.node-version }}
           TZ: Europe/Amsterdam
       - uses: actions/upload-artifact@v3
-        if: ${{ always() }}
+        if: matrix.os == 'ubuntu-latest' && matrix.node-version == '20.x' && failure()
         with:
-          name: cypress-results-${{ matrix.node-version }}
+          name: cypress-results
           path: |
             cypress/screenshots
             cypress/videos
+

babel.config.js

@@ -42,7 +42,7 @@ const svgo = {
 function presets() {
   return [
     '@babel/preset-react',
-    '@babel/preset-env',
+    ['@babel/preset-env', isESM ? { modules: false } : {}],
     [
       '@emotion/babel-preset-css-prop',
       {

cypress/run.mjs

@@ -2,40 +2,40 @@ import execa from 'execa';
 import { globby } from 'globby';
 
 async function runCypress() {
+  const args = ['run', '--browser', 'chrome', '--headless'];
+
+  const specs = await globby(['cypress/e2e/*spec*.js']);
+  if (specs.length === 0) {
+    console.log('No test files found in cypress/e2e/*spec*.js');
+    process.exit(1);
+  }
+
   if (process.env.IS_FORK === 'true') {
     const machineIndex = parseInt(process.env.MACHINE_INDEX);
     const machineCount = parseInt(process.env.MACHINE_COUNT);
-    const specs = await globby(['cypress/integration/*spec*.js']);
     const specsPerMachine = Math.floor(specs.length / machineCount);
     const start = (machineIndex - 1) * specsPerMachine;
     const machineSpecs =
       machineIndex === machineCount
         ? specs.slice(start)
         : specs.slice(start, start + specsPerMachine);
 
-    await execa(
-      'cypress',
-      ['run', '--browser', 'chrome', '--headless', '--spec', machineSpecs.join(',')],
-      { stdio: 'inherit', preferLocal: true },
-    );
+    args.push('--spec', machineSpecs.join(','));
   } else {
-    await execa(
-      'cypress',
-      [
-        'run',
-        '--browser',
-        'chrome',
-        '--headless',
-        '--record',
-        '--parallel',
-        '--ci-build-id',
-        process.env.GITHUB_SHA,
-        '--group',
-        'GitHub CI',
-      ],
-      { stdio: 'inherit', preferLocal: true },
+    args.push(
+      '--record',
+      '--parallel',
+      '--ci-build-id',
+      process.env.GITHUB_SHA,
+      '--group',
+      'GitHub CI',
+      '--spec',
+      specs.join(','),
     );
   }
+
+  console.log('Running Cypress with args:', args.join(' '));
+  await execa('cypress', args, { stdio: 'inherit', preferLocal: true });
 }
 
 runCypress();

cypress/support/e2e.js

@@ -26,3 +26,9 @@ addMatchImageSnapshotCommand({
 Cypress.on('uncaught:exception', () => false);
 
 import './commands';
+
+afterEach(function () {
+  if (this.currentTest.state === 'failed') {
+    Cypress.runner.stop();
+  }
+});

nx.json

@@ -1,10 +1,12 @@
 {
   "targetDefaults": {
     "build:esm": {
-      "cache": true
+      "cache": true,
+      "dependsOn": ["^build:esm"]
     },
     "build": {
-      "cache": true
+      "cache": true,
+      "dependsOn": ["^build"]
     }
   },
   "namedInputs": {

package.json

@@ -8,7 +8,7 @@
     "build-preview": "npm run build && nx run decap-cms:build-preview --output-style=stream",
     "type-check": "tsc --noEmit",
     "type-check:watch": "npm run type-check -- --watch",
-    "clean": "rimraf \"packages/*/dist\" dev-test/dist \"packages/*/node_modules\"",
+    "clean": "rimraf \"packages/*/dist\" dev-test/dist \"packages/*/node_modules\" \".nx/cache\"",
     "reset": "npm run clean",
     "test": "npm run lint && npm run type-check && npm run test:unit",
     "test:all": "npm run test && npm run test:e2e",

packages/decap-cms-app/package.json

@@ -5,6 +5,7 @@
   "homepage": "https://www.decapcms.org",
   "repository": "https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-app",
   "bugs": "https://github.com/decaporg/decap-cms/issues",
+  "module": "dist/esm/index.js",
   "main": "dist/decap-cms-app.js",
   "files": [
     "src/",
@@ -34,6 +35,7 @@
     "decap-cms-backend-azure": "^3.1.3",
     "decap-cms-backend-bitbucket": "^3.1.4",
     "decap-cms-backend-git-gateway": "^3.2.2",
+    "decap-cms-backend-gitea": "^3.1.5",
     "decap-cms-backend-github": "^3.2.2",
     "decap-cms-backend-gitlab": "^3.2.2",
     "decap-cms-backend-proxy": "^3.1.4",

packages/decap-cms/src/extensions.js

@@ -1,4 +1,4 @@
-import { DecapCmsApp as CMS } from 'decap-cms-app/dist/esm';
+import { DecapCmsApp as CMS } from 'decap-cms-app';
 // Media libraries
 import uploadcare from 'decap-cms-media-library-uploadcare';
 import cloudinary from 'decap-cms-media-library-cloudinary';

packages/decap-cms/src/index.js

@@ -1,6 +1,6 @@
 import createReactClass from 'create-react-class';
 import React from 'react';
-import { DecapCmsApp as CMS } from 'decap-cms-app/dist/esm';
+import { DecapCmsApp as CMS } from 'decap-cms-app';
 import './extensions';
 
 /**