leonardo Package module import not working

Package module import not working

Open NateBaldwinDesign opened this issue 10 months ago • 9 comments

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

Create a project (eg. React web app)
Build & run your project (eg yarn dev / yarn start)
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)
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

Sep 06 '23 20:09 NateBaldwinDesign

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

Sep 19 '23 14:09 GarthDB

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.

Sep 20 '23 17:09 NateBaldwinDesign

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/[email protected]/

Sep 20 '23 21:09 GarthDB

Hi, any progress on this? For me, the latest version that works is @adobe/[email protected]

Oct 14 '23 04:10 C3PablO

Hello, any progress on this?

Nov 29 '23 16:11 ZRogerson

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

Dec 18 '23 00:12 jLynx

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^1 versions 1.0.0-alpha.14 to 1.0.0-alpha.17 because those are all broken.