Package module import not working

[NateBaldwinDesign]

Description

When installing Leonardo into a new React project, basic imports fail to load and return an error.

Tried with both create-react-app and vite with same results. Vite error report gave clearest possible cause of the issue:

Internal server error: Failed to resolve entry for package "@adobe/leonardo-contrast-colors". The package may have incorrect main/module/exports specified in its package.json.

Steps to reproduce

1. Create a project (eg. React web app)
2. Build & run your project (eg yarn dev / yarn start)
3. Import Leonardo into App.js using any of the import options available (* as Leo, {Color, Theme}, etc) from @adobe/leonardo-contrast-colors (as documented here)
4. Observe an error in your terminal

Expected behavior

Expect the package to be imported using the import statements here

Screenshots

Leonardo package and version

@adobe/leonardo-contrast-colors version 1.0.0-alpha.17

Environment

• Browser(s) and OS(s):
• MacOS: 13.4.1 (22F82)
• Browser: Version 116.0.5845.96 (Official Build) (arm64)
• Node: v16.19.1

Additional context

[GarthDB]

@NateBaldwinDesign did you add the package to your project? The first step in that documentation you mentioned says to install the package with npm i @adobe/leonardo-contrast-colors. If you're using yarn the command is yarn add @adobe/leonardo-contrast-colors. Verify that the package is listed in your dependencies in your package.json file.

[NateBaldwinDesign]

Yes, I have it installed as documented. I am going to try a few other things to see if I can replicate the problem on a different computer to verify that it's not just some system issue.

I have confirmed that it is not working properly on a new project as well as previous projects that have worked in the past.

[GarthDB]

I think I found the problem. The files are getting named with the .mjs extension instead of .js, which is messing everything up, and the dist director seemed to go missing around alpha.15. I'll look to see if I can republish it with the correct extension. https://unpkg.com/browse/@adobe/leonardo-contrast-colors@1.0.0-alpha.17/

[C3PablO]

Hi, any progress on this? For me, the latest version that works is @adobe/leonardo-contrast-colors@1.0.0-alpha.13

[ZRogerson]

Hello, any progress on this?

[jLynx]

As a temporary fix, you can use this command to install it via NPM. It works fine in TS now with this command.

npm install "https://gitpkg.now.sh/adobe/leonardo/packages/contrast-colors?main"

This just create an NPM package from the main branch in the correct subfolder (Using the site https://gitpkg.vercel.app/)

[duanwilliam]

extensions being changed to .mjs was done in #166 (between 1.0.0-alpha.13 and 1.0.0-alpha.14), and extensions were reverted back among the changes from #207, but version 1.0.0-alpha.18 has not been published to npm, and either way those changes aren't in the changelog for 1.0.0-alpha.18.
once a new working version is published to the registry i'd probably recommend deprecating¹ versions 1.0.0-alpha.14 to 1.0.0-alpha.17 because those are all broken.

Footnotes

1. https://docs.npmjs.com/cli/v10/commands/npm-deprecate ↩

[Tyler-V]

Bump :) same issue workaround is good but this is not a good sign for this library I stumbled upon

[GarthDB]

I'm working to release a fix. I'll close this issue when I get it out.

[jonathanwillisdesign]

Any progress?

[VincentGarreau]

Any update? 🙏 I'm using the 1.0.0-alpha.13 version but I would like to use the latest :)

[GarthDB]

This has been fixed with the latest release. If any problems with the latest package persist, let me know.