Invalid import statement and missing props

[JonasBa]

Using Code Connect results in invalid code snippet output and missing props. For the full changeset, see getsentry/sentry#106390 and the changes.

The outcome that we are seeing when publishing the changes for our Button component is the broken import statement (see double quoted import), and missing props.

We are using Figma CLI 1.3.12 on MacOS 15.5. The full config should be visible from the pull request.

[mryechkin]

Noticing the same as well, with no code changes from the last time it worked. Not sure when I started getting this, but it's fairly recent.

Not seeing the same behaviour in components using the "no parser" approach with template files, though - for what it's worth.

[tweightman-figma]

Hi both. We've made a configuration change, can you let us know if that has helped here? If not we can investigate more. Thanks!

[mryechkin]

Hi @tweightman-figma - I can confirm it's working for me now. Thanks!

[JonasBa]

@tweightman-figma Appreciate the quick turn around. I can confirm that the import parse problem is fixed, however we are still not seeing the props on our component.

Please let me know if there's anything we need to change, I just re-ran the publish step on the above linked PR

[rgullyfigma]

Hey @JonasBa

I just used the Code Connect file you linked and published a test to my own file and I seem to be seeing props:

I did mock the Button component something like this

export function Button({ priority, size, children }: PropsWithChildren<{ priority: "danger" | "default" | "link" | "primary" | "transparent" | "warning"; size: "md" | "sm" | "xs" | "zero"; }>) {
  return (
    <button className={`button ${priority} ${size}`}>
      {children}
    </button>
  );
}

but I don't think that should have an impact.

Are you able to give your publishing steps to help us debug further?

[JonasBa]

@rgullyfigma I'm not sure what I'm doing wrong here, but I cannot get this to work even if I mock the button code verbatim.

The publishing step I'm running is just npx figma connect publish --token $TOKEN which outputs

> npx figma connect publish --token $TOKEN
npm warn Unknown project config "lockfile". This will stop working in the next major version of npm.
npm warn Unknown project config "shamefully-hoist". This will stop working in the next major version of npm.
Config file found, parsing /Users/jonasbadalic/code/sentry1 using specified include globs
.../static/app/components/core/button/button.figma.tsx
Using label "React"
Validating Code Connect files...
All Code Connect files are valid (727ms)
Uploading to Figma...
Successfully uploaded to Figma, for React:
-> Button https://www.figma.com/design/...

Are there any additional steps that we need to take here?

[rgullyfigma]

Yeah your code seems fine to me. The only thing I can think of / reproduce is when the current instance's properties aren't set up correctly, that means that the Code Connect won't show the associated property in the rendered snippet.

[rgullyfigma]

@JonasBa - think I've figured out the issue. The casing seems to be wrong between your Figma file and the code. Your variant values are "MD" in Figma, and "md" in code for example.

The left hand side of has match Figma here:

[JonasBa]

@rgullyfigma I can confirm that this was the issue, and we really appreciate your quick investigation in helping us resolve this.

Bug aside, I don't know if it would be technically feasible on your end, but assuming that you are able to narrow down the definitions via enum field, I think it'd be neat if you could fail the upload.