"Import could not be resolved" warning when publishing an icons.figma.tsx file and external icon lib

[mryechkin]

I've created an icons.figma.tsx file like the docs suggest using the sample script, and everything is working great as far as Figma goes. The generated code is exactly what I want, ie:

import { Button } from '@acme/ui';
import { IconName } from '@acme/icons';

<Button>
  <IconName />
  Button Text
</Button>

Where @acme/ui are all the design system React components, and @acme/icons are icon React components specifically. These two are separate packages that live in two separate repos.

I'm trying to add the Figma files to the source repo of the React UI lib, so component imports are local files, but the icon imports come from the separate icons package (ie. they're in the node_modules).

The generated code is correct. However, I'm seeing this warning in the output when publishing:

Import for IconName could not be resolved, make sure that your `include` globs in `figma.config.json` matches the component source file (in addition to the Code Connect file). If you're using path aliases, make sure to include the same aliases in `figma.config.json` with the `paths` option.

Where IconName is the name of my React component icon, which comes from a separate library:

// icons.figma.tsx
import figma from '@figma/code-connect';
import { IconName} from '@acme/icons';

figma.connect(IconName, ...);

My figma.config.json looks like this:

{
  "codeConnect": {
    "include": ["src/figma/**"],
    "exclude": [],
    "importPaths": {
      "*": "@acme/ui",
      "@acme/icons": "@acme/icons"
    }
  }
}

And the component Figma files (ie. Button.figma.tsx look like this:

// src/figma/Button.figma.tsx
import figma from '@figma/code-connect';

import { Button } from '../components';

figma.connect(Button, ...);

What am I missing?

[karlpetersson]

Hey! In this case the warning likely means we're not able to resolve the import, in practice this means you won't see a valid github URL to the source component in Figma, even though the code snippet displays the correct import. It's possible you can get around this by providing an alias mapping using the paths option instead of importPaths for icons here, e.g:

{
  "codeConnect": {
    "include": ["src/figma/**"],
    "exclude": [],
    "importPaths": {
      "*": "@acme/ui",
    },
    "paths": {
      "@acme/icons": ["node_modules/path/to/icons"]
    }
  }
}

This is obviously not ideal, we'll work on improving this usage of imports as it feels like a common use case. Also I realise this can be a tad confusing since paths and importPaths are quite similar, keen to hear your feedback on this and whether this works.

Another thing, "@acme/icons": "@acme/icons" I don't think will do anything in this case, importPaths is for when you want to transform e.g import { Icon } from './' to import { Icon } from '@acme/icons' - but you're already using the desired import in the code connect file.

[mryechkin]

Got it, thank you @karlpetersson! That makes sense. I will say that the usage of paths vs importPaths isn't very clear in the current docs, so that definitely helps.

[mryechkin]

Sadly that didn't seem to do anything. Updated the config to this:

{
  "codeConnect": {
    "include": ["src/figma/**"],
    "exclude": [],
    "importPaths": {
      "*": "@acme/ui"
    },
    "paths": {
      "@acme/icons": [
        "node_modules/@acme/icons/dist/esm/index.js"
      ]
    }
  }
}

Tried both with the index file specified and without (just the @acme/icons folder) but that didn't make a difference.