Toolpad core does not work correctly with Turbopack

[a88zach]

Steps to reproduce

Steps:

1. Download the reproduction here: https://github.com/a88zach/issue-4862
2. Install dependencies $ npm install --force
3. Start the dev server $npm run dev
4. Login using the test email and test password
5. Switch the account in the toolbar actions
6. Click on another page in the side navigation

Bug: Notice the account was reset to to the original value. If you watch the console, you can also see that the application does a full reload on every navigation action

Current behavior

When running with Turbopack, the application does a full reload whenever navigating to a new page. If you remove the --turbo flag from the dev command, it works as designed, or run $ npm run dev-no-turbo

Expected behavior

The dashboard components should work when using Turbopack

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.3.2
  Binaries:
    Node: 22.13.1 - ~/.nvm/versions/node/v22.13.1/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.13.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 135.0.7049.96
    Edge: Not Found
    Safari: 18.3.1
  npmPackages:
    @emotion/react: ^11 => 11.14.0 
    @emotion/styled: ^11 => 11.14.0 
    @mui/core-downloads-tracker:  6.4.11 
    @mui/icons-material: ^6 => 6.4.11 
    @mui/material: ^6 => 6.4.11 
    @mui/material-nextjs: ^6 => 6.4.3 
    @mui/private-theming:  7.0.2 
    @mui/styled-engine:  7.0.2 
    @mui/system:  7.0.2 
    @mui/types:  7.2.24 
    @mui/utils:  6.4.9 
    @mui/x-charts: ^7 => 7.29.0 
    @mui/x-charts-vendor:  7.20.0 
    @mui/x-data-grid: ^7 => 7.29.0 
    @mui/x-data-grid-premium:  7.29.0 
    @mui/x-data-grid-pro:  7.29.0 
    @mui/x-date-pickers: ^7 => 7.29.0 
    @mui/x-internals:  7.29.0 
    @mui/x-license:  7.29.0 
    @mui/x-tree-view: ^7 => 7.29.0 
    @toolpad/core: ^0.13.0 => 0.13.0 
    @toolpad/utils:  0.13.0 
    @types/react: ^19.0.0 => 19.1.2 
    react: ^19.0.0 => 19.1.0 
    react-dom: ^19.0.0 => 19.1.0 
    typescript: ^5 => 5.8.3 

Search keywords: turbo turbopack

[Janpot]

Wouldn't that be an issue with Turbopack instead of Toolpad?

[a88zach]

@Janpot, I think it's more of an issue with the router implementation in this library. I've updated the example repo with a custom sidebar footer that navigates with the Next router directly. When using these links, the application navigates as designed and does not perform a full reload.

[apedroferreira]

If I clone the current auth-next-themed example from the master branch into its own repository and run it with no changes, it seems to work without the reloading issue. Even with the --turbo flag.

We do have to force install which should not be necessary... but that's a different issue.

So actually it would be useful to more easily identify what changes to the example are causing this behavior.

[a88zach]

@apedroferreira here are the exact steps for reproducing the video below. I just pulled latest from master and was still able to reproduce

1. $ git clone git@github.com:mui/toolpad.git
2. $ cd toolpad/examples/core/auth-nextjs-themed
3. $ npm install --force
4. Update .env file and comment out AUTH_URL
5. Update package.json and add the --turbo flag to the dev command
6. $ npm run dev
7. After logging in, click on the dashboard link over and over again

Note: it's easier to see the full reload if you switch to dark mode since this example does not implement the fix for dark-mode SSR flickering

Screen.Recording.2025-04-25.at.2.16.38.PM.mov

[torazon45]

I'm facing the same issue and i had to downgrade to toolpad core 12 for this to work.

If you downgrade to version 12.x.x it works seamlessly just like the next-auth example but the latest toolpad core version doesn't work without page reload.

This seems to be an issue with either toolpad core latest version or mui or nextjs

[a88zach]

Related to vercel/next.js#77200

For now, adding the following to the next.config seems to fix the issue

turbopack: {
    resolveAlias: {
      'next/link.js': 'next/link',
      'next/navigation.js': 'next/navigation'
    }
  }

[Janpot]

Related to vercel/next.js#77200

Great find. I think your workaround is valid until the turbopack issues are resolved.

[apedroferreira]

Related to vercel/next.js#77200

For now, adding the following to the next.config seems to fix the issue

turbopack: {
    resolveAlias: {
      'next/link.js': 'next/link',
      'next/navigation.js': 'next/navigation'
    }
  }

Apologies, I mistakenly though that the reload issue wasn't happening with the --turbo flag last time I tested, probably because the browser was reloading too fast...

Thanks for finding the Next.js issue! This does seem like a valid fix until they tackle it.

[torver213]

Yeah adding the block below in next.config.ts does fix it with --turbo flag

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  experimental:{
    turbo: {
      resolveAlias: {
        'next/link.js': 'next/link',
        'next/navigation.js': 'next/navigation'
      }
    }
  }
};

export default nextConfig;

[Janpot]

I believe adopting the following should fix this ussue as we don't see the same errors happening with @mui/material-nextjs.