Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
aialok opened this issue Feb 28, 2024 · 3 comments

Comments

@aialok
Copy link

aialok commented Feb 28, 2024

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.

@davidwincent
Copy link

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'

@aialok
Copy link
Author

aialok commented Mar 12, 2024

@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.

@davidwincent
Copy link

@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 });

kf6kjg pushed a commit to kf6kjg/github-script that referenced this issue Jul 6, 2024
Both of the .cts and .mts flavors. Because this action is written in CommonJS both have to compile to CommonJS in order to execute.

As it is TypeScript there's already an expectation of some slowness, so I went with the approach of running the script via the node VM module. While a cleaner approach, it has the caveat that root level await in the script doesn't work. That should become available if actions#457 is completed.
kf6kjg pushed a commit to kf6kjg/github-script that referenced this issue Jul 6, 2024
Both of the .cts and .mts flavors. Because this action is written in CommonJS both have to compile to CommonJS in order to execute.

As it is TypeScript there's already an expectation of some slowness, so I went with the approach of running the script via the node VM module. While a cleaner approach, it has the caveat that root level await in the script doesn't work. That should become available if actions#457 is completed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants