Transpile @mui/material with this module

[pereriksson]

• [X] I HAVE READ THE FAQ AND MY PROBLEM WAS NOT DESCRIBED THERE
• [X] I WILL GIVE 10$ TO CHARITY IF MY SOLUTION WAS ACTUALLY IN THE README/FAQ - Definitely!

Are you trying to transpile a local package or an npm package? npm package @mui/material.

Describe the bug I have successfully used next-transpile-modules to transpile all my imported modules using arrow functions to increase compatibility with older devices. There is one module that won't budge - @mui/material. It has a @mui/material/umd/material-ui.production.min.js that contains arrow-functions that are propagated all the way out to the browser. Any help on this is appreciated.

To Reproduce If anyone request a fully functional next.js demo repo I will provide one.

Expected behavior A clear and concise description of what you expected to happen.

Setup

• Next.js version: 12.3.4
• next-transpile-modules version: 10.0.1
• Node.js version: v18.8.0
• npm/yarn version: 8.18.0 / 1.22.19
• Operating System: macOS
• Webpack 4 or 5: Not installed

const withTM = require('next-transpile-modules')([
    '@emotion/cache',
    '@emotion/styled',
    '@mui/material',
    '@mui/system',
    '@emotion/styled',
    '@mui/utils',
    'contentful',
    '@mui/base'
]);

const moduleExports = {
  experimental: {
    scrollRestoration: true,
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  }
};

module.exports = withTM(moduleExports);

Thanks a lot for your help. And I will definitely donate 10$ to charity if anyone can help.

[martpie]

Hello, do you need to transpile arrow functions due to IE11?

[pereriksson]

Hey, we have some customers using iPads where Safari hasn't been updated for 5 years :) We also hear some issues from other customers so we guess it might be the site not running properly.

[martpie]

So, as the README says, this plugins serves two purposes:

• code transpilation from local packages (think: a monorepo with a styleguide package)
• code transpilation from NPM modules using ES6 imports (e.g lodash-es)

It is not meant as a way to make the bundle compatible with older browers.

Also, this package is half-deprecated and on what I would call "passive-life-support" only: I'm open to PR but I do not plan to work on this plugin anymore. see The End and the front note in the readme.

Ignoring the fact that safari is the new IE, and your customers should definitely update their devices (without mentioning Next.js only supports Safari 12+), I would recommend checking if the transpilePackages option works for you (I doubt it).

On a side note, I worked with customers with crazy requirements, so I know how frustrating it is to receive this kind of answer, but believe, supporting older browsers is never worth it, and you'd better tell your management to let go older devices, for your own sanity.

[martpie]

you'd better tell your management

(there are plenty of good ways to convince management to let go those (imho) stupid requirements, the best one is: "we cannot guarantee the security of customer information on older browsers due to security vulnerabilities"). I have a bunch of other arguments in case you need some.

😈