How is this supposed to be used? All ways of importing don't work.

[EvokerKing]

Not a single way I have tried importing has worked.

• Node.js says it's ESM so it can't use require() but doesn't recognize import statements
• Using with normal JS causes import errors outside of modules
• Using it in a JS type=module file causes a CORS error
• Browserify returns errors claiming it doesn't exist

I don't see any instructions on this package outside of snippets of code on NPM with no context. How is it being used?

[kenzaflow]

excuse me, but how TF using a JS as module will throw CORS in server?????????????

[EvokerKing]

@kenzaflow I meant using a cdn to import it. I do have it working now in Astro, but I have no clue if that means it works elsewhere.

[shadow1349]

I've also had the issue with esmodule. I tried this at the top of the file

import * as material from '@material/material-color-utilities'

As well as a dynamic import

const material = await import('@material/material-color-utilities');

I did try to use require as well.

const material = await require('@material/material-color-utilities');

All of these give me the following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module node_modules/@material/material-color-utilities/index.js from path/to/code.ts not supported.
Instead change the require of index.js in path/to/code.ts to a dynamic import() which is available in all CommonJS modules.

Here is my package.json

{
  "name": "my-code",
  "version": "0.0.1",
  "dependencies": {
    "@ctrl/tinycolor": "^4.0.3",
    "@material/material-color-utilities": "^0.3.0",
    "@nx/devkit": "19.6.1",
    "axios": "1.7.5",
    "tslib": "^2.3.0",
    "webpack": "^5.90.3"
  },
  "type": "module",
  "main": "./src/index.js",
}

I also tried changing the type to commonjs and no luck.

[shadow1349]

I created a reproduction of the issue: Here is a basic reproduction of the issue https://github.com/shadow1349/replicate-material-color-error

[PhilFlash]

@shadow1349
In your basic reproduction, in tsconfig.json, set:

"target": "ES2022"
...
"module": "preserve"

for preserve, see https://devblogs.microsoft.com/typescript/announcing-typescript-5-4/#support-for-require-calls-in---moduleresolution-bundler-and---module-preserve

and all is ok.

[shadow1349]

@PhilFlash that does work. I made that change in my actual repo and it doesn't work. I've made a closer recreation of my actual repository in a different branch: https://github.com/shadow1349/replicate-material-color-error/tree/test-with-nx.

This is the file I am working with: https://github.com/shadow1349/replicate-material-color-error/blob/test-with-nx/tools/src/generator.ts

If you run npm install and then run npx nx generate tools:test-material --name=test you should get the error.

I have changed the module to preserve and target to es2022 in tsconfig.base as well as the project tsconfig but it's still throwing the same error.

Thanks for your help, I appreciate it!

[EvokerKing]

I have it working for me now using Astro.js so its no longer an issue for me but I am not entirely sure what went wrong...