code-connect icon indicating copy to clipboard operation
code-connect copied to clipboard

`importPaths` not working as expected

Open lucoel opened this issue 10 months ago • 3 comments

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!

lucoel avatar Apr 17 '24 13:04 lucoel

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"
    }
  }
}

plotka avatar Apr 17 '24 15:04 plotka

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!

karlpetersson avatar Apr 17 '24 15:04 karlpetersson

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

lucoel avatar Apr 17 '24 15:04 lucoel

@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.

ptomas-figma avatar Apr 24 '24 15:04 ptomas-figma