module not found with npm

[surrealroad]

I can't get this to load with npm

I did:
npm i color-elements
Then in my file:

<script>
import { ColorPicker } from 'color-elements';
</script>
<ColorPicker space="oklch" color="oklch(60% 30% 180)"></ColorPicker>

I keep getting error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/jack/Development/app/node_modules/color-elements/node_modules/nude-element/src/Element.js' imported from /Users/jack/Development/app/node_modules/color-elements/src/color-picker/color-picker.js
    at finalizeResolution (node:internal/modules/esm/resolve:260:11)
    at moduleResolve (node:internal/modules/esm/resolve:921:10)
    at defaultResolve (node:internal/modules/esm/resolve:1132:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:557:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:526:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:249:38)
    at ModuleJob._link (node:internal/modules/esm/module_job:126:49) {
  code: 'ERR_MODULE_NOT_FOUND',
  url: 'file:///Users/jack/Development/app/node_modules/color-elements/node_modules/nude-element/src/Element.js'

Any help would be appreciated

[DmitrySharabin]

Hey @surrealroad, thank you for reporting the issue. Sorry it took us that long to answer you.

This line in our code is the reason you face the issue:

elements/src/common/color-element.js

Line 1 in 3539e6f

import NudeElement from "../../node_modules/nude-element/src/Element.js";

Even though all dependencies are successfully downloaded, they are located in the root node_modules folder, not inside color-elements/node_modules, where our package attempts to find them.

When the elements are served from our website, we solve this issue with redirects. However, when they are used as an NPM package, there are no redirects, and since we don't use any bundlers before publishing the package on NPM, the paths stay as-is. As a result, the needed modules are not found.

@LeaVerou, I can see two possible solutions for now:

• we can add a postinstall npm script to run npm install inside color-elements after our package is installed
• or we can use a bundle (e.g., Vite) to build the package before publishing it on NPM

What do you think?