Skip to main content
Version: 0.17.0

Migration from 0.16.X to 0.17.X

What's new in 0.17.0?​

The login function parameters changed (username & password only)​

info

This change only affects you if you're using username and password authentication with custom auth UI. If you're using email authentication, social authentication, or our premade Auth UI components, you don't need to take any action.

The login function, as imported from wasp/client/auth, has changed the way of calling it:

import { login } from "wasp/client/auth";

await login(usernameValue, passwordValue);

This is to make it consistent with the login and signup calls in other authentication methods, which were already using this convention.

Wasp no longer generates a default favicon.ico​

Wasp will no longer generate favicon.ico if there isn't one in the public directory. Also, Wasp will no longer generate a <link> meta tag in index.html. You'll need to define it yourself explicitly.

New Wasp projects come with a default favicon.ico in the public directory and the <link> meta tag in the main.wasp file.

How to migrate?​

To migrate your Wasp app from 0.16.X to 0.17.X, follow these steps:

1. Bump the Wasp version​

Update the version field in your Wasp file to ^0.17.0:

main.wasp
app MyApp {
  wasp: {
    version: "^0.17.0"
  },
}

2. Change the parameters to the login function (username & password only)​

info

This change only affects you if you're using username and password authentication with custom auth UI. If you're using email authentication, social authentication, or our premade Auth UI components, you don't need to take any action.

If you were using the login function (imported from wasp/client/auth), change its parameters from login(usernameValue, passwordValue) to login({ username: usernameValue, password: passwordValue }).

src/components/MyLoginForm.tsx
import { login } from "wasp/client/auth";

export const MyLoginForm = () => {
  const [usernameValue, setUsernameValue] = useState("");
  const [passwordValue, setPasswordValue] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    await login(usernameValue, passwordValue);
    // ...
  };

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
};

It is possible that you were not using this function in your code. If you're instead using the <LoginForm> component, this change is already handled for you.

3. Update your tsconfig.json​

To ensure your project works correctly with Wasp 0.17.0, you must also update your tsconfig.json file.

If you haven't changed anything in your project's tsconfig.json file (this is the case for most users), just replace its contents with the new version shown below.

If you have made changes to your tsconfig.json file, we recommend taking the new version of the file and reapplying them.

Here's the new version of tsconfig.json:

tsconfig.json
// =============================== IMPORTANT =================================
// This file is mainly used for Wasp IDE support.
//
// Wasp will compile your code with slightly different (less strict) compilerOptions.
// You can increase the configuration's strictness (e.g., by adding
// "noUncheckedIndexedAccess": true), but you shouldn't reduce it (e.g., by
// adding "strict": false). Just keep in mind that this will only affect your
// IDE support, not the actual compilation.
//
// Full TypeScript configurability is coming very soon :)
{
  "compilerOptions": {
    "module": "esnext",
    "composite": true,
    "target": "esnext",
    "moduleResolution": "bundler",
    "jsx": "preserve",
    "strict": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "lib": ["dom", "dom.iterable", "esnext"],
    "skipLibCheck": true,
    "allowJs": true,
    "outDir": ".wasp/out/user"
  },
  "include": ["src"]
}

4. Update your package.json​

Wasp now requires typescript to be set to version 5.8.2.

Here’s the updated package.json snippet:

package.json
{
  "devDependencies": {
    "typescript": "^5.1.0",
  }
}

5. Tell Wasp about jest-dom types​

If you're using (or planning to use) Wasp's client tests with jest-dom, update your src/vite-env.d.ts file:

/// <reference types="vite/client" />

// This is needed to properly support Vitest testing with jest-dom matchers.
// Types for jest-dom are not recognized automatically and Typescript complains
// about missing types e.g. when using `toBeInTheDocument` and other matchers.
// Reference: https://github.com/testing-library/jest-dom/issues/546#issuecomment-1889884843
import "@testing-library/jest-dom";

6. Add a favicon.ico to the public directory​

This step is necessary only if you don't have a favicon.ico in your public folder. If so, you should add a favicon.ico to your public folder.

If you want to keep the default, you can download it here.

If you want to generate a favicon.ico and all its possible variants, check out RealFaviconGenerator, a handy open-source tool for creating favicons.

This step is required for all of the project's which use favicon.ico. Add the <link> meta tag to the head property in the main.wasp

app MyApp {
  // ...
  head: [
    "<link rel='icon' href='/favicon.ico' />",
  ]
}

8. Upgrade Express dependencies​

If you had express or @types/express in your package.json, you should change them to use version 5:

package.json
{
  "dependencies": {
    "express": "~4.21.0"
  },
  "devDependencies": {
    "@types/express": "^4.17.13"
  }
}

9. Upgrade your api endpoints to Express 5​

Wasp now uses Express v5, which impacts API Endpoints (defined with api in your Wasp file). Operations (defined with query and action in your Wasp file) are not affected by this change.

To upgrade, follow Express's v5 migration guide.

tip

In general, you only need to worry about changes to the req and res objects in your API endpoints. The breaking changes are mostly edge cases and most code should work without any updates.

10. Enjoy your updated Wasp app​

That's it!

You should now be able to run your app with the new Wasp 0.17.0.