GitHub Actions - How To Work With TypeScript

Question

The Problem

I'm doing a custom GitHub Action for the Marketplace, to make it easier to use in other projects.

The Action is made with TypeScript, and uses some packages, like typescript, babel (edit: don't use babel anymore), @actions/core and @actions/github.

When I add the Action to the workflow of another project, he can install the packages and build the project, even initialize it, but when the execution starts, he cannot find the @actions modules and the core of @actions/core is undefined (@actions/core is the first package to be used, because of this, it crashed the pipeline).

The node_modules folder is correctly created and the packages are inside it, but inside the script, they don't are loaded.

The Probable Cause

When I try to run the built version (both builder version, the one with ncc and the one with tsc) on my machine, this same error happens:

TypeError: Cannot read property 'getInput' of undefined

EDIT: The problem was the incorrect import of the package @actions/core

Aditional Info

In order to be able to install the packages and build, I had to do this in my action.yml file:

runs:
  using: "composite"
  steps:
    - run: cd ${{ github.action_path }}
      shell: bash
    - run: yarn --cwd ${{ github.action_path }} --production=true
      shell: bash
    - run: yarn --cwd ${{ github.action_path }} build
      shell: bash
    - run: yarn --cwd ${{ github.action_path }} start
      shell: bash

My folder structure:

|-dist # THIS IS'NT BEING PUSHED TO THE REPO
|-src
|--index.ts # Where the @actions/core is required
|--... # More files that are imported by index.ts
|-node_modules # THIS IS'NT BEING PUSHED TO THE REPO
|--... # All the packages are here, this is right and ISN'T THE PROBLEM
|-action.yml
|-babel.config.js
|-package.json
|-tsconfig.json
|-yarn.lock

With the action.yml I sent above, the following error is returned:

TypeError: Cannot read property 'getInput' of undefined

getInput is a method of @actions/core (which is being imported correctly and ISN'T THE PROBLEM)

EDIT: That was the problem hahaha.

---

If I don't run yarn install or npm install with some script, the following error happens:

Error: Cannot find module '@actions/core'

In the tutorials I saw, none of them needed to install the packages, it was as like they were installed automatically.

---

I also tried with ncc and push the compiled code to the action repo, but it also didn't work.

My action.yml:

runs:
  using: "node12"
  main: "index.js"

My folder structure:

|-src
|--index.ts # Where the @actions/core is required
|--... # More files that are imported by index.ts
|-node_modules # THIS IS'NT BEING PUSHED TO THE REPO
|--... # All the packages are here, this is right and ISN'T THE PROBLEM
|-action.yml
|-index.js # The compiled code, that is being pushed to the repo
|-package.json
|-tsconfig.json
|-yarn.lock

With the config above, this same error happens:

TypeError: Cannot read property 'getInput' of undefined

---

This is how I'm importing @actions/core in the first line of src/index.ts:

import core from "@actions/core";

---

• I'm not pushing the node_modules to the repository, just the dist folder (I tried without the folder too, building during the action execution, but it also didn't work.)
• I also found this article, but it also didn't work.

The Questions

• Any ideas about how do I work with typescript in GitHub Actions?
• Why the modules aren't loaded?
• Is there any tutorial, article, video, any type of content about work with TypeScript with GitHub Actions for Marketplace? I found this template, but I'm not able to found out why this works and mine doesn't (I haven't tested the template, maybe it doesn't work too).

Answer 1

I finally discovered the problem.

To work with @actions/core in TypeScript, this is the correct way to import it:

import * as core from "@actions/core"

You need to put a * as.

Sorry for the incorrect information I gave in the description of the question, I was sure I was importing it the right way.

For more details of the project, this is my action

Answer 2

You defined a Composite run steps action instead of a JavaScript action.

See explanation of action types.

If you look at this TypeScript action template, it has the dist folder checked in and refers to it in its action.yaml in the property runs.main.

This means you should compile your TypeScript action locally and check in the dist folder. It also says to use ncc to compile to a single file. As described here.

name: 'Your name here'
description: 'Provide a description here'
author: 'Your name or organization here'
inputs:
  milliseconds: # change this
    required: true
    description: 'input description here'
    default: 'default value if applicable'
runs:
  using: 'node12'
  main: 'dist/index.js'