TypeScript in the app node template starter

Shopify Apps
1

tldr; I’m trying to add TS to my Shopify app (node template starter).

I’m trying to add TS to an existing embedded app (unlisted currently) and am running into a proxy error.

What I’ve changed

  • Added “@types/sqlite3”: “3.1.8”, and “typescript”: “^4.0.0” to package.json inside the /web dir. note, I’ve also tried in root, same issue.
  • Added tsc -w --preserveWatchOutput && … to existing dev and serve scripts in the same file.
  • Added TS and compiling TS defs to my db file in web/database.ts
  • Updated imports of said file, whereas I had some problems in web/index.js . Removed errors by changing it to /web/index.ts and adding // @TS -nocheck (for now)

The setup App bridged Shopify app using the latest shopify node template Let me know if you need anything else.

My current package.json

{
  "name": "shopify-app-template-node",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "debug": "node --inspect-brk index.js",
    "dev": "tsc -w --preserveWatchOutput && cross-env NODE_ENV=development nodemon index.js --ignore ./frontend",
    "serve": "tsc -w --preserveWatchOutput && cross-env NODE_ENV=production node index.js",
    "test": "vitest --reporter=verbose",
    "lint-tsc": "node_modules/.bin/tsc --noEmit"
  },
  "type": "module",
  "engines": {
    "node": ">=16.13.0"
  },
  "dependencies": {
    "@shopify/shopify-api": "^3.1.0",
    "compression": "^1.7.4",
    "cookie-parser": "^1.4.6",
    "cross-env": "^7.0.3",
    "express": "^4.17.3",
    "serve-static": "^1.14.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.13",
    "@types/sqlite3": "3.1.8",
    "jsonwebtoken": "^8.5.1",
    "nodemon": "^2.0.15",
    "prettier": "^2.6.2",
    "pretty-quick": "^3.1.3",
    "supertest": "^6.2.2",
    "typescript": "^4.0.0",
    "vitest": "^0.9.2"
  }
}
2

I’ve kind of fixed the issue. Seems like the “@shopify/app” and “@shopify/cli” really just does not like to work with TS.

What made the project build and TS compile:

  • Separating the yarn tsc -w and yarn dev commands into two processes
  • Always referencing to .js files (the TS compiler is smart enough to use TS still, but we trick the app)

This sort of works. However the setup will be totally bloated, since the app still depends on .js files to work. This means, that everywhere we make a .tsx or .ts file, we will have a duplicate .js file for the app to work.

^ This is not really a good solution. Left here as a reference.

Upvote this: https://github.com/Shopify/cli/issues/158