Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(vite): getting the dist build to work correctly with vite again #6452

Merged
merged 1 commit into from Feb 10, 2023

Conversation

eriklharper
Copy link
Contributor

@eriklharper eriklharper commented Feb 9, 2023

Related Issue: #6419

Summary

This fixes an issue with lazy-loading components when using Calcite Components in a Vite project with the dist Stencil output target.

Here's how I verified this fix locally:

  1. Clone the vite example from calcite-components-examples
  2. Run npm install
  3. Replace the source code in main.js with:
import { defineCustomElements } from "@esri/calcite-components/dist/loader";
defineCustomElements(window);

import "@esri/calcite-components/dist/calcite/calcite.css";
  1. Checkout this branch In the local copy of calcite, run npm run build to generate the new dist build from the updated stencil configuration.
  2. Then run npm link from within calcite-components
  3. Back in the vite project, run the command npm link @esri/calcite-components which will symlink the calcite dependency in npm to resolve file path imports to the locally-installed calcite-components instance instead of the npm-downloaded copy.
  4. Run npm run dev from within the vite project.
  5. Open the browser at the provided URL and you should see a calcite button and banana icon and an active loader component on the page with no errors in the browser console.

@eriklharper eriklharper requested a review from a team as a code owner February 9, 2023 23:03
@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Feb 9, 2023
@benelan
Copy link
Member

benelan commented Feb 10, 2023

Not sure what I'm doing wrong but it worked for me yesterday when doing npm link, and now it won't work on 1.0.5 or with npm link on this branch lol. But yeah according to the doc, this PR is correct. My bad

Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@jcfranco
Copy link
Member

My bad too for not catching it in the review. @eriklharper @geospatialem Thanks for getting this in so quickly.

@eriklharper
Copy link
Contributor Author

eriklharper commented Feb 10, 2023

Not sure what I'm doing wrong but it worked for me yesterday when doing npm link, and now it won't work on 1.0.5 or with npm link on this branch lol. But yeah according to the doc, this PR is correct. My bad

No problem man! I had some issues reproing it locally too, I had to completely nuke node_modules, reinstall deps, then do npm link on CC to get it to repro consistently. After several cycles of doing that I saw the change consistently making a difference, but yeah it was confusing because changing the stencil config, and rebuilding the symlinked calcite repo alone wasn't sufficient to show the end result in the vite dev server.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants