Docs are misleading for getting TypeScript up and running for Lambdas

[PeteDuncanson]

Before opening, please confirm:

• I have installed the latest version of the Amplify CLI (see above), and confirmed that the issue still persists.
• I have searched for duplicate or closed issues.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

How did you install the Amplify CLI?

No response

If applicable, what version of Node.js are you using?

No response

Amplify CLI Version

6.3.1

What operating system are you using?

Windows

Amplify Categories

function

Amplify Commands

add

Describe the bug

The docs on how to get TypeScript running here https://docs.amplify.aws/cli/function/build-options/ do not match the default layout that amplify function add generates. This leads to a lot of wasted time and confusion. Better to give the examples for a vanilla setup rather than losing people with a custom hack around setup.

Expected behavior

1. The location of the ts.config file should be made more clear, it should be "in the root of your function's folder" which it states but then the script we are told to add to our package.json assumes this file is in the <functionname>/src folder.

2. The right package.json script if the ts.config is in the root is:

"amplify:<functionname>": "cd amplify/backend/function/<functionname> && tsc -p ./tsconfig.json",

and not

"amplify:<functionname>": "cd amplify/backend/function/<functionname>/src && tsc -p ./tsconfig.json && cd -",

as listed in the docs.

3. I've no idea what the && cd - does at the end of the listed script comment in the docs but it blows up on Windows so I removed it.

4. There is talk of a '/lib' folder which in the example given is now a requirement to get this to work. Out of the box there is no lib folder so why not assume that they user can add their code directly into the /src folder. As its a *.ts file it will be ignored anyway. Chances are you might only have a few of your own files in here, why complicate it for first time users?

5. The ts.config doesn't work for the location mentioned in the docs for the script file, the values in it for /lib and /src are wrong. I've had to fix it to this with trial and error (it might not be 100% "right" but at least its working) with ts.config in the function root is:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "lib": ["dom", "esnext"],
    "module": "commonjs",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "outDir": "./src",
    "baseUrl": "./",
    "rootDir": "./src",
    "paths": {
      "src": ["./src"]
    }
  },
  "include": ["./src"],
  "exclude": ["src/node_modules", "src/**/*.spec.ts"]
}

5. Make it much clearer where the script command needed should go as there is a package.json in the root of the function as well as the one in the root of the app. Ideally just say, "not in your functions package.json as amplify won't call that one" or something. Stops us double guessing and any doubts.

Reproduction steps

1. create a function via amplify function add
2. create a simple module in /src/test.ts which exports something
3. rename your index.js to index.ts
4. import your test.js module with import test from 'test'; and call it in your handler so show we are doing funky TS stuff.
5. with this vanilla setup now try to follow the instructions in the docs site https://docs.amplify.aws/cli/function/build-options/ to get TS running
6. scream in anger.
7. come log an issue on here to try to save others from having to scream in anger at losing several hours.

GraphQL schema(s)

# Put schemas below this line

Log output

# Put your logs below this line

Additional information

No response

[PeteDuncanson]

Additionally I've had all this working last night by mocking (yeah me! woot!) however trying to push today and I bump up to this one #6398 which never got resolved. I'm not using the "funky" folder structure they are, I'm literally trying to keep it as vanilla as possible (thought it would be faster that way...)

Folder structure...nice and simple

ts.config

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "lib": ["dom", "esnext"],
    "module": "commonjs",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "outDir": "./src",
    "baseUrl": "./",
    "rootDir": "./src",
    "paths": {
      "src": ["./src"]
    }
  },
  "include": ["./src"],
  "exclude": ["src/node_modules", "src/**/*.spec.ts"]
}

script in /package.json at the root of the whole app

"amplify:xeroIDMapping": "cd amplify/backend/function/xeroIDMapping && tsc -p ./tsconfig.json",

The error when I deploy

[PeteDuncanson]

Fixed the above comment (#8668 (comment)) which was caused by my windows development machine not caring about the casing on the import file but the Lambda caring very much!

had this in my file: import wrapper from 'SUDsXeroWrapper'; and it should have been import wrapper from 'SUDSXeroWrapper';

Hope that helps someone else.

Original issue with the docs though still stands.

[ammarkarachi]

@PeteDuncanson I reproduced this and you are right about the gap in our documentation thanks for the detailed issue. We will work on getting it fixed asap.

[eettaa]

I was also recently fighting with with TS for Lambda setup and was wondering if there was a good way to exclude *.ts files from being zipped and uploaded to Lambda. AFAICT the entire src/ directory is zipped uploaded, but I'm not sure if this is desirable. If there were a config available, I would e.g. reinstall only production node_modules and exclude all *.ts[x] files.

Current [documentation] (https://docs.amplify.aws/cli/function/build-options/) says:

1. the tsconfig.json file should be in the <functionname>/
2. rootDir should be './lib/'

I took this to mean that the desired layout was
/
src/
package.json
.js
lib/
tsconfig.json

In this layout, the ts files in lib are indeed not zipped, which seems desirable. However, to get this to work there are a couple undocumented gotchas:

1. You need to add "typeRoots": ["./src/node_modules/@types"] in order to find types
2. (I think) You need to add "*": ["*", "./src/node_modules/*"] to the paths variable to have non-relative paths correctly dig through sister-directory node_modules.

Is this the layout that the documentation intended?

[eettaa]

I'm still struggling with this and hoping Amplify can clarify its guidance on underlying file structure? I notice #6398 has a similar parallel structure to the one I mentioned, except that node_modules etc are in the ./lib dir, not the src/ dir.

I noticed @attilah gave some great guidance in #6398 ... Any chance Amplify pros could chime in here?

[josefaidt]

related #659