Typescript: "You may need an appropriate loader to handle this file type"

[egyhenger]

trafficstars

Hey,

I am using serverless-bundle and i would like to use typescript. During the deployment with Seed, I received the following error: ERROR in /tmp/seed/source/src/start.ts 10:0 Module parse failed: The keyword 'interface' is reserved (10:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | // https://github.com/serverless-heaven/serverless-webpack |

interface HelloResponse { | statusCode: number; | body: string;

serverless.yml: frameworkVersion: '1.59.3'

package: individually: true

plugins:

• serverless-bundle
• serverless-offline

custom: stage: ${opt:stage, self:provider.stage} ...

Do I need to use serverless-webpack instead of serverless-bundle and configure webpack.config.js to use babel-loader/ts-loader to transpile TS files? Does serverless-bundle support this in its default configuration?

[jayair]

Hi there, we don't have support for TS in serverless-bundle yet. It might be something we'll add down the road!

[florianmartens]

I am facing the same problem. Would also love to use Typescript with serverless-bundle.

[karl-run]

That would be pretty cool jayair! Seems like serverless-plugin-typescript is more or less abandoned at this point. But with babel supporting TS it would be even nicer to just have ES6 and TS support in this plugin. :)

[jayair]

Oh it's a shame that the other plugin has been abandoned. Yeah it would be good to add TS support here.

[zlanich]

The docs clearly say there's typescript support now if you put a tsconfig in the root, but there's no documentation about how to actually get it working. I have no idea what my tsconfig is supposed to look like to make things compile in a compatible way. Anyone have a clue?

[rodrigoreis22]

Same here, any examples with Typescript, I'm getting this same error.

[FranzSw]

Hey, I got it working. Make sure the tsconfig is in the folder you are starting serverless from. If not, add the 'custom:bundle:tsConfig' attribute with the path to the config. My tsconfig looks pretty boring:

{
  "compilerOptions": {
    "lib": ["es2017"],
    "removeComments": true,
    "moduleResolution": "node",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "sourceMap": true,
    "target": "es2017",
    "outDir": "lib",
    "alwaysStrict": true,
    "esModuleInterop": true,
  },
  "include": ["./**/*.ts"],
  "exclude": [
    "node_modules/**/*",
    ".serverless/**/*",
    ".webpack/**/*",
    "_warmup/**/*",
    ".vscode/**/*"
  ]
}

Hope this helps you.

[jayair]

@zlanich @rodrigoreis22 We created a TS starter for this — https://github.com/AnomalyInnovations/serverless-typescript-starter

[zlanich]

@jayair Thanks for the response. I do believe I looked at this when I was setting things up. I personally needed webpack, etc, so I went with a different starter lib, and looking at your configuration helped me with my issue, if I remember correctly. I can't recall what I changed off hand.

[StevenPayright]

I fix it through ugrading below library to the latest version at devDependencies

"serverless-bundle": "5.3.0",
"serverless-dotenv-plugin": "^4.0.1",
"serverless-offline": "^6.8.0",
"typescript": "^4.7.4"

There will be no more typescript error, and use node v12 on serverless.yml