material-color-utilities
material-color-utilities copied to clipboard
Feature request: add "require" to package.json exports list
This package is made as an ESM module.
However, it is possible to use ESM modules in a CJS environment by using dynamic imports.
But when I tried to import this package with a dynamic import I got this error:
Module not found: Error: Package path . is not exported from package /web/workspace/node_modules/@material/material-color-utilities (see exports field in /web/workspace/node_modules/@material/material-color-utilities/package.json)
This is because "require" (what CJS environments look for) is not listed in the exports of package.json (currently there's only "types" and "import").
I suggest to add "require" to the "exports" field in package.json so this library can work in CJS environments for those that are not quite ready to switch everything over to ESM yet.
package.json
"exports": {
".": {
"types": "./index.d.ts",
"import": "./index.js",
"require" : "./index.js"
}
},
With that in place it runs perfectly on node.js and in the browser in my CJS setup. I'm getting color schemes etc.
I Got the same issue, how to fix it?
@alicercedigital in node_modules
find the package.json
for this library and add
"exports": {
".": {
"types": "./index.d.ts",
"import": "./index.js",
+ "require" : "./index.js"
}
},
It will probably be at path_to_your_project/node_modules/@material/material-color-utilities/package.json
Although one of the developers here recommends that you try to move your project to ESM if possible https://github.com/material-foundation/material-color-utilities/issues/85#issuecomment-1501147847 There will likely be a specific migration guide out there for the packages you're using in case you run into any difficulty, but in most cases using CJS packages in ESM code is much easier than using ESM packages in CJS code.
I hope we could add the 'require' because If we use this project in a tailwind config file, then we need to manual add the require in the exports. I'm using this package in two different projects with tailwind and this is causing a lot of issues when we need to deploy.
It's a bit surprising that await import()
in the CJS environment also reads "require"
instead of "import"
.
For this case, I would recommend adding "default"
instead of "require"
because it is not exported in CJS format.
From the Node.js Documentation:
"require"
- matches when the package is loaded viarequire()
. The referenced file should be loadable withrequire()
although the condition matches regardless of the module format of the target file. Expected formats include CommonJS, JSON, and native addons but not ES modules asrequire()
doesn't support them. Always mutually exclusive with"import"
.
"exports": {
".": {
"types": "./index.d.ts",
"import": "./index.js",
+ "default" : "./index.js"
}
},
I hope we could add the 'require' because If we use this project in a tailwind config file
@alicercedigital TailwindCSS now supports the use of ESM config (even TS) and it is worth trying to migrate.
Tested, and default
works great. Will update. thank you!
Fixed on latest, please test!