Errors while installing packages using different versions of create-toolpad-app in a monorepo

[iamlvv]

Hi, I am currently working on a monorepo project. In this project, I already created workspaceOld (in folder packages) with create-toolpad-app version 0.1.44. After that, I upgrade create-toolpad-app to 0.2.0(the latest) and create new workspaceNew.

The error starts here. When I run the workspaceNew in dev, the components do not have the MUI design but HTML instead. For example, In editor, I only see the button in HTML design, instead of MUI Button. However, when I click on Preview, the MUI Button will replace the HTML button.

Expect:

Turn out to be like this:

However, when I change the script in package.json file in workspaceNew, from:

"scripts": {
    "dev": "toolpad-studio dev",
    "build": "toolpad-studio build",
    "start": "toolpad-studio start"
  },

to

"scripts": {
    "dev": "toolpad dev",
    "build": "toolpad build",
    "start": "toolpad start"
  },

The MUI Design Components show up and work properly, but the URL for editor changes from this:

http://localhost:3000/prod/editor/app/pages/page

to this:

http://localhost:3000/_toolpad/app/pages/page

Can you share more on this and how I can work around this problem?

[Janpot]

Thanks @iamlvv. The quickest way for us to assess the problem you run into would be through a minimal reproduction. Would you be able to create a small workspace that demonstrates the issue and share it as a git repo, or even just a zip file (you can remove the mode_modules folder to keep the size down)?

From your description it looks like It's unexpectedly sharing some dependencies between the two projects. In general I wouldn't recommend running multiple versions of toolpad in the same workspace.

[iamlvv]

Hi, I have just created a project to reproduce the issue. You can refer to this link.

I have also written steps I have done when installing and creating apps with create-toolpad-app.

[Janpot]

I have a PR that could fix your issues: #3695

To try it out you could change the @toolpad/studio dependency in workspaceNew as follows:

"@toolpad/studio": "https://pkg.csb.dev/mui/mui-toolpad/commit/bff29fb7/@toolpad/studio"

I want to stress. Multiple different versions of Toolpad in a monorepo is not something we explicitly support. I advise you to instead upgrade your projects that use @mui/toolpad to @toolpad/studio and use a single version of toolpad across the codebase.

[iamlvv]

Hi, thank you for that. I will check it out soon. However, can you share the root cause with me?

[Janpot]

Multiple versions of @emotion/react in a page and multiple versions of @tanstack/react-query in a page make producers and consumers of certain React context not match up with each other.
For now I forced depuplicating these packages in the toolpad bundler, but I can't guarantee this won't start breaking again some day with a different package,
npm dependency hoisting makes modules end up being resolved from places they shouldn't be resolved from. Converting your workspace to a pnpm workspace also fixes the issue for me as it creates a much more predictable node_modules structure to resolve from.

[iamlvv]

Hi @Janpot, I have checked and it has worked properly. Thank you so much for your help. For the long-term solution, I may upgrade the projects but in practice, sometimes we cannot upgrade immediately. Converting to pnpm is fine, I may stick this way.