Show Typescript errors in console during development

Hi,

we are trying to improve out development practices and make sure we don’t miss any typescript errors that we might get in the IDE.

Is it possible to:
A) output the typescript errors in the console where meteor is running?
B) display the error in the client ui?

C) Are there any good best practice articles that we should look into?

Thanks,
Gerwin

I don’t think we can have the typescript errors while it’s running (runtime error) because node server doesn’t run typescript right?

ESlint + Husky + Lint staged maybe can help you with that, at least before committing any code to git

1 Like

@hschmaiske
Do you have sample project where I could take a look on how this could be done?

Also wouldn’t ESLint potentially produce different issues than TS itself, or should it be identical?

Simple solution: switch to using the community-managed refapp:meteor-typescript instead of meteor’s built in package.

It obeys tsconfig settings and outputs all compilation warnings and errors to the console

Along with switching to refapp:meteor-typescript, adding dev-error-overlay and hot-module-replacement to your app will show the error in the UI.

That sounds great!

I just tried `` with a brand new project and immediately ran into an issue.

Here is what I did:
meteor create --typescript meteor-typescript-test
cd meteor-typescript-test
meteor remove typescript
meteor add refapp:meteor-typescript
meteor

And Here is the error:

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env
did not find /Users/gerwinbrunner/Documents/Data/Vilango/workspace/egit/bitbucket-projects/OWL/meteor-typescript-test/.meteor/local/plugin-cache/refapp_meteor-typescript/0.3.9/v2cache/out/client/main.js
did not find /Users/gerwinbrunner/Documents/Data/Vilango/workspace/egit/bitbucket-projects/OWL/meteor-typescript-test/.meteor/local/plugin-cache/refapp_meteor-typescript/0.3.9/v2cache/out/client/main.js
Nothing emitted for client/main.tsx
/Users/gerwinbrunner/.meteor/packages/meteor-tool/.2.7.3.1bzqewx.j6ud++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/meteor-promise/promise_server.js:218
throw error;
^

TypeError [ERR_INVALID_ARG_TYPE] [ERR_INVALID_ARG_TYPE]: The “data” argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received null
at new NodeError (internal/errors.js:322:7)
at Hash.update (internal/crypto/hash.js:84:11)
at /Users/gerwinbrunner/.meteor/packages/meteor-tool/.2.7.3.1bzqewx.j6ud++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/tools/fs/tools/fs/watch.ts:329:28
at Array.forEach ()
at /Users/gerwinbrunner/.meteor/packages/meteor-tool/.2.7.3.1bzqewx.j6ud++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/tools/fs/tools/fs/watch.ts:329:8
at JsOutputResource._get (/tools/isobuild/compiler-plugin.js:992:19)
at JsOutputResource.get hash [as hash] (/tools/isobuild/compiler-plugin.js:955:28)
at ImportScanner.findImportedModuleIdentifiers (/Users/gerwinbrunner/.meteor/packages/meteor-tool/.2.7.3.1bzqewx.j6ud++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/tools/isobuild/tools/isobuild/import-scanner.ts:979:39)
at ImportScanner.scanFile (/Users/gerwinbrunner/.meteor/packages/meteor-tool/.2.7.3.1bzqewx.j6ud++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/tools/isobuild/tools/isobuild/import-scanner.ts:1092:37)
at /Users/gerwinbrunner/.meteor/packages/meteor-tool/.2.7.3.1bzqewx.j6ud++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/tools/isobuild/tools/isobuild/import-scanner.ts:740:14
at Array.forEach ()
at ImportScanner.scanImports (/Users/gerwinbrunner/.meteor/packages/meteor-tool/.2.7.3.1bzqewx.j6ud++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/tools/isobuild/tools/isobuild/import-scanner.ts:738:22)
at /tools/isobuild/compiler-plugin.js:1382:17
at Array.forEach ()
at Function.computeJsOutputFilesMap (/tools/isobuild/compiler-plugin.js:1347:19)
at ClientTarget._emitResources (/tools/isobuild/bundler.js:1166:8)
at /tools/isobuild/bundler.js:864:12
at Object.enterJob (/tools/utils/buildmessage.js:388:12)
at ClientTarget.make (/tools/isobuild/bundler.js:852:18)
at /tools/isobuild/bundler.js:3262:14
at /tools/isobuild/bundler.js:3422:25
at Array.forEach ()
at /tools/isobuild/bundler.js:3376:14
at Object.capture (/tools/utils/buildmessage.js:283:5)
at bundle (/tools/isobuild/bundler.js:3243:31)
at /tools/isobuild/bundler.js:3186:32
at Slot.withValue (/Users/gerwinbrunner/.meteor/packages/meteor-tool/.2.7.3.1bzqewx.j6ud++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/@wry/context/lib/context.esm.js:69:29)
at Object.withCache (/Users/gerwinbrunner/.meteor/packages/meteor-tool/.2.7.3.1bzqewx.j6ud++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/tools/fs/tools/fs/files.ts:1543:39)
at Object.bundle (/tools/isobuild/bundler.js:3186:16)
at /tools/runners/run-app.js:581:24
at Function.run (/Users/gerwinbrunner/.meteor/packages/meteor-tool/.2.7.3.1bzqewx.j6ud++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/tools/tool-env/tools/tool-env/profile.ts:289:14)
at bundleApp (/tools/runners/run-app.js:580:34)
at AppRunner._runOnce (/tools/runners/run-app.js:627:35)
at AppRunner._fiber (/tools/runners/run-app.js:949:28)
at /tools/runners/run-app.js:410:12 {
code: ‘ERR_INVALID_ARG_TYPE’
}

Any ideas what to do about it?

Hmm I may have seen this before. Main.tsx doesn’t compile properly. Can you add an export or something to ensure it becomes a module?

Honestly this is the best solution. It’s pretty straightforward to set up and protects you from checking in code that has type errors…

  1. Install and setup Husky
npm install husky --save-dev
npm set-script prepare "husky install"
npm run prepare
npx husky add .husky/pre-commit "npm run pre-commit"
  1. Create a new pre-commit script
npm set-script pre-commit "tsc --noEmit --incremental"

If you want to add linting to this you can set up lint-staged and append an && lint-staged after tsc --noEmit --incremental

I don’t believe I have an example Meteor project that is public, but this NextJS starter has this setup if you need some code to work off of… GitHub - copleykj/NextJS-Ultimate-Starter: A NextJS, Tailwind, TRPC, Prisma, and NextAuth Starter Project that makes getting an app up and running as easy as possible

2 Likes

It is the same for Meteor projects, and we use that internally :raised_hands:t2:

@permb

I added
export const fakeVarFor_refapp_meteor_typescript = 0;
to the main.tsx file, but it did not solve the issue :confused:

Same error still showing up

@copleykj
Thanks for the detailed info. It works like a charm.

So the only point missing would be instant feedback during development. So that you already see the errors when you make them :slightly_smiling_face:
Do you have an idea how to get that?

Strange - can you see if there are any major difference compared to the sample checked in here which I just tested and it does compile main.tsx properly: