switch node package manager yarn -> pnpm #18571

koji · 2025-06-09T21:27:12Z

Overview

switching from yarn V1 to pnpm.

speed up the setup process

Done in 18.4s
/Applications/Xcode.app/Contents/Developer/usr/bin/make -C app-shell setup
pnpm rebuild
../node_modules/.pnpm/[email protected]/node_modules/usb: Running install script, done in 804ms
../node_modules/.pnpm/@[email protected]/node_modules/@serialport/bindings-cpp: Running install script, done in 649ms
../node_modules/.pnpm/[email protected]/node_modules/aws-sdk: Running postinstall script, done in 61ms
/Applications/Xcode.app/Contents/Developer/usr/bin/make -C app-shell-odd setup
pnpm rebuild
Execution time: 49.08s

pnpm version

10.22.0 since components-test is using that version

package.json in each project

some package.jsons got update because pnpm is stricter than yarn v1 and no hoisting so need to align with the versions and add a few opentrons packages to avoid importing errors

tests

app-shell/app-shell-odd
a few test using import somehing from electron without mocking so needed to add mock to pass tests
components
needed to commnet out a few styling test due to path issues (this will be fixed after merge this pr)

for e2e test errors

protocol-designer: this is happening on edge too
labware-library: Josh is preparing to switch from Cypress to Playwright.
dev server quick start
can update Storybook to introduce visual testing

close AUTH-2557

Test Plan and Hands on Testing

install pnpm v10 via npm/asdf/mise etc
v10.22.0
checkout this branch
run make teardonw-js && make setup-js
test commands in the following comment
smoke test

Changelog

Review requests

Risk assessment

mid-high since switching the node package manager

koji · 2025-06-09T22:29:32Z

catch up the following
Dependencies are not packaged by electron-builder when using pnpm electron-userland/electron-builder#6289 (comment)
951daa7 worked but 7a9cdcf didn't work any more. probalby there would be the compatibility issue between pnpm and the electron-rebuild.

koji · 2025-11-09T03:45:08Z

SyntaxColoring

Heroic! Thank you!

I have only minor questions and comments. Otherwise, this LGTM once we figure out those last few things that are failing in CI.

SyntaxColoring · 2025-12-01T15:23:29Z

components/src/atoms/Toast/__tests__/ODDToast.test.tsx

+    // const successToast = screen.getByTestId('Toast_success')
+    // expect(successToast).toHaveStyle(`color: #04aa65
+    // background-color: ##baffcd`)


Are these still meant to be commented out?

SyntaxColoring · 2025-12-01T15:23:38Z

components/src/atoms/Toast/__tests__/Toast.test.tsx

+    // ToDo temporary disable style checks due to styled-components issues
+    // const successToast = screen.getByTestId('Toast_success')
+    // expect(successToast).toHaveStyle(`color: #04aa65
+    // background-color: #f3fffa`)


SyntaxColoring · 2025-12-01T15:24:33Z

components/Makefile

+	$(MAKE) -C .. test-js-components tests=$(tests) test_opts="$(test_opts)" cov_opts="$(cov_opts)"
 	make -C .. test-js-components tests=$(tests) test_opts="$(test_opts)" cov_opts="$(cov_opts)"


This looks like an accidentally duplicated line?

Suggested change

$(MAKE) -C .. test-js-components tests=$(tests) test_opts="$(test_opts)" cov_opts="$(cov_opts)"

make -C .. test-js-components tests=$(tests) test_opts="$(test_opts)" cov_opts="$(cov_opts)"

$(MAKE) -C .. test-js-components tests=$(tests) test_opts="$(test_opts)" cov_opts="$(cov_opts)"

SyntaxColoring · 2025-12-01T15:29:24Z

...l-designer/src/components/organisms/SelectLabwareModal/__tests__/SelectLabwareModal.test.tsx

