Can't resolve 'child_process' in `@figma/code-connect:1.0.2` when using Storybook

[benposnick]

I am getting an error that says Can't resolve 'child_process' when using @figma/code-connect:1.0.2 and Storybook v8.2.3. Commenting out the references to the package fixes the issue.

I have included the full error message below as well as my stories.tsx file.

---

I found this reference in the codebase to child_process and was curious if this is at all related to how Storybook ingests the .stories.tsx file: https://github.com/figma/code-connect/blob/9911b184741e97e3bc6354e1067451f0bf25f7ad/cli/src/index.ts#L12-L22

Output from npm run storybook:

> storybook dev -p 6006

storybook v8.2.3

info => Serving static files from ././public at /
info => Starting manager..
info => Starting preview..
info Addon-docs: using MDX3
info => Using implicit CSS loaders
info => Using SWC as compiler
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/3 entries 2/3 dependencies 0/2 modulesinfo Using tsconfig paths for react-docgen
ERROR in ./node_modules/@figma/code-connect/dist/common/updates.js 9:24-48
Module not found: Error: Can't resolve 'child_process' in '/Users/ben/dev/frontend/node_modules/@figma/code-connect/dist/common'
 @ ./node_modules/@figma/code-connect/dist/common/logging.js 9:18-38
 @ ./node_modules/@figma/code-connect/dist/connect/helpers.js 28:18-46
 @ ./node_modules/@figma/code-connect/dist/client/figma_client.js 5:18-47
 @ ./node_modules/@figma/code-connect/dist/client/external.js 4:21-46
 @ ./node_modules/@figma/code-connect/dist/index.js 46:13-41
 @ ./v2-components/badge/badge.stories.tsx 30:0-40 133:14-27
 @ ./v2-components/ lazy ^\.\/.*$ include: (?%21.*node_modules)(?:\/v2-components(?:\/(?%21\.)(?:(?:(?%21(?:^%7C\/)\.).)*?)\/%7C\/%7C$)(?%21\.)(?=.)[^/]*?\.stories\.(ts%7Ctsx))$ chunkName: [request] namespace object ./badge/badge.stories.tsx ./badge/badge.stories
 @ ./storybook-stories.js 38:11-42:5
 @ ./storybook-config-entry.js 8:0-50 20:31-39 27:0-30:2 27:56-30:1 29:27-35

preview compiled with 1 error
=> Failed to build the preview
99% end closing watch compilationWARN Force closed preview build
SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.
Run Storybook with --debug-webpack for more information.
    at starter (./node_modules/@storybook/builder-webpack5/dist/index.js:1:7969)
    at starter.next (<anonymous>)
    at Module.start (./node_modules/@storybook/builder-webpack5/dist/index.js:1:9922)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

badge.stories.tsx file:

import type { Meta, StoryObj } from '@storybook/react'
import figma from '@figma/code-connect'
import Badge, { BadgeProps } from './'

type Story = StoryObj<typeof Badge>

const sharedArgs: Partial<BadgeProps> = {
  children: 'Badge',
}

export const Default: Story = {
  render: (args) => <Badge {...args} />,
  args: {
    ...sharedArgs,
  },
}

const meta: Meta<typeof Badge> = {
  title: 'Badge',
  component: Badge,
  parameters: {
    layout: 'centered',
    design: {
      type: 'figma',
      url: 'https://www.figma.com/...', // Actual link omitted for privacy
      examples: [Default],
      props: {
        type: figma.enum('Color', {
          Green: 'success',
          Red: 'danger',
          Grey: 'neutral',
          Orange: 'warning',
          Blue: 'processing',
        }),
      },
    },
  },
  tags: ['autodocs'],
}

export default meta

[tomduncalf-figma]

Hey @benposnick, thanks for the report and sorry to hear you're having issues. Just to check, are you using the latest version of Code Connect (1.0.2)?

[benposnick]

Hey @benposnick, thanks for the report and sorry to hear you're having issues. Just to check, are you using the latest version of Code Connect (1.0.2)?

Yes I am: "@figma/code-connect": "^1.0.2",

[benposnick]

@tomduncalf-figma Is there any additional data / information I can supply to help investigate?

[bitfella]

I am having the same issue with Storybook 7.6.19 and Figma Code Connect 1.0.2 (and also 1.0.3)

[bitfella]

This is also related to #84

[benposnick]

@tomduncalf-figma any updates on this? This has been a bit cumbersome to our team, requiring us to comment out all the Figma Code Connect code every time we run Storybook.

[tomduncalf-figma]

Hey @benposnick, apologies for the lack of update. This is on our backlog to investigate, I'll let you know as soon as we have an update