Typescript prod deployment

I did the thing where I thought I fixed it, but didn’t test it. I’ve now actually fixed it and tested it in this PR: https://github.com/redwoodjs/redwood/pull/744

Hi @thedavid and @peterp - thanks for checking in and the fix.

Unfortunately this looks like a partial fix, it now generates the js files but the imports in the generated graphql.js looks incorrect. The build still fails trying to import services in ts. In my case its github.ts

Netlify build log snippet

12:33:21 PM:   Error message
12:33:21 PM:   Error: In file "/opt/build/repo/api/dist/functions/graphql.js": Cannot find module './../services/github/github.ts' from '/opt/build/repo/api/dist/functions'

Snippet from generated graphql.js

.
.
var _servicesGithubGithubTs = _interopRequireWildcard(require("./../services/github/github.ts"));

var _servicesGithubTypesTs = _interopRequireWildcard(require("./../services/github/types.ts"));
.
.

Its probably the importAll.macro that doesn’t know how to handle ts. I tried modifying it a bit - but it looks like its depracated anyway. Maybe I should import services differently? An example would be really helpful (without needing to import each service by hand ideally!)

Indeed! **shakes fist at importAll.macro**

Could you try: import services from 'src/services/*.{js,ts}' instead?

At the moment, we do not support nested directories in services.

Yep tried that, but services end up an empty array (in the compiled code)!

Ok, I’m going to have to modify this to support sub-directories in the services folder.

Before you do, hold on I think the reason its failing is because it tries to import the tests also. Removed all the service tests (!!!) and it seems to work in dev. Waiting for netlify build now :slight_smile:

I’m using this to get through subdirectories:

import services from 'src/services/*/*.{js,ts}'
1 Like

Well unfortunately, the result is the same, its trying to import ts files in the compiled graphql.js.

On the plus side, I learnt about * imports - I had no idea you could do wildcard imports!

This is something that we’ve written ourselves!

Fixes for nested subdirectories might take a bit longer, but I can very quickly solve the issue with the file extension (we can plop them off the generated asts, since nodejs knows how to resolve them!)

If anyone is keen to try a PR you should modify this line to pop off the extension: https://github.com/redwoodjs/redwood/blob/0dc1afe90bec6276e6ac363f759f0cb673bac7dc/packages/core/src/babel-plugin-redwood-import-dir.ts#L60

And when you run the tests:

cd packages/core
yarn test:watch

The result should be that this output file should no longer contain extensions:
https://github.com/redwoodjs/redwood/blob/0dc1afe90bec6276e6ac363f759f0cb673bac7dc/packages/core/src/tests/fixtures/import-dir/import-dir-default/output.js#L1-L7

No rush though, I’ll make sure to do this before the end of the day.

Oh man, :man_facepalming:, we should make our build script ignore .test.* files.

Here you are @peterp :slight_smile:

Also implemented ignore test files

1 Like

Hi All! Wanted to let you know v0.12.0 has shipped and includes fixed for TS deploy. Please let us know how it goes when you have a chance to try it out.

Hello people :slight_smile:

So I’ve tried - and failed again at deploying.
However there’s some progress.

My .ts files now seem to be properly transpiled to .js and I can now find them in the dist directory.
But as it happens api/dist/functions/graphql.js in its _interopRequireWildcard imports writes, unexpectedly enough, extensions as .ts - hence the bump on deploy: the files are here, properly turned to .js, but the generated graphql.js still calls the original extensions.

I’d like to look into it and see how we could force writing .js, because, and please correct me on this dear community, we will expect exclusively .js files in our /dist… right?

In any case, THANKS a heartfelt lot to everyone who’s working on the TS matter :), I’m converting my entire app thanks to this.

1 Like

Right now we automatically use the importAll.macro, but I’ve written a different version that allows you specify the syntax like this:

import services from 'src/services/*/*.{js,ts}'

And that should be working in v0.12.0 - the only caveat is that it will not support nested directories, but that will be coming before the end of the week and then we’ll deprecate importAll.macro

1 Like

I’ve tested v0.12.0 this morning and what I’ve shared comes from it.
I’ll let it sit then until the deprecation of importAll.macro :slight_smile:

Thanks :slight_smile: ! I’ll get this done ASAP

1 Like

Just tried 0.12 with the changes this morning. Everything seems to be working well!

For anyone who stumbles across this, wanted to summarise:

The trick is to change how services are imported in graphql.js / ts

api/src/functions/graphql.js

import importAll from '@redwoodjs/api/importAll.macro'
import { getCurrentUser } from 'src/lib/auth'

// + Add this line ->
import services from 'src/services/*/*.{js,ts}'

import { db } from 'src/lib/db'
import { reportReportErrorFromContext } from 'src/lib/bugsnag'

const schemas = importAll('api', 'graphql')

// Remove this line ->
// - const services = importAll('api', 'services')

No patch packages anymore :tada: and can use TS in services too!

2 Likes

Tested and it works \o/
My app has been deployed, I’m facing issues with the api key now, a different topic though :).
I’ll keep my eyes sharp for your update @peterp :slight_smile:

2 Likes

Unfortunately, even though my api\src\functions\graphql.js already says import services from 'src/services/**/*.{js,ts}';, I’m getting this error when deploying to Netlify (including the local netlify-cli build):

Error: In file "/opt/build/repo/api/dist/functions/graphql.js": Cannot find module '../lib/scrapers/GA/Gwinnett.ts' from '/opt/build/repo/api/dist/services'

It feels very related to the troubles I was having at Deploy failed due to an error in @netlify/plugin-functions-core plugin even though @dthyresson later was able to clone my repo and didn’t have problems with it.

My yarn rw dev still runs everything fine. I’ll report once I figure it out.

Oh wow—I had spent hours working on this today, but as soon as I typed that, the next thing I tried finally fixed it.

The problem was that in my api\src\services\scraper.ts I had written import { getWaitTimesResponseGAGwinnett } from 'src/lib/scrapers/GA/Gwinnett.ts'; instead of import { getWaitTimesResponseGAGwinnett } from 'src/lib/scrapers/GA/Gwinnett';.

Removing the “.ts” from the import lines fixed the Netlify production build. :muscle:

1 Like