Module not found: Error: Can't resolve '@mui/material/Button' in version 4.0.1

[JonesJugHead]

Describe the bug
When attempting to run our project using version 4.0.1 of mui-color-input, we encounter the following error:

Module not found: Error: Can't resolve '@mui/material/Button' in 'C:\Repo\Sparkle\krigis-frontend\node_modules\mui-color-input\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/Button' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

To Reproduce
Steps to reproduce the behavior:

1. Upgrade to mui-color-input version 4.0.1.
2. Run the project.

Expected behavior
The project should compile and run without errors, as it does with version 4.0.0 of mui-color-input.

Additional context
We are currently using the following MUI versions:

"@mui/icons-material": "^5.15.10",
"@mui/lab": "^5.0.0-alpha.165",
"@mui/material": "^5.15.10",
"@mui/system": "^5.15.9",
"@mui/x-data-grid": "^6.19.4",
"@mui/x-data-grid-pro": "^6.19.4",
"@mui/x-date-pickers": "^7.0.0",
"@mui/x-date-pickers-pro": "^7.0.0",

Version 4.0.0 of mui-color-input works without any issues.

[ShotaTsuru]

Additional Consideration
We suspect that this issue may be related to our recent migration to pnpm. pnpm has a different approach to dependency resolution, and especially in a strict EcmaScript Module environment, it might affect how module imports are handled.

Specifically, pnpm requires that import statements include the file extension, so if there is an error in the import statements, it can lead to issues with module resolution.

I apologize if this is off the mark, but we thought it would be relevant to mention this, as it may help in diagnosing the problem further.

[JonesJugHead]

From my side, we are only using NPM for the project, not pnpm or Yarn.

[ShotaTsuru]

@JonesJugHead

From my side, we are only using NPM for the project, not pnpm or Yarn.

Thank you for your response. I apologize for any confusion.

I wanted to point out that the issue arose after the introduction of pnpm in the update of mui-color-input with the following commit: 4713509.

I appreciate your understanding as we clarify this matter.

[sebalvarado]

Also having this issue with yarn and node 20, any ideas on how to fix?

[viclafouch]

Hello !

Could you try with the last version plz ? (4.0.2)

Thanks !

[sebalvarado]

Still getting this error!

#32 79.09 Creating an optimized production build ...
#32 221.8 ✓ Compiled successfully
#32 221.8 Collecting page data ...
#32 232.7 Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/app/node_modules/@mui/material/Button' is not supported resolving ES modules imported from /app/node_modules/mui-color-input/dist/mui-color-input.es.js
#32 232.7 Did you mean to import "@mui/material/node/Button/index.js"?
#32 232.7 at finalizeResolution (node:internal/modules/esm/resolve:259:11)
#32 232.7 at moduleResolve (node:internal/modules/esm/resolve:933:10)
#32 232.7 at defaultResolve (node:internal/modules/esm/resolve:1169:11)
#32 232.7 at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
#32 232.7 at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
#32 232.7 at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:227:38)
#32 232.7 at ModuleWrap. (node:internal/modules/esm/module_job:87:39)
#32 232.7 at link (node:internal/modules/esm/module_job:86:36) {
#32 232.7 code: 'ERR_UNSUPPORTED_DIR_IMPORT',
#32 232.7 url: 'file:///app/node_modules/@mui/material/Button'
#32 232.7 }
#32 232.7
#32 232.7 > Build error occurred
#32 232.7 Error: Failed to collect page data for /tenant/[tenantName]/platform/settings
#32 232.7 at /app/node_modules/next/dist/build/utils.js:1171:15 {
#32 232.7 type: 'Error'
#32 232.7 }
#32 232.9 error Command failed with exit code 1.
#32 232.9 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
#32 ERROR: process "/bin/sh -c yarn build" did not complete successfully: exit code: 1

[28/28] RUN yarn build:
232.7 url: 'file:///app/node_modules/@mui/material/Button'
232.7 }
232.7
232.7 > Build error occurred
232.7 Error: Failed to collect page data for /tenant/[tenantName]/platform/settings
232.7 at /app/node_modules/next/dist/build/utils.js:1171:15 {
232.7 type: 'Error'
232.7 }
232.9 error Command failed with exit code 1.
232.9 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[viclafouch]

What's your node version ?

[sebalvarado]

We are trying to run it on Node v20.15.1

#14 [10/28] RUN node --version
#14 0.193 v20.15.1
#14 DONE 0.2s
#15 [11/28] RUN npm --version
#15 0.327 10.8.0

Any ideas

[JonesJugHead]

Hello !

Could you try with the last version plz ? (4.0.2)

Thanks !

Hello @viclafouch

I have tried the version 4.0.2 of mui-color-input with the following setup:

Node: 20.12.2

