figma
Cannot publish - 400 err
Please provide:
- Code Connect CLI version - "@figma/code-connect": "^1.0.3",
- Code Connect file, Figma design and/or relevant code snippet that could help us get more context
- If you prefer not to share those publicly please reach out via the Figma support
React Component Not shown- Basic Button
Storybook - Button.figma.tsx figma.connect( Button, "#", { props: { buttonText4876138: figma.string("Button Text"), type210: figma.boolean("type"), style: figma.enum("Style", { Primary: "primary", Secondary: "secondary", }), size: figma.enum("Size", { Small: "small", Standard: "standard", Large: "large", }), state: figma.enum("State", { Active: "active", Default: "default", Disabled: "disabled", Hover: "hover", Error: "error", }), text: figma.boolean("Text"), icon: figma.boolean("Icon"), iconposition: figma.enum("icon position", { left: "left", right: "right", }), }, example: (props) => <Button />, }, )
On npx figma connect publish I get: Failed to upload to Figma (ERR_BAD_REQUEST): 400 Failed to parse:
Hi @cheryl-c-tirerack , please can you rerun with the --verbose flag and share the output to Figma support along with the file
Validating Code Connect files...
fileKeyToNodeIds
{
"X7JMJSWrPV99pq74t6scFy": {
"1:69": [
{
"figmaNode": "https://www.figma.com/design/X7JMJSWrPV99pq74t6scFy/Untitled?node-id=1-69,
"label": "React",
"language": "typescript",
"component": "Button",
"source": "",
"sourceLocation": {
"line": 14
},
"template": "function _fcc_renderReactProp(name, prop) {\n // If the value is an array, then it's an array of objects representing React\n // children (either of type INSTANCE for pills, or CODE for inline code). The\n // template string handler in the template API handles extracting the instance\n // objects in a way the UI can handle.\n const isReactComponentArray = Array.isArray(prop);\n if (isReactComponentArray) {\n if (prop.length > 1) {\n // If the array has multiple children, render them wrapped in braces and a\n // fragment.\n //\n // We recursively call figma.tsx on the value as it itself is an array of\n // CODE/INSTANCE sections, so we need to run it through the template string\n // function otherwise this would just output [object Object] for the value.\n // The template string handler function handles flattening nested arrays.\n return figma.tsx ${name}={<>${prop}</>};\n }\n else {\n // Render a single child wrapped in braces, see above for why we use figma.tsx\n return figma.tsx ${name}={${prop}};\n }\n }\n // Render either the prop name or nothing for a boolean, we don't want to\n // render prop={true/false}\n if (typeof prop === 'boolean') {\n return prop ? ${name} : '';\n }\n // Replace any newlines or quotes in the string with escaped versions\n if (typeof prop === 'string') {\n const str = prop.replaceAll('\n', '\\n').replaceAll('"', '\\"');\n if (str === '') {\n return '';\n }\n return ${name}=\"${str}\";\n }\n if (typeof prop === 'number') {\n return ${name}={${prop}};\n }\n if (prop === undefined) {\n return '';\n }\n if (prop.type === 'function' ||\n prop.type === 'identifier' ||\n prop.type === 'object' ||\n prop.type === 'jsx-element') {\n return ${name}={${prop.value}};\n }\n if (prop.type === 'template-string') {\n return ${name}={\\${prop.value}\};\n }\n return '';\n}\nfunction _fcc_renderReactChildren(prop) {\n if (Array.isArray(prop)) {\n return prop;\n }\n if (typeof prop === 'string' || typeof prop === 'number' || typeof prop === 'boolean') {\n return prop;\n }\n if (prop === undefined) {\n return '';\n }\n if (prop.type === 'template-string') {\n // If the value is a template string, wrap in braces\n return figma.tsx {\\${prop.value}\};\n }\n // any other enum should be output as-is\n return prop.value;\n}\nfunction _fcc_jsxElement(value) {\n return {\n value,\n type: 'jsx-element',\n };\n}\nfunction _fcc_function(value) {\n return {\n value,\n type: 'function',\n };\n}\nfunction _fcc_identifier(value) {\n return {\n value,\n type: 'identifier',\n };\n}\nfunction _fcc_object(value) {\n return {\n value,\n type: 'object',\n };\n}\nfunction _fcc_templateString(value) {\n return {\n value,\n type: 'template-string',\n };\n}\nfunction _fcc_renderPropValue(prop) {\n if (Array.isArray(prop)) {\n return prop;\n }\n if (prop === undefined) {\n return 'undefined';\n }\n // Replace any newlines or quotes in the string with escaped versions\n if (typeof prop === 'string') {\n const str = \"${prop.replaceAll('\\n', '\\\\n').replaceAll('\"', '\\\\\"')}\";\n if (str === '') {\n return 'undefined';\n }\n else {\n return str;\n }\n }\n if (typeof prop === 'boolean' || typeof prop === 'number') {\n return prop;\n }\n if (prop.type === 'function' ||\n prop.type === 'identifier' ||\n prop.type === 'object' ||\n prop.type === 'jsx-element') {\n return prop.value;\n }\n if (prop.type === 'template-string') {\n return \\${prop.value}\;\n }\n return 'undefined';\n}\n\nconst figma = require('figma')\n\nexport default figma.tsx`<Button />`\n", "templateData": { "props": { "buttonText4876138": { "kind": "string", "args": { "figmaPropName": "Button Text" } }, "type210": { "kind": "boolean", "args": { "figmaPropName": "type" } }, "style": { "kind": "enum", "args": { "figmaPropName": "Style", "valueMapping": { "Primary": "primary", "Secondary": "secondary" } } }, "size": { "kind": "enum", "args": { "figmaPropName": "Size", "valueMapping": { "Small": "small", "Standard": "standard", "Large": "large" } } }, "state": { "kind": "enum", "args": { "figmaPropName": "State", "valueMapping": { "Active": "active", "Default": "default", "Disabled": "disabled", "Hover": "hover", "Error": "error" } } }, "text": { "kind": "boolean", "args": { "figmaPropName": "Text" } }, "icon": { "kind": "boolean", "args": { "figmaPropName": "Icon" } }, "iconposition": { "kind": "enum", "args": { "figmaPropName": "icon position", "valueMapping": { "left": "left", "right": "right" } } } }, "imports": [ "import { Button } from \"./Button\"" ], "nestable": true }, "metadata": { "cliVersion": "1.0.3" } }, { "figmaNode": https://www.figma.com/design/X7JMJSWrPV99pq74t6scFy/Untitled?node-id=1-69&t=kHxL2PI1LZvFYre8-4, "source": "", "sourceLocation": { "line": 14 }, "template": "function _fcc_renderReactProp(name, prop) {\n // If the value is an array, then it's an array of objects representing React\n // children (either of type INSTANCE for pills, or CODE for inline code). The\n // template string handler in the template API handles extracting the instance\n // objects in a way the UI can handle.\n const isReactComponentArray = Array.isArray(prop);\n if (isReactComponentArray) {\n if (prop.length > 1) {\n // If the array has multiple children, render them wrapped in braces and a\n // fragment.\n //\n // We recursively call `figma.tsx` on the value as it itself is an array of\n // CODE/INSTANCE sections, so we need to run it through the template string\n // function otherwise this would just output `[object Object]` for the value.\n // The template string handler function handles flattening nested arrays.\n return figma.tsx ` ${name}={<>${prop}</>}`;\n }\n else {\n // Render a single child wrapped in braces, see above for why we use `figma.tsx`\n return figma.tsx ` ${name}={${prop}}`;\n }\n }\n // Render either the prop name or nothing for a boolean, we don't want to\n // render `prop={true/false}`\n if (typeof prop === 'boolean') {\n return prop ? ` ${name}` : '';\n }\n // Replace any newlines or quotes in the string with escaped versions\n if (typeof prop === 'string') {\n const str = prop.replaceAll('\\n', '\\\\n').replaceAll('\"', '\\\\\"');\n if (str === '') {\n return '';\n }\n return ` ${name}=\"${str}\"`;\n }\n if (typeof prop === 'number') {\n return ` ${name}={${prop}}`;\n }\n if (prop === undefined) {\n return '';\n }\n if (prop.type === 'function' ||\n prop.type === 'identifier' ||\n prop.type === 'object' ||\n prop.type === 'jsx-element') {\n return ` ${name}={${prop.value}}`;\n }\n if (prop.type === 'template-string') {\n return ` ${name}={\\`${prop.value}\\`}`;\n }\n return '';\n}\nfunction _fcc_renderReactChildren(prop) {\n if (Array.isArray(prop)) {\n return prop;\n }\n if (typeof prop === 'string' || typeof prop === 'number' || typeof prop === 'boolean') {\n return prop;\n }\n if (prop === undefined) {\n return '';\n }\n if (prop.type === 'template-string') {\n // If the value is a template string, wrap in braces\n return figma.tsx `{\\`${prop.value}\\`}`;\n }\n // any other enum should be output as-is\n return prop.value;\n}\nfunction _fcc_jsxElement(value) {\n return {\n value,\n type: 'jsx-element',\n };\n}\nfunction _fcc_function(value) {\n return {\n value,\n type: 'function',\n };\n}\nfunction _fcc_identifier(value) {\n return {\n value,\n type: 'identifier',\n };\n}\nfunction _fcc_object(value) {\n return {\n value,\n type: 'object',\n };\n}\nfunction _fcc_templateString(value) {\n return {\n value,\n type: 'template-string',\n };\n}\nfunction _fcc_renderPropValue(prop) {\n if (Array.isArray(prop)) {\n return prop;\n }\n if (prop === undefined) {\n return 'undefined';\n }\n // Replace any newlines or quotes in the string with escaped versions\n if (typeof prop === 'string') {\n const str = `\"${prop.replaceAll('\\n', '\\\\n').replaceAll('\"', '\\\\\"')}\"`;\n if (str === '') {\n return 'undefined';\n }\n else {\n return str;\n }\n }\n if (typeof prop === 'boolean' || typeof prop === 'number') {\n return prop;\n }\n if (prop.type === 'function' ||\n prop.type === 'identifier' ||\n prop.type === 'object' ||\n prop.type === 'jsx-element') {\n return prop.value;\n }\n if (prop.type === 'template-string') {\n return `\\`${prop.value}\\;\n }\n return 'undefined';\n}\n\nconst figma = require('figma')\n\nexport default figma.tsx<Button />\n",
"templateData": {
"imports": []
},
"component": "Button",
"label": "Storybook",
"language": "typescript",
"metadata": {
"cliVersion": "1.0.3"
},
"variant": {
"Style": "Primary"
}
},
{
"figmaNode": https://www.figma.com/design/X7JMJSWrPV99pq74t6scFy/Untitled?node-id=1-69&t=kHxL2PI1LZvFYre8-4,
"source": "",
"sourceLocation": {
"line": 14
},
"template": "function _fcc_renderReactProp(name, prop) {\n // If the value is an array, then it's an array of objects representing React\n // children (either of type INSTANCE for pills, or CODE for inline code). The\n // template string handler in the template API handles extracting the instance\n // objects in a way the UI can handle.\n const isReactComponentArray = Array.isArray(prop);\n if (isReactComponentArray) {\n if (prop.length > 1) {\n // If the array has multiple children, render them wrapped in braces and a\n // fragment.\n //\n // We recursively call figma.tsx on the value as it itself is an array of\n // CODE/INSTANCE sections, so we need to run it through the template string\n // function otherwise this would just output [object Object] for the value.\n // The template string handler function handles flattening nested arrays.\n return figma.tsx ${name}={<>${prop}</>};\n }\n else {\n // Render a single child wrapped in braces, see above for why we use figma.tsx\n return figma.tsx ${name}={${prop}};\n }\n }\n // Render either the prop name or nothing for a boolean, we don't want to\n // render prop={true/false}\n if (typeof prop === 'boolean') {\n return prop ? ${name} : '';\n }\n // Replace any newlines or quotes in the string with escaped versions\n if (typeof prop === 'string') {\n const str = prop.replaceAll('\n', '\\n').replaceAll('"', '\\"');\n if (str === '') {\n return '';\n }\n return ${name}=\"${str}\";\n }\n if (typeof prop === 'number') {\n return ${name}={${prop}};\n }\n if (prop === undefined) {\n return '';\n }\n if (prop.type === 'function' ||\n prop.type === 'identifier' ||\n prop.type === 'object' ||\n prop.type === 'jsx-element') {\n return ${name}={${prop.value}};\n }\n if (prop.type === 'template-string') {\n return ${name}={\\${prop.value}\};\n }\n return '';\n}\nfunction _fcc_renderReactChildren(prop) {\n if (Array.isArray(prop)) {\n return prop;\n }\n if (typeof prop === 'string' || typeof prop === 'number' || typeof prop === 'boolean') {\n return prop;\n }\n if (prop === undefined) {\n return '';\n }\n if (prop.type === 'template-string') {\n // If the value is a template string, wrap in braces\n return figma.tsx {\\${prop.value}\};\n }\n // any other enum should be output as-is\n return prop.value;\n}\nfunction _fcc_jsxElement(value) {\n return {\n value,\n type: 'jsx-element',\n };\n}\nfunction _fcc_function(value) {\n return {\n value,\n type: 'function',\n };\n}\nfunction _fcc_identifier(value) {\n return {\n value,\n type: 'identifier',\n };\n}\nfunction _fcc_object(value) {\n return {\n value,\n type: 'object',\n };\n}\nfunction _fcc_templateString(value) {\n return {\n value,\n type: 'template-string',\n };\n}\nfunction _fcc_renderPropValue(prop) {\n if (Array.isArray(prop)) {\n return prop;\n }\n if (prop === undefined) {\n return 'undefined';\n }\n // Replace any newlines or quotes in the string with escaped versions\n if (typeof prop === 'string') {\n const str = \"${prop.replaceAll('\\n', '\\\\n').replaceAll('\"', '\\\\\"')}\";\n if (str === '') {\n return 'undefined';\n }\n else {\n return str;\n }\n }\n if (typeof prop === 'boolean' || typeof prop === 'number') {\n return prop;\n }\n if (prop.type === 'function' ||\n prop.type === 'identifier' ||\n prop.type === 'object' ||\n prop.type === 'jsx-element') {\n return prop.value;\n }\n if (prop.type === 'template-string') {\n return \\${prop.value}\``;\n }\n return 'undefined';\n}\n\nconst figma = require('figma')\n\nexport default figma.tsx<Button />\n",
"templateData": {
"imports": []
},
"component": "Button",
"label": "Storybook",
"language": "typescript",
"metadata": {
"cliVersion": "1.0.3"
},
"variant": {
"Style": "Secondary"
}
}
]
}
}
Cheryl Carpenter | Principal Front-End Developer
Tire Rack 7101 Vorden Parkway South Bend, IN 46628 O: (800) 428-8355 ext. 4287 O: 574 287 2345 ext. 4287 F: (574) 236-7714 Email: @.@.>
https://www.tirerack.com
From: Rishi Rabheru @.> Date: Friday, August 2, 2024 at 5:06 AM To: figma/code-connect @.> Cc: Cheryl Carpenter @.>, Mention @.> Subject: Re: [figma/code-connect] Cannot publish - 400 err (Issue #115)
Hi @cheryl-c-tirerackhttps://github.com/cheryl-c-tirerack , please can you rerun with the --verbose flag and share the output to Figma supporthttps://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001744374 along with the file
— Reply to this email directly, view it on GitHubhttps://github.com/figma/code-connect/issues/115#issuecomment-2265029498, or unsubscribehttps://github.com/notifications/unsubscribe-auth/A7RF2EW7TH6NLRXRA5BB6ATZPNKZTAVCNFSM6AAAAABL3G5226VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENRVGAZDSNBZHA. You are receiving this because you were mentioned.Message ID: @.***>
Hi @cheryl-c-tirerack, I believe that error suggests our system is having a problem with the Figma node URL in one of your documents. Could you check that the URL in each Code Connect file is correct and contains a node ID? You can share your Code Connect files with our support team if you don't want to share the URLs on Github.
