Skip to main content
Jimmy_Morris
Jimmy_Morris
New Member
July 24, 2024
Solved

Question around `documentUrlSubstitutions` for Code Connect config

  • July 24, 2024
  • 1 reply
  • 231 views

I’m trying to setup my code-connect project very similar to @figma/sds where in the figma.config.json file they’re in a rather clever method of leveraging documentUrlSubstitutions to do value replacement for the Figma document URL.

Config

{
  "codeConnect": {
    "include": ["./src/components/**/*.{tsx,jsx}"],
    "exclude": ["**/utils/*"],
    "parser": "react",
  },
  "documentUrlSubstitutions": {
    "<FIGMA_INPUT>": "https://www.figma.com/design/:file_id_here?node-id=:node_id_here",
  }
}

Component:

figma.connect(Input, '<FIGMA_INPUT>', {
    // code is here
});

Error:

Validating Code Connect files...
Failed to parse <FIGMA_INPUT>

Any insights or is there a custom implementation I am missing? [details left out for privacy]

    This topic has been closed for replies.
    Best answer by Akbar_Mirza

    You’ve probably figured this out by now - but answering so others don’t run into the same issue.

    The error here appears to be because documentUrlSubstitutions is not nested under codeConnect.

    The config should look like this instead:

    {
  "codeConnect": {
    "include": ["./src/components/**/*.{tsx,jsx}"],
    "exclude": ["**/utils/*"],
    "parser": "react",
    "documentUrlSubstitutions": {
      "<FIGMA_INPUT>": "https://www.figma.com/design/:file_id_here?node-id=:node_id_here",
    }
  }
}

    Hopefully, that helps.

    1 reply

    Akbar_Mirza
    Figmate
    Akbar_MirzaAnswer
    Figmate
    September 7, 2024

    You’ve probably figured this out by now - but answering so others don’t run into the same issue.

    The error here appears to be because documentUrlSubstitutions is not nested under codeConnect.

    The config should look like this instead:

    {
  "codeConnect": {
    "include": ["./src/components/**/*.{tsx,jsx}"],
    "exclude": ["**/utils/*"],
    "parser": "react",
    "documentUrlSubstitutions": {
      "<FIGMA_INPUT>": "https://www.figma.com/design/:file_id_here?node-id=:node_id_here",
    }
  }
}

    Hopefully, that helps.

      Terms & ConditionsAccessibility statement