Update fn imports in tutorial (#848)

* update fn imports in tutorial

* Explain js extensions in server imports

Co-authored-by: shayneczyzewski <shayne.czyzewski@gmail.com>
Co-authored-by: Filip Sodić <filip.sodic@fer.hr>

examples/tutorials/TodoApp/main.wasp

@@ -50,16 +50,16 @@ entity Task {=psl
 psl=}
 
 query getTasks {
-  fn: import { getTasks } from "@server/queries",
+  fn: import { getTasks } from "@server/queries.js",
   entities: [Task]
 }
 
 action createTask {
-  fn: import { createTask } from "@server/actions",
+  fn: import { createTask } from "@server/actions.js",
   entities: [Task]
 }
 
 action updateTask {
-  fn: import { updateTask } from "@server/actions",
+  fn: import { updateTask } from "@server/actions.js",
   entities: [Task]
 }

waspc/ChangeLog.md

@@ -107,7 +107,7 @@ directory `foo`, you should:
      
      query getTasks {
        // This resolves to src/server/queries.js
-       fn: import { getTasks } from "@server/queries",
+       fn: import { getTasks } from "@server/queries.js",
      }
      ```
      Do this for all external imports in your `.wasp` file. After you're done, there shouldn't be any occurences of the string `"@ext"`.

web/docs/tutorials/todo-app/03-listing-tasks.md

@@ -32,12 +32,17 @@ query getTasks {
   // We specify that JS implementation of the query (which is an async JS function)
   // can be found in `src/server/queries.js` as the named export `getTasks`.
   // Use '@server' to reference files inside the src/server folder.
-  fn: import { getTasks } from "@server/queries",
+  fn: import { getTasks } from "@server/queries.js",
   // We tell Wasp that this query is doing something with entity `Task`. With that, Wasp will
   // automatically refresh the results of this query when tasks change.
   entities: [Task]
 }
 ```
+:::danger
+Even if you use TypeScript and have the file `queries.ts`, you will still need to import it using the `.js` extension. Wasp internally uses `esnext` module resultion, which always requires specifying the extension as `.js` (i.e., the extension used in the emitted JS file). This applies to all `@server` immports (and files on the server in general). It does not apply to client files.
+
+Read more about ES modules in TypeScript [here](https://www.typescriptlang.org/docs/handbook/esm-node.html). If you're interested in the discussion and the reasoning behind this, read about it [in this GitHub issue](https://github.com/microsoft/TypeScript/issues/33588).
+:::
 
 ### JS implementation
 Next, create a new file `src/server/queries.js` and define the JS we've just used in the `query` declaration above:

web/docs/tutorials/todo-app/04-creating-tasks.md

@@ -19,7 +19,7 @@ First we declare the action in Wasp:
 // ...
 
 action createTask {
-  fn: import { createTask } from "@server/actions",
+  fn: import { createTask } from "@server/actions.js",
   entities: [Task]
 }
 ```

web/docs/tutorials/todo-app/05-updating-tasks.md

@@ -20,7 +20,7 @@ We declare a Wasp action:
 // ...
 
 action updateTask {
-  fn: import { updateTask } from "@server/actions",
+  fn: import { updateTask } from "@server/actions.js",
   entities: [Task]
 }
 ```