Error [ERR_REQUIRE_ESM]: require() of ES Module

[cogniclickadmin]

Describe the bug Using the component causes the following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /myapp/node_modules/mui-file-input/node_modules/pretty-bytes/index.js from /myapp/node_modules/mui-file-input/dist/mui-file-input.umd.js not supported.

Instead change the require of index.js in /myapp/node_modules/mui-file-input/dist/mui-file-input.umd.js to a dynamic import() which is available in all CommonJS modules.

To Reproduce Install the package import MuiFileInput Use the MuiFileInput in a page/component

Desktop (please complete the following information):

• Mac OS 13.3.1 (a)
• Chrome
• Version 113.0.5672.126

Additional context Changing the require in dist to import() fixed it.

[WenLonG12345]

I have the same issue as well. Any solution?

[randbytes]

Exactly same problem appeared this week.

[EndlessDev2016]

I got the same errors, so i tried it.

• Change the module option in tsconfig.json below.

  {
     "compilerOptions": {
       ...
       "module": "CommonJS" // change 'esnext' to 'CommonJS'
  }

My team's Next.js project loads dynamic import components on page load. But in this case, module in tsconfig.json is automatically changed to CommonJS → esnext. (same errors...)

• The MuiFileInput component also uses "dynamic import" to load the component.

const MuiFileInput = Dynamic(
  () => import("mui-file-input").then((d) => d.MuiFileInput),
  {
    SSR: false,
  },
);

it worked fine without any errors. :)

[viclafouch]

Let me fix that

[viclafouch]

Fixed in 2.0.5