material-color-utilities icon indicating copy to clipboard operation
material-color-utilities copied to clipboard

Feature request: add "require" to package.json exports list

Open flyon opened this issue 1 year ago • 6 comments

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.

flyon avatar Apr 10 '23 12:04 flyon

I Got the same issue, how to fix it?

alicercedigital avatar Apr 18 '23 19:04 alicercedigital

@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.

WillsterJohnson avatar Apr 21 '23 16:04 WillsterJohnson

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.

alicercedigital avatar Apr 22 '23 21:04 alicercedigital

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 via require(). The referenced file should be loadable with require() 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 as require() 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.

kwaa avatar Apr 23 '23 06:04 kwaa

Tested, and default works great. Will update. thank you!

rodydavis avatar Apr 25 '23 17:04 rodydavis

Fixed on latest, please test!

rodydavis avatar Apr 27 '23 15:04 rodydavis