Netlify dev doesn't recognize serverless functions in typescript files

Support
,
1

I have a React app up and running locally with some working Netlify functions. The Netlify functions are written in Javascript but I would like to convert them to Typescript since that’s what I’m already using for the rest of the app.

However, when I update the file and then rename it from my-function.js to my-function.ts, netlify dev is no longer able to find the function. For example, it doesn’t show up in the list when I run netlify functions:invoke

Since I already use typescript for the rest of the application, is there additional set up needed to use typescript in my Netlify functions?

By the way, this is my netlify.toml file

[build] 
  functions = "serverless/functions/"
  command = "yarn build"

[[redirects]]
  from = "api/*"
  to = "/.netlify/functions/:splat"
  status = 200

Thanks!

2

Hi, @c.ryberg. Netlify Functions only support javascript and Go as languages at this time.

Are you converting the typescript to javascript before deploying?

3

Hey there, I’m in the process of learning this also. Check out this tutorial where he introduces netlify-lambda in Part 3. It’s a great tutorial all around by the way!

What it will do is take your TypeScript, ES6, etc files and compile them into lambda-compatible code and create a .netlify/functions folder.

For TypeScript, you’ll need a .babelrc file in the folder where your TypeScript functions are located.

Mine looks like this:

{
  "presets": [
    "@babel/preset-typescript",
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "12"
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-object-assign",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-transform-runtime"
  ],
  "ignore": ["node_modules"]
}

Works fine for me using netlify dev so far but still having trouble with netlify deploy at the moment. Hope that helps.

1 Like