Blitz: Plain JS blitz app fails to compile

[flybayer]

What is the problem?

Plain JS blitz app is unusable — fails to compile

Steps to Reproduce:

1. blitz new myapp --js
2. cd myapp
3. Follow the steps in the default index.js page for migrating your DB and and running blitz generate all projects
4. blitz start
5. Try to access localhost:3000/projects, but it fails with:

./app/projects/queries/getProjects.js
SyntaxError: /private/tmp/8c/.blitz/caches/dev/app/projects/queries/getProjects.js: Unexpected token, expected ";" (4:80)

  2 | import {isomorphicRpc} from '@blitzjs/core'
  3 | import resolver from 'app/_rpc/projects/queries/getProjects'
> 4 | export default isomorphicRpc(resolver, 'app/_rpc/projects/queries/getProjects') as typeof resolver
    |                                                                                 ^

Versions:

0.9.0

How to fix

This template is defined with the isomorphicRpcTemplate variable in packages/server/src/synchronizer/pipeline/rules/rpc/index.ts.

I see two ways to approach this:

1. Detect if it is JS/TS project, then modify the template accordingly
2. Or, leave template as is but add a pipeline rule that runs tsc to compile to JS, if it is a JS only project.

Thoughts on how to fix this @ryardley?

[aem]

is it possible that the synchronizer needs to learn about our jsconfig.js? we added it to the template but is the synchronizer not copying it into the .blitz directory?

[flybayer]

@aem, no that is working fine. The issue is our rpc template is hardcoded as Typescript.

[aem]

ohhh, i see. missed that before.

would distributing the server file templates as JS be reasonable here? they only actually need to be in TS for development, but when publishing we could ship plain JS + type definitions, right?

[tmns]

I also noticed the following error today with a freshly generated JS project when attempting to access the db object from blitz console:

$ blitz console
[..snip..]
◢ Loading your codeCouldn't find tsconfig.json. tsconfig-paths will be skipped
✔ Loading your code
⚡️ > db.question.findMany().then(console.log)
Thrown:
ReferenceError: db is not defined

Note the first error about tsconfig.json - maybe these issues are related?

[flybayer]

@aem I think we need TS templates for the TS build to be correct. Because the actual TS build includes our generated files.

[flybayer]

@tmns that is a separate bug — can you open an issue for that?

[lednhatkhanh]

I think another way is to create a separated JS template and use it to generate JS projects so that you don't have to worry about breaking the generated projects by accident. Also by providing a separated template for JS, you can add different configs that are only make sense in TS or JS project: tsconfig.json, jsconfig.json, types,....

[aem]

@lednhatkhanh we considered that originally but opted to go for the compilation step instead - maintaining two versions of our templates makes it possible for the JS/TS projects to diverge which we don't want. It adds a bit of complexity to our internal tooling, but enables us to have an equal experience in JS and TS

[JoseRFelix]

I started working on this. For detecting if it is a Typescript or Javascript project I thought of using Next.js's script. What do you think @flybayer @aem ?

[aem]

@Jfelix61 awesome! currently our method for detecting typescript projects is just checking for the presence of a tsconfig. Since TS projects will always have a tsconfig and JS projects will always have a jsconfig that should be pretty reliable: https://github.com/blitz-js/blitz/blob/75a7feabf94044d11cae9d8569de2510f5e0612b/packages/installer/src/utils/paths.ts#L5

[JoseRFelix]

@aem Thank you! Will be using this. Maybe in the future we could use something more robust since what would happen if user removes one of these files.

[ryardley]

I think option 2 makes the most sense. Detect if the project is JS and if so run babel with typescript plugin in a pipeline rule. You don't want to have multiple templates.

[JoseRFelix]

@ryardley I thought the same. That is what I'm trying to implement :rocket:

[ryardley]

@aem @Jfelix61 JS project will not necessarily have a jsconfig so best to just check for a tsconfig.

[flybayer]

We had to revert #476 via #510 because 476 broke blitz when published to npm because typescript isn't available during blitz new and for plain JS apps.

Might need to solve this with babel instead.

OR just maintain JS templates too.

[flybayer]

@Jfelix61 you're welcome to take another run at this if you want. I just unassigned you so you don't feel pressure to continue working on this if you don't want :)

[svobik7]

I think it has been fixed by closing #864 (as it seems duplicie)