github-script icon indicating copy to clipboard operation
github-script copied to clipboard

Feature: Support for ECMAScript Modules (ESM) in GitHub Actions - "actions/github-scripts"

Open aialok opened this issue 1 year ago • 4 comments

Is your feature request related to a problem? Please describe. The primary issue stems from the utilization of CommonJS (CJS) modules in the actions/github-scripts action within GitHub Actions workflows. This poses a challenge for users who seek to integrate ESM (ECMAScript Modules) in their workflows, particularly when interacting with libraries like octokit/core.js that have transitioned to ESM.

Describe the solution you'd like I propose adding native support for ESM within the actions/github-scripts action. This enhancement would empower users to seamlessly incorporate ESM modules into their GitHub Actions workflows without the need for manual transpilation or workarounds. By enabling ESM support, users can leverage modern JavaScript features and libraries that rely on ESM, such as octokit/core.js.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

aialok avatar Feb 28 '24 21:02 aialok

1➕ for this!

Having problem with imports in ESM modules executed by github-scripts,

package.json

{
    "name": "configure",
    "version": "0.9.0",
    "type": "module",
    "private": true,
    "description": "actions/github-script",
    "main": "src/main.js",
    "scripts": {
        "format": "prettier --write '**/*.{js,ts}'",
        "format-check": "prettier --check '**/*.{js,ts}'",
        "lint": "eslint src/**/*.{js,ts}",
        "test": "FORCE_COLOR=1 NODE_ENV=test vitest --run .test",
        "test:watch": "FORCE_COLOR=1 NODE_ENV=test vitest --watch .test"
    },
    "author": "",
    "license": "MIT",
    "dependencies": {
        "zod": "^3.0.0"
    },
    "devDependencies": {
        "vitest": "^1.0.0",
        "prettier": "^3.0.0",
        "eslint": "^8.0.0"
    }
}

action.yaml


runs:
  using: "composite"

  steps:
    - uses: actions/setup-node@v4
      with:
        node-version: 20
        registry-url: "https://registry.npmjs.org"
        # cache: npm <- this requires a pnpm-lock.yaml file, which is not available at this point (monorepo)
  
    - run: npm install --include prod --ignore-scripts
      shell: bash

    - uses: actions/github-script@v7
      with:
        script: |
          const { main } = await import('${{ github.action_path }}/src/main.js')

          await main({ context, core, github })

Have tried the following,

  1. import { z } from "zod"; <- Unhandled error: Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'zod'
  2. const zod = require("zod"); <- Unhandled error: Error: Cannot find module 'zod'

davidwincent avatar Mar 12 '24 09:03 davidwincent

@davidwincent, I believe this should work. I tried this method earlier, and it worked for me. Importing package ESM module packages directly is not working.

aialok avatar Mar 12 '24 09:03 aialok

@davidwincent, I believe this should work. I tried this method earlier, and it worked for me. Importing package ESM module packages directly is not working.

Ended up using vercel/ncc instead. Added benefit is that some steps in composite action.yaml can be skipped :)

Updated package.json

{
    "name": "configure",
    "version": "0.9.0",
    "type": "module",
    "private": true,
    "description": "actions/github-script",
    "main": "src/main.mjs",
    "scripts": {
        "format": "prettier --write '**/*.{js,ts}'",
        "format-check": "prettier --check '**/*.{js,ts}'",
        "lint": "eslint src/**/*.{js,ts}",
        "test": "FORCE_COLOR=1 NODE_ENV=test vitest --run .test",
        "test:watch": "FORCE_COLOR=1 NODE_ENV=test vitest --watch .test",
        "clean": "rm -rf dist",
        "package": "ncc build"
    },
    "author": "",
    "license": "MIT",
    "dependencies": {
        "zod": "^3.0.0"
    },
    "devDependencies": {
        "vitest": "^1.0.0",
        "prettier": "^3.0.0",
        "eslint": "^8.0.0",
        "@vercel/ncc": "^0.38.0"
    }
}

Updated action.yaml

runs:
  using: "composite"

  steps:
    - uses: actions/github-script@v7
      with:
        script: |
          const { main } = await import('${{ github.action_path }}/dist/index.mjs');

          await main({ context, core, github });

davidwincent avatar Mar 12 '24 09:03 davidwincent