Wasp•2w ago

Migration Issue from 0.16 to 0.17.1 - TypeScript Errors (OpenSaaS)

Hi everyone! 👋 I'm having some issues migrating my OpenSaaS project from WASP 0.16 to 0.17.1. After following the migration guide, I'm getting these TypeScript errors when trying to start the app:

[  Wasp  ] core/auth.ts(17,7): error TS2742: The inferred type of 'auth' cannot be named without a reference to 'express/node_modules/@types/express-serve-static-core'. This is likely not portable. A type annotation is necessary.
[  Wasp  ] src/youpiter/pages/auth/AuthSignupPage.tsx(55,33): error TS2345: Argument of type '{ email: string; password: string; }' is not assignable to parameter of type 'EmailSignupData'.
[  Wasp  ]   Property 'username' is missing in type '{ email: string; password: string; }' but required in type '{ username: string; password: string; }'.

[  Wasp  ] core/auth.ts(17,7): error TS2742: The inferred type of 'auth' cannot be named without a reference to 'express/node_modules/@types/express-serve-static-core'. This is likely not portable. A type annotation is necessary.
[  Wasp  ] src/youpiter/pages/auth/AuthSignupPage.tsx(55,33): error TS2345: Argument of type '{ email: string; password: string; }' is not assignable to parameter of type 'EmailSignupData'.
[  Wasp  ]   Property 'username' is missing in type '{ email: string; password: string; }' but required in type '{ username: string; password: string; }'.

I'm particularly concerned about the first error in core/auth.ts, which seems to be coming from WASP's core system rather than my application code. This suggests there might be a deeper issue with type definitions or dependencies after the migration. The second error appears to be related to the signup form now requiring a username field, but I'm not sure if this is expected behavior in the new version or if it's connected to the core auth issue. I'm attaching my package.json for reference. Has anyone encountered similar core-level TypeScript errors with OpenSaaS migrations? Any insights on what might be causing the auth type inference issue would be greatly appreciated! Thanks in advance! 🙏

5 Replies

kapa.ai•2w ago

Hi @mario.p. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, here’s what I can tell about your migration issues from Wasp 0.16 to 0.17.1 with OpenSaaS: 1. TypeScript Error in core/auth.ts (TS2742) The error:

The inferred type of 'auth' cannot be named without a reference to 'express/node_modules/@types/express-serve-static-core'. This is likely not portable. A type annotation is necessary.

The inferred type of 'auth' cannot be named without a reference to 'express/node_modules/@types/express-serve-static-core'. This is likely not portable. A type annotation is necessary.

is not directly addressed in the knowledge sources. However, similar issues have been discussed in the context of TypeScript picking up types from dependencies that are not properly referenced or are leaking through the build process. One relevant point is that Wasp’s build process can sometimes pick up TypeScript files that are not actually used, leading to type errors if those files reference types or modules that are not available in the current context. This was mentioned in a Discord thread, where it was suggested that the build process might need to be more "usage aware" to avoid compiling unused files that reference unavailable types. If this is happening in your case, you might want to check if there are any server files or types being imported or referenced in client code, or vice versa, and ensure that your imports are correct and only used where appropriate. Also, running wasp clean and then wasp start can sometimes resolve issues caused by stale build artifacts or type definitions, as suggested in another Discord threadDiscord: pg-boss failed to start!. 2. Signup Form Type Error (TS2345)

Argument of type '{ email: string; password: string; }' is not assignable to parameter of type 'EmailSignupData'.
Property 'username' is missing in type '{ email: string; password: string; }' but required in type '{ username: string; password: string; }'.

Argument of type '{ email: string; password: string; }' is not assignable to parameter of type 'EmailSignupData'.
Property 'username' is missing in type '{ email: string; password: string; }' but required in type '{ username: string; password: string; }'.

This error indicates that the signup form is now expecting a username field in addition to email and password. This is consistent with changes in Wasp’s auth system, where the User entity referenced by app.auth.userEntity must have certain fields depending on the enabled auth methods. For example, if you enable username authentication, the User entity must have a username field of type StringDiscord: Getting this error when running 'wasp start db'. If you recently migrated and enabled username authentication, you need to ensure that: - Your signup form collects the username field. - The User entity in your main.wasp file includes a username field of type String. If you do not intend to use username authentication, check your main.wasp file and remove or adjust the relevant auth method configuration. 3. General Migration Notes - After migration, you may need to update your code to use new helper functions for accessing auth fields, such as getUsername(user) or getEmail(user), since these fields may no longer be directly on the User entity depending on your auth setupDocs: Migrating to the New Auth System Part 6. - If you encounter issues with imports (e.g., @wasp/shared), update them to relative imports as needed, as discussed in Discord threadsDiscord: Error building after migrating Wasp to 0.12. Summary - The TypeScript error in core/auth.ts likely relates to type leakage or improper imports; try cleaning your build and checking for server/client import boundaries. - The signup form error is expected if username auth is enabled; update your form and User entity accordingly. - If you need more specific guidance, please provide your main.wasp auth configuration and the relevant entity definitions. If you need further help, please share more details about your main.wasp file and the specific auth methods you have enabled. The knowledge sources do not contain information specific to migration from 0.16 to 0.17.1, so if these steps do not resolve your issue, you may need to consult the latest migration guide or reach out to the Wasp community for more targeted support. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @mario.p, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

mario.pOP•2w ago

Thanks for the help! 🙏 I found the source of the first TypeScript error. The Express imports are located in these two OpenSaaS files: src/payment/stripe/webhook.ts src/payment/lemonSqueezy/webhook.ts Since these are part of the OpenSaaS template, I wanted to ask: what's the recommended approach for handling these Express imports in version 0.17.1? Should I: Remove them and use WASP-specific types instead? Update them to use different import paths? Or is there another migration step I missed for the payment webhook files? Update on the second error: I managed to resolve the signup issue by adding the missing username field to the form. ✅ I tried wasp clean and wasp start but the Express import issue persists, so it seems to be specifically related to these OpenSaaS webhook files and how they should be handled in the new version. Any guidance on the proper way to migrate these payment webhook files would be greatly appreciated! @kapa.ai

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for the detailed follow-up! Based on the knowledge sources, there is no explicit migration step or official guidance specifically for handling Express imports in payment webhook files (like src/payment/stripe/webhook.ts and src/payment/lemonSqueezy/webhook.ts) when upgrading OpenSaaS or Wasp to version 0.17.1. However, there are some relevant best practices and examples for customizing API middleware and working with Express in Wasp projects: - Wasp allows you to customize API-specific middleware and use Express types and middleware in your API handlers. The recommended approach is to define your webhook handler and its middleware in a file (e.g., src/apis.ts), and then import them into your .wasp file using the @src alias. In these files, you can import Express as usual (import express from 'express') and use Express types for your handler functions if needed. This is shown in the middleware customization example:

    import express from 'express'
    import { type WebhookCallback } from 'wasp/server/api'
    import { type MiddlewareConfigFn } from 'wasp/server'

    export const webhookCallback: WebhookCallback = (req, res, _context) => {
      res.json({ msg: req.body.length })
    }

    export const webhookCallbackMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
      middlewareConfig.delete('express.json')
      middlewareConfig.set('express.raw', express.raw({ type: '*/*' }))
      return middlewareConfig
    }

    import express from 'express'
    import { type WebhookCallback } from 'wasp/server/api'
    import { type MiddlewareConfigFn } from 'wasp/server'

    export const webhookCallback: WebhookCallback = (req, res, _context) => {
      res.json({ msg: req.body.length })
    }

    export const webhookCallbackMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
      middlewareConfig.delete('express.json')
      middlewareConfig.set('express.raw', express.raw({ type: '*/*' }))
      return middlewareConfig
    }

In your main.wasp:

    api webhookCallback {
      fn: import { webhookCallback } from "@src/apis",
      middlewareConfigFn: import { webhookCallbackMiddlewareFn } from "@src/apis",
      httpRoute: (POST, "/webhook/callback"),
      auth: false
    }

    api webhookCallback {
      fn: import { webhookCallback } from "@src/apis",
      middlewareConfigFn: import { webhookCallbackMiddlewareFn } from "@src/apis",
      httpRoute: (POST, "/webhook/callback"),
      auth: false
    }

- There is no indication that you need to remove Express imports or replace them with Wasp-specific types, as long as you are using them in server-side files and not leaking them into client code. The error you encountered may be related to TypeScript configuration or how types are referenced, but importing and using Express in server-side webhook handlers is supported and shown in the official docs. - If you are still seeing type errors, double-check that your webhook files are only imported and used in server contexts, and that your TypeScript configuration is up to date with the new Wasp project structure. Also, ensure you are not importing these server files from client code, as that could cause type resolution issues. In summary:
You should keep using Express imports in your webhook files as shown in the Wasp middleware documentation. There is no need to remove them or use Wasp-specific types, as long as you follow the server/client separation and import them correctly in your .wasp file using the @src alias. If you continue to have issues, it may be related to TypeScript configuration or import boundaries, not the use of Express itself. If you need to see a concrete example, refer to the Wasp docs on customizing API middleware. If you encounter further issues, please provide the specific error message and the relevant code snippet for more targeted help. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @mario.p, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

toticozeni•2w ago

Hey @mario.p If you didn't change logic any logic, the easiest way to migrate open-saas files would be to generate a new open-saas project and just copy changed files over. open-saas template should follow the latest wasp version always. If that is not possible, then migration guide is your best friend. The first error could be related to the fact that we update the express version in wasp. So some of the types have changed. https://wasp.sh/docs/migration-guides/migrate-from-0-16-to-0-17#6-upgrade-express-dependencies https://wasp.sh/docs/migration-guides/migrate-from-0-16-to-0-17#7-upgrade-your-api-endpoints-to-express-5 Make sure you use express version 5 in your app/package.json. That includes @types/express too. The username error might be is related to our API change for the login function: https://wasp.sh/docs/migration-guides/migrate-from-0-16-to-0-17#1-change-the-parameters-to-the-login-function-username--password-only Instead of positional parameters, we now use named parameters for the function. If you have any more questions feel free to ask.

mario.pOP•2w ago

Thanks @franjo, I followed your suggestion to start from a new open-saas project and it worked 🙂

Gaming

Programming

Migration Issue from 0.16 to 0.17.1 - TypeScript Errors (OpenSaaS)

Did you find this page helpful?