Tree shaking

[kevinpastor]

Is it possible that this plugin remove the possibility to do proper tree shaking on dependency?

After using @next/bundle-analyzer to analyze the output bundle of the build, it seems like @mui/material is completly bundled in a chunk even though I'm only using parts of it.

[coder-xiaotian]

I get it! Thank you for your feedback. I need some time to fix this issue, and if you are interested, you can also try how to fix it.

[coder-xiaotian]

@kevinpastor I don't know why the use-client plugin broke the tree shaking, but I found a another way to fix it.
config the "modularizeImports"

const nextConfig = {
  modularizeImports: {
    "@mui/material": {
      transform: "@mui/material/{{member}}"
    },
  },
  experimental: {
    swcPlugins: [
      [
        "use-client",
        {
          include: ["@mui/material"],
        },
      ],
    ],
  },
};

If you used import {createTheme, ThemeProvider} from @mui/material, you need to modify to this import { createTheme, ThemeProvider } from "@mui/material/styles";

[kevinpastor]

This ended up being the solution to my problem.

It seems like @mui/material latest update adds the "use-client" directive to all of its components. I'll be updating my project to that version making the use of your plugin unnecessary for me.

I think you should advertise your plugin in a broader way because at first sight it seems like it's only useful for @mui. Great good though and thanks for the support!

[coder-xiaotian]

This is an excepted behavior of next.js, see here vercel/next.js#52679 (comment)