Vite examples (vite and firebase-vite) don't run

[ben5516]

Steps to reproduce

Steps:

1. npc create-toolpad-app@latest --example firebase-vite or npx create-toolpad-app@latest --example vite
2. cd into the directory
3. npm install
4. npm run dev

Current behavior

You get an error:

Error: The following dependencies are imported but could not be resolved:

  @toolpad/core/react-router (imported by...)
  
Are they installed?
     at ....

Expected behavior

The example should run without issue

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.2
  Binaries:
    Node: 23.5.0 - /opt/homebrew/bin/node
    npm: 10.9.2 - /opt/homebrew/bin/npm
    pnpm: 9.15.3 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.265
    Edge: Not Found
    Safari: 18.2
  npmPackages:
    @emotion/react: ^11 => 11.14.0
    @emotion/styled: ^11 => 11.14.0
    @mui/base:  5.0.0-beta.66
    @mui/core-downloads-tracker:  6.3.1
    @mui/icons-material: ^6 => 6.3.1
    @mui/lab:  6.0.0-beta.19
    @mui/material: ^6 => 6.3.1
    @mui/private-theming:  6.3.1
    @mui/styled-engine:  6.3.1
    @mui/system:  6.3.1
    @mui/types:  7.2.21
    @mui/utils:  6.3.1
    @toolpad/core: latest => 0.11.0
    @toolpad/utils:  0.11.0
    @types/react: ^19.0.0 => 19.0.4
    react: ^19.0.0 => 19.0.0
    react-dom: ^19.0.0 => 19.0.0
    typescript: ^5 => 5.7.3

Search keywords: vite react-router @toolpad/core/react-router

[bharatkashyap]

Thanks for reporting this! We're about to release v0.12.0 which should resolve this: #4582

[ben5516]

@bharatkashyap Thanks for the quick reply!

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@ben5516 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[MDutro]

I am writing a Vite based React app and using "@toolpad/core" version 0.12.0 ("latest" in our package.json).

The import statement Import { ReactRouterAppProvider } from "@toolpad/core/react-router" causes a "Failed to resolve import" error and, naturally, the application will not load in that scenario.

I would be happy to provide any further information that would be helpful.

[apedroferreira]

I am writing a Vite based React app and using "@toolpad/core" version 0.12.0 ("latest" in our package.json).

The import statement Import { ReactRouterAppProvider } from "@toolpad/core/react-router" causes a "Failed to resolve import" error and, naturally, the application will not load in that scenario.

I would be happy to provide any further information that would be helpful.

Hi, can you check your node_modules/@toolpad/core folder? If you're correctly using the latest version, there should be a react-router folder inside that exports ReactRouterAppProvider...

Otherwise feel free to create a separate issue and provide a reproduction!

[MDutro]

I am writing a Vite based React app and using "@toolpad/core" version 0.12.0 ("latest" in our package.json).
The import statement Import { ReactRouterAppProvider } from "@toolpad/core/react-router" causes a "Failed to resolve import" error and, naturally, the application will not load in that scenario.
I would be happy to provide any further information that would be helpful.

Hi, can you check your node_modules/@toolpad/core folder? If you're correctly using the latest version, there should be a react-router folder inside that exports ReactRouterAppProvider...

Otherwise feel free to create a separate issue and provide a reproduction!

Sorry for the delayed response!

In this case, the problem was on our end. Someone had installed react-router-dom as a dependency in the project instead of react-router. It took me a while to realize what the problem was! Once I removed react-router-dom and installed react-router, the import statement was recognized without issue.

I did notice something interesting during my wrestling match with npm though - running npm install and npm ci against our package.json with react-router-dom in it did not throw any errors or warnings. But when I removed @toolpad/core and reinstalled just that single package, I did see errors in the console from npm, which is what led me to realize what the problem actually was.

I don't know if that information would be helpful to your team or not, as you continue the development of the library, but thought I would offer it just in case.

[joao-dantas]

I am writing a Vite based React app and using "@toolpad/core" version 0.12.0 ("latest" in our package.json).

The import statement Import { ReactRouterAppProvider } from "@toolpad/core/react-router" causes a "Failed to resolve import" error and, naturally, the application will not load in that scenario.

I would be happy to provide any further information that would be helpful.

I just had a simillar issue.

I created a simple React Router app: npx create-react-router@latest my-react-router-app and installed toolpad/core .

When I import import { ReactRouterAppProvider } from "@toolpad/core/react-router" to the root.tsx layout to be used in the application I get:

|- /node_modules/@toolpad/core/react-router/index.js:1
export * from "./ReactRouterAppProvider.js";
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (node:internal/modules/cjs/loader:1378:20)
    at Module._compile (node:internal/modules/cjs/loader:1428:41)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1104:12)
    at cjsLoader (node:internal/modules/esm/translators:346:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:286:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
    at ModuleLoader.import (node:internal/modules/esm/loader:473:24)
    at nodeImport (/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:53058:15)

12:01:36 AM [vite] Internal server error: Unexpected token 'export'

Should I open a separate issue?

[bharatkashyap]

I am writing a Vite based React app and using "@toolpad/core" version 0.12.0 ("latest" in our package.json).
The import statement Import { ReactRouterAppProvider } from "@toolpad/core/react-router" causes a "Failed to resolve import" error and, naturally, the application will not load in that scenario.
I would be happy to provide any further information that would be helpful.

I just had a simillar issue.

I created a simple React Router app: npx create-react-router@latest my-react-router-app and installed toolpad/core .

When I import import { ReactRouterAppProvider } from "@toolpad/core/react-router" to the root.tsx layout to be used in the application I get:

|- /node_modules/@toolpad/core/react-router/index.js:1
export * from "./ReactRouterAppProvider.js";
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (node:internal/modules/cjs/loader:1378:20)
    at Module._compile (node:internal/modules/cjs/loader:1428:41)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1104:12)
    at cjsLoader (node:internal/modules/esm/translators:346:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:286:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
    at ModuleLoader.import (node:internal/modules/esm/loader:473:24)
    at nodeImport (/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:53058:15)

12:01:36 AM [vite] Internal server error: Unexpected token 'export'

Should I open a separate issue?

A separate issue would be very helpful, given this one focussed more on the examples in our docs. Thank you 🙏🏻