AWS Cloud9 editor Typescript issues

Question

I'm starting to use Typescript in my projects, however the Cloud9 editor often shows errors other editors (eg VS Code) do not.

For example if I install the boilerplate NextJS (14)

$ npx create-next-app@latest
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
✔ What is your project named? … test-cloud9-ts
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /home/nathan/gitRepos/test-cloud9-ts/test-cloud9-ts.

then create an environment in the new folder and open it through the Cloud9 panel...

layout.tsx has issues resolving the Metadata type from next

In the latest version of Visual Studio Code (1.87.0) there are no errors

Why is VS Code ostensibly smarter, and how can Cloud9 be "fixed"? Here's the boilerplate Nextjs 14 repo.

EDIT (JS/TS env on dev box)

$ tsc --version
Version 5.3.3

$ npm --version
10.2.4

$ node --version
v20.11.1

$ nvm --version
0.39.1

Answer 1

It looks like Cloud9 requires the package.json to be at the root of the project (in the environment folder). Otherwise it does not recognise the installed packages.

Use git clone git@someurl . (note the period) to clone into the current directory and not create a new directory.

create-react-app does not like the .c9 folder in the environment, so you should create it as per usual in a sub-folder, then move all the files up.

npx create-next-app@latest

For example if the site is called MySite, you should run mv MySite/* . from the environment directory.