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

build(components, shared-data): fix components and shared-data npm deploy actions #15180

Merged
merged 8 commits into from
May 28, 2024

Conversation

shlokamin
Copy link
Member

@shlokamin shlokamin commented May 14, 2024

Overview

Since the vite migration our npm publish github action has been publishing an unusable artifact for the following reasons:

  1. The main entry path points to the old bundle name that webpack generated
  2. We do not specify all dependencies required for consumers to use @opentrons/components, which leads to build errors when trying to import modules that don't exist
  3. Image urls configured via the new URL() constructor do not point to an asset that is bundled into the production build. This means we get an import error when a consumer builds their project because it can't find assets we reference in our code. Ex:
new URL("./images/depth/depth-plate-flat@3x.png", import.meta.url).href,

^this works fine in development, but in a production build we'll get an error like this:

ERROR in ./node_modules/@opentrons/components/lib/index.mjs 16968:15-78
Module not found: Error: Can't resolve './images/depth/depth-plate-v@3x.png' in '/Users/shlokamin/Desktop/workspace/my-app/node_modules/@opentrons/components/lib'

It turns out that the way vite interprets:

const FOOTPRINT_RELATIVE_PATH = './images/dimensions/footprint@3x.png'
new URL(FOOTPRINT_RELATIVE_PATH, import.meta.url)

// versus

new URL('./images/dimensions/footprint@3x.png', import.meta.url)

is... different. Vite does not like the first option, but it is okay with the second option. tbh im confused as to why, since the calls to the URL constructor are evaluated immediately (not lazily).

Anyways, this PR fixes these issues.

Review Requests

Try out version 0.1.6-alpha.7 of the components library and see if it works for y'all

Risk assessment

Low/medium

@shlokamin shlokamin force-pushed the compponents-add-missing-deps branch from 0ad90a7 to a06812a Compare May 16, 2024 16:57
@shlokamin shlokamin marked this pull request as ready for review May 17, 2024 20:55
@shlokamin shlokamin requested review from a team as code owners May 17, 2024 20:55
@shlokamin shlokamin requested review from TamarZanzouri and y3rsh and removed request for a team May 17, 2024 20:55
@shlokamin shlokamin changed the title build(components): fix main file path and add missing dependencies build(components): fix components npm deploy action May 17, 2024
@shlokamin shlokamin changed the title build(components): fix components npm deploy action build(components, shared-data): fix components and shared-data npm deploy actions May 20, 2024
Copy link
Member

@sfoster1 sfoster1 left a comment

Choose a reason for hiding this comment

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

Looks good to me. What a weird constraint

Copy link
Contributor

@TamarZanzouri TamarZanzouri left a comment

Choose a reason for hiding this comment

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

LGTM and works when importing! sorry i forgot to approve!

Copy link
Member

@b-cooper b-cooper left a comment

Choose a reason for hiding this comment

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

🥇

@shlokamin shlokamin merged commit 84e83ec into edge May 28, 2024
51 checks passed
@shlokamin shlokamin deleted the compponents-add-missing-deps branch May 28, 2024 13:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants