Cannot run application when "ui" is using @mui/material

[AleksandrukTad]

Hello,
First of all I would like to say that this lib looks amazing and I would like to thank you guys for that.

I want from my "ui" monorepo package to extend @mui/material. When I import @mui/material to "ui" package (and to web as well), application does not run.

This is the error:

../../packages/ui/Button.tsx
Module parse failed: Unexpected token (4:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| export const Button = () => {
>   return <MuiButton>Boop</MuiButton>;
| };
|

This is the repo: https://github.com/AleksandrukTad/turborepo-mui

I would really appreciate help!

[nareshbhatia]

@AleksandrukTad, I ran into the same exact issue when I added the mui dependencies to the ui project. To resolve this, I deleted package-lock.json and node_modules from all directories in the repo and did a clean build. That resolved the issue. I can't explain why, but it did!!!

[leonardomerlin]

I ended with a similar error message after adding @org to the packages (including ui, ie. @org/ui).

The problem was that I forget to update the next.config.js with the correct package name:

const withTM = require("next-transpile-modules")(["@org/ui"]);

[phgoff]

Thank you. I added my package to the array and it works perfectly.

[yakovmeister]

anyone got any solutions for this?

[cgriffin35]

npm install next-transpile-modules

then in the app's next.config.js file

const withTM = require("next-transpile-modules")(["UI"]);

module.exports = withTM({
  reactStrictMode: true,
  experimental: {
    transpilePackages: ["ui"],
  },
});

[GalvinGao]

It seems that the official create-turbo@latest is broken.