• @mui/icons-material: ^5.15.10
• @mui/lab: ^5.0.0-alpha.165
• @mui/material: ^5.15.10
• @mui/system: ^5.15.9
• @mui/x-data-grid: ^6.19.4
• @mui/x-data-grid-pro: ^6.19.4
• @mui/x-date-pickers: ^7.0.0
• @mui/x-date-pickers-pro: ^7.0.0
• mui-color-input: ^4.0.2
• typescript : ^4.6.3

Upon testing, I encountered the following error:

Module not found: Error: Can't resolve '@mui/material/Button' in 'C:\project\node_modules\mui-color-input\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/Button' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e.g., a module with a JavaScript MIME type, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

To give you an idea, here is how I use your component (I simplified the code):

import { MuiColorInput } from 'mui-color-input';
import { useState } from 'react';

const ColorComponent = () => {
  const [formData, setFormData] = useState<{
    colorMode: 'default' | '3-colors';
    minColor: string;
    maxColor: string;
    step: {
      color: string;
      value: number;
    };
    scale: 'linear' | 'log';
  }>({
    colorMode: 'default',
    minColor: '#05ff00ff',
    maxColor: '#ff0020ff',
    step: {
      color: '#ffffffff',
      value: 50,
    },
    scale: 'linear',
  });

  const handleColorChange = (color: string, type: 'min' | 'max' | 'step') => {
    if (type !== 'step') {
      setFormData((prev) => ({ ...prev, [`${type}Color`]: color }));
    } else {
      setFormData((prev) => ({ ...prev, step: { ...prev.step, color: color } }));
    }
  };

  return (
    <>
      <MuiColorInput
        PopoverProps={{ sx: { zIndex: 10003 } }}
        size="small"
        disabled={formData?.colorMode === 'default'}
        label={`Minimum color`}
        format="hex8"
        value={
          formData?.colorMode === 'default'
            ? formData?.scale === 'log'
              ? '#fff5f0ff'
              : '#f7fbffff'
            : formData?.minColor
        }
        onChange={(color) => handleColorChange(color, 'min')}
      />

      {formData?.colorMode === '3-colors' && (
        <MuiColorInput
          PopoverProps={{ sx: { zIndex: 10003 } }}
          size="small"
          label={`Step color`}
          format="hex8"
          value={formData?.step.color}
          onChange={(color) => handleColorChange(color, 'step')}
        />
      )}

      <MuiColorInput
        PopoverProps={{ sx: { zIndex: 10003 } }}
        size="small"
        disabled={formData?.colorMode === 'default'}
        label={`Maximum color`}
        format="hex8"
        value={
          formData?.colorMode === 'default'
            ? formData?.scale === 'log'
              ? '#67000dff'
              : '#08306bff'
            : formData?.maxColor
        }
        onChange={(color) => handleColorChange(color, 'max')}
      />
    </>
  );
};

export default ColorComponent;

If you need more information, please let me know

[sebalvarado]

I was able to fix the error, i am using Next.js but I forgot to add ```/** @type {import('next').NextConfig} */
const nextConfig = {
transpilePackages: ['mui-color-input'],
// your config
}

module.exports = nextConfig```

to my nextConfig.

@JonesJugHead Are you using Next.js? Maybe this will fix it for you!

[JonesJugHead]

@sebalvarado I'm using plain React, so no, I'm not using Next.js on the project that has this library

[kraffi83]

Hy everybody,

Are there any new findings?

I have the same issue with Version 4.0.1 and 4.0.2

Node v20.10.0
NPM 10.5.1

"@mui/icons-material": "6.1.6",
"@mui/material": "6.1.6",
"@mui/x-date-pickers": "7.22.1",
"mui-color-input": "4.0.0",
"webpack": "5.96.1",
"typescript": "5.6.3",

with Version 4.0.0 everything is fine.

Greetings

[JonesJugHead]

Hi @viclafouch,

I investigated this error. To start, I don't have this issue with the latest version on a new Vite/React-TS app.

However, I do experience the issue on my React project which was initialized 5 years ago and maintained by our development team. I looked at the commits between version 4.0.0 and version 4.0.1, and I identified this commit: 8351321
.

I reverted it on the local package I cloned, and I linked this package to my old project. I no longer have any issues and can use version 4.0.2 without this commit.

What exactly does this commit contain? Is it really necessary? I suspect that the addition of "type": "module" in the package.json is causing the issue. What do you think? Could you take the time to re-examine this commit?

Thank you.

[viclafouch]

Hello @JonesJugHead !

I added this because this package is an ESM package only. So if you try to use require to import this package, it will not work.

You can find more information here : https://stackoverflow.com/questions/61401475/why-is-type-module-in-package-json-file

Also, can I have your node version, and what bundler u using plz ?