+  // Note temporarily skip
+  it.skip('renders an empty slot with all the labware options', () => {


Are these skips still meant to be in here?

SyntaxColoring · 2025-12-01T15:32:14Z

protocol-designer/vite.config.mts

      // For unknown reasons, PD whitescreens on launch unless we have this.
      dedupe: ['tslib'],
      alias: {
+        tslib: path.resolve('node_modules/tslib'),


Ouch.

This shouldn't block this PR, but this is more reason for us to figure out what's wrong that's requiring us to do all this weird tslib stuff.

i think we would need to review all vite.configs.mts to optimize the build.
the thing is that the current vite config files are just converted from webpack config for vite.

SyntaxColoring · 2025-12-03T16:35:55Z

.github/workflows/js-check.yaml

-        run: |
-          npm config set cache ${{ github.workspace }}/.npm-cache
-          yarn config set cache-folder ${{ github.workspace }}/.yarn-cache
-          make setup-js
+        uses: ./.github/actions/js/setup
+        # run: |
+        #   npm config set cache ${{ github.workspace }}/.npm-cache
+        #   pnpm config set cache ${{ github.workspace }}/.pnpm-cache
+        #   make setup-js
        # Use the if to run all the lint checks even of some fail
-        shell: bash
+        # shell: bash


Are these meant to be commented out, still?

i will remove them

SyntaxColoring · 2025-12-03T16:39:00Z

app-shell-odd/src/system-update/from-web/__tests__/release-manifest.test.ts

+          return readdir(
+            path.join(directory, 'somerandomname', contents[0].name)
+          )


What's going on with these test changes?

SyntaxColoring · 2025-12-03T16:49:57Z

components/package.json

    "styled-components": "5.3.6"
  },
  "devDependencies": {
+    "@storybook/blocks": "7.6.17",


Does @storybook/blocks belong in the top-level package.json, instead? That's where the other Storybook addons are installed. And even though we run it with make -C components dev, Storybook generally operates as a monorepo-wide thing, not a components/-specific thing.

SyntaxColoring · 2025-12-03T16:52:45Z

app-shell/vite.config.mts

+        rollupOptions: {
+          external: [
+            'electron',
+            /^node:/,
+            // Externalize problematic CommonJS modules
+            'mdns-js',
+            'is-ip',
+            'redux',
+            'reselect',
+            'lodash',
+            'lodash/unionBy',
+            'escape-string-regexp',
+            'stable',
+            'to-regex',
+          ],
+          output: {
+            format: 'cjs',
+          },
+        },


Could you explain more about what's happening here? Why are these modules problematic and how does externalizing them help?

SyntaxColoring · 2025-12-03T16:58:10Z

app-shell/src/labware/__tests__/dispatch.test.ts

-vi.mock('electron')
-vi.mock('../../config')
-vi.mock('../../dialogs')
-vi.mock('../definitions')
+vi.mock('../../config', () => ({
+  getFullConfig: vi.fn(),
+  handleConfigChange: vi.fn(),
+}))
+
+vi.mock('../../dialogs', () => ({
+  showOpenDirectoryDialog: vi.fn(),
+  showOpenFileDialog: vi.fn(),
+}))
+
+vi.mock('../definitions', () => ({
+  readLabwareDirectory: vi.fn(),
+  parseLabwareFiles: vi.fn(),
+  addLabwareFile: vi.fn(),
+  removeLabwareFile: vi.fn(),
+}))
+


It's surprising to me that this PR needed so many changes in the tests. Why would changing the package manager affect the difference between vi.mock('../../config') and vi.mock('../../config', () => ({ ... })), for example?

I don't necessarily have any problem with this, but could you explain more about what happened here?

koji · 2025-12-03T20:28:06Z

Heroic! Thank you!

I have only minor questions and comments. Otherwise, this LGTM once we figure out those last few things that are failing in CI.

spoke with Alex about pd-e2e and at this moment I can modify the e2e test to pass the error.

for ll-e2e, Josh will remove cypress from ll within 2 weeks so I'd like to wait to that.

fix primarybutton and alt primarybutton styling issue close AUTH-2559

[WIP] yarn -> pnpm

951daa7

koji added WIP JS Tech Debt labels Jun 10, 2025

koji and others added 12 commits June 11, 2025 20:11

Merge branch 'edge' into chore_change-package-manager

7a9cdcf

Merge branch 'edge' into chore_change-package-manager

3cfbf6d

fix app dev and build

6ccdd6b

Merge branch 'edge' into chore_change-package-manager

aa96280

Update pnpm-lock.yaml

78d8b4c

switch yarn to pnpm

a6a5d84

update configs for pnpm

89a0ff6

install packages for storybook

c948735

Merge branch 'edge' into chore_change-package-manager

0351c06

run make setup-js

fa1a517

install packages for odd mode

5129679

install pacakges to root

15273e1

koji added 13 commits November 10, 2025 11:26

remove yarn.lock

23702b5

Merge branch 'edge' into chore_change-package-manager

0852448

modfify lock file

dc00834

build odd

f115ede

fix import statement issues

522fae7

fix package import issue

4d60861

fix check-js errors

1bb2bcc

fix check-js errors

36a17ae

fix protocol-designer tsbuild

1171a5d

fix clean command

c07f67a

fix check-js errors

be2cbbb

fix check-js errors

345410e

fix check-js errors

abfc3d2

koji added 5 commits December 2, 2025 15:39

Merge branch 'edge' into chore_change-package-manager

0a21dad

fix electron mock errors

78bc9a2

fix electron mock issue

f63d6a8

fix electron mock issue

d479046

fix lint error

d53ef8f

koji requested review from neo-jesse and y3rsh December 3, 2025 00:09

koji added 9 commits December 2, 2025 19:22

align storybook plugin version

8fa6730

update lock file

26627da

update ll workflow

486c794

fix component-test workflow

c38b5d1

update Makefile for pnpm build

6801ca0

fix pnpm command

cc3c590

add cypress install for ci

ae878d9

Merge branch 'edge' into chore_change-package-manager

29a4dca

update docs: yarn -> pnpm

126f53a

koji changed the title ~~[WIP] yarn -> pnpm~~ yarn -> pnpm Dec 3, 2025

koji changed the title ~~yarn -> pnpm~~ switch node package manager yarn -> pnpm Dec 3, 2025

koji marked this pull request as ready for review December 3, 2025 16:25

koji requested review from a team as code owners December 3, 2025 16:25

SyntaxColoring reviewed Dec 3, 2025

View reviewed changes

koji and others added 3 commits December 3, 2025 12:40

remove unsed lines

48198c3

move storybook plugin to root

cb8b2c2

trying to debug why test failing locally

cbd1a83

koji added 3 commits December 3, 2025 18:58

temp fix for pd e2e test

8fdc2ed

fix(components): fix primarybutton and alt primarybutton styling issue

a766645

fix primarybutton and alt primarybutton styling issue close AUTH-2559

Merge branch 'edge' into chore_change-package-manager

60f9838

		$(MAKE) -C .. test-js-components tests=$(tests) test_opts="$(test_opts)" cov_opts="$(cov_opts)"
		make -C .. test-js-components tests=$(tests) test_opts="$(test_opts)" cov_opts="$(cov_opts)"

		// Note temporarily skip
		it.skip('renders an empty slot with all the labware options', () => {

switch node package manager yarn -> pnpm #18571

Are you sure you want to change the base?

switch node package manager yarn -> pnpm #18571

Conversation

koji commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

pnpm version

package.json in each project

tests

for e2e test errors

Test Plan and Hands on Testing

Changelog

Review requests

Risk assessment

Uh oh!

koji commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

koji commented Nov 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

run test

build

tsc

lint

test

others

Uh oh!

SyntaxColoring left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

koji commented Dec 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

koji commented Jun 9, 2025 •

edited

Loading

koji commented Jun 9, 2025 •

edited

Loading

koji commented Nov 9, 2025 •

edited

Loading