figma / code-connect

A tool for connecting your design system components in code with your design system in Figma
MIT License
486 stars 44 forks source link

`importPaths` not working as expected #10

Closed lucoel closed 3 weeks ago

lucoel commented 1 month ago

First, congrats on the launch! 🎉 Super excited to see where Dev Mode is going. Of course I couldn't stop myself from playing around yesterday during the announcement and in general it was super easy to set up.

But I got stuck while trying to update the importPaths for our component package. After copying the configuration example from the React documentation I noticed that some keys seem to miss quotes. My setup now looks like this:

figma.config.json

{
  "codeConnect": {
    "include": [
      "packages/xyz/src/components/**"
    ],
    "exclude": [],
    "react": {
      "importPaths": {
        "./*": "@org/xyz"
      }
    }
  }
}

Button.figma.tsx

import figma from '@figma/code-connect'
import { Button } from './Button' 

Uploading to Figma immediately worked, but no matter what I specify at importPaths, I get nothing but import { Button } from "./Button in Dev Mode.

It could definitely be me, I would be thankful for a hint in the right direction!

plotka commented 1 month ago

I was running into the same issue. After looking at the code, it looks like importPaths must be in the config's root and not nested under the react key.

If you remove the react object and update your import path from ./* to *, it should work:

{
  "codeConnect": {
    "include": [
      "packages/xyz/src/components/**"
    ],
    "exclude": [],
    "importPaths": {
        "*": "@org/xyz"
    }
  }
}

For those, like me, who have multiple folders under src/components, this should work:

{
  "codeConnect": {
    "include": [
      "src/components/**"
    ],
    "exclude": [],
    "importPaths": {
        "src/components/*/*": "@org/xyz"
    }
  }
}
karlpetersson commented 1 month ago

Hey! So yeah, like @plotka pointed out this is a bug (thank you for finding this and posting a solution).

This should be fixed in the next release. The intention is for this property to live under the nested react key, so when the fix is deployed you'll need to move importPaths there. I'll make sure to post an update here once it's live, sorry for the inconvenience!

lucoel commented 1 month ago

Thanks to both of you, @plotka @karlpetersson! The suggestion worked straight away, looking forward to the next release(s).

ptomas-figma commented 3 weeks ago

@lucoel we just release 0.1.1 with the fix for the issue as Karl mentioned above. Please let us know and things are working now.