javascriptreactjsmaterial-uivite

mui react example / template failing to run

I'm testing MUI components, and I wanted to give their example app with vite / TS a spin with their Dashboard template. The README in the Dashboard says to spin up one of the example apps, copy the Dashboard directory into it and you're ready to go.

I cloned the MUI repo from https://github.com/mui/material-ui/ copied the examples/material-ui-vite-ts directory to a new directory on my dev machine, ran npm i then npm run dev. So far so good.

I then copied the dashboard and shared-theme directories into my new project, re-ran npm run dev and I'm getting errors:

X [ERROR] The JSX syntax extension is not currently enabled    

src/dashboard/Dashboard.js:28:4:
  28 │     <AppTheme {...props} themeComponents={xThemeComponents}>
     ╵     ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

I'm seeing in the Dashboard/components/ directory that each .tsx component has a .js counterpart, which I don't understand.

enter image description here

The issue doesn't seem to be documented in the README and I'm not sure how to proceed so that the build will use the tsx file rather than the js.

Solution

  • I followed your instructions and didn’t get the same error, but I understand what you meant.

    Feel free to tell me if I did something diffent.

    1. Cloned the Vite.js in TypeScript example repo from gitHub
    2. Copied dashboard and shared-theme folders from gitHub and pasted them into the src folder

    Here is solution

    1. Removed all .js files from the dashboard and shared-theme folders.
    2. Imported Dashboard into main.tsx
    import App from "./dashboard/Dashboard";

    And it worked! So you need to remove all .js files.