adobe/leonardo

Package module import not working

NateBaldwinDesign opened this issue · 12 comments

NateBaldwinDesign commented

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

image

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 commented

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

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 commented

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/

  • 👍1
C3PablO commented

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

ZRogerson commented

Hello, any progress on this?

jLynx commented

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/)

  • 👍1
duanwilliam commented

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 deprecating1 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 ↩

  • 👍3
Tyler-V commented

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

GarthDB commented

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

  • 👍2
  • 😄1
  • 🎉4
  • 🚀1
  • 👀3
jonathanwillisdesign commented

Any progress?

VincentGarreau commented

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

GarthDB commented

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