Unable to connect to Figma API

[stefencookwnzl]

Describe the bug Based on figmagic-example-master example. token and url variables read from .env, .figmaicrc or CLI --token or --url command parameters but errors out with "Error: Error: Error: Missing one or more of required arguments: "figmaToken", "figmaUrl" when attempting to get data from Figma API!". No issue connecting via Postman.

To Reproduce Scenario 1 - Using .env file :: Steps to reproduce the behavior:

1. Navigate project folder where local version of figmagic was installed as dev dependency and add script to package.json
2. create .env file with 'FIGMA_URL' and 'FIGMA_TOKEN' entries:

   FIGMA_URL=XYX
   FIGMA_TOKEN=XYZ

3. run ' npm run figmagic -- --debug'
4. see error "Attempting to fetch data from Figma API... Error: Error: Error: Missing one or more of required arguments: "figmaToken", "figmaUrl" when attempting to get data from Figma API!":

DEBUG:

_SYSTEM: Final user configuration that will be used..._
{...
  token: 'XYZ',
  unitlessPrecision: 2,
  url: 'XYZ',
  usePostscriptFontNames: false
}

Scenario 2 - Using .figmagicrc file (and no .env)

1. Navigate project folder where local version of figmagic was installed as dev dependency and add script to package.json
2. Run npm run figmagic init which creates the .figmagicrc file. Update file with 'url' and 'token' entries:

   {
   "templates": {
   "templatePathGraphic": "./node_modules/figmagic/templates/graphic",
   "templatePathReact": "./node_modules/figmagic/templates/react",
   "templatePathStorybook": "./node_modules/figmagic/templates/story",
   "templatePathStyled": "./node_modules/figmagic/templates/styled"
   },
   "token": "XYZ,
   "url": "XYZ"
   }

3. run ' npm run figmagic -- --debug'
4. see error "Attempting to fetch data from Figma API... Error: Error: Error: Missing one or more of required arguments: "figmaToken", "figmaUrl" when attempting to get data from Figma API!":

DEBUG:

_SYSTEM: Final user configuration that will be used..._
{
...
  token: 'XYZ',
  unitlessPrecision: 2,
  url: 'XYZ',
  usePostscriptFontNames: false
}

Attempting to fetch data from Figma API... Error: Error: Error: Missing one or more of required arguments: "figmaToken", "figmaUrl" when attempting to get data from Figma API!

Expected behavior Connects successfully to the FIGMA API

Screenshots

Desktop (please complete the following information):

• OS: macOS 11.2.1
• Browser N/A
• Version [e.g. 22]

Additional context https://github.com/mikaelvesavuori/figmagic/issues/88#issuecomment-770176151 mentions "Your attempt at running npm run figmagic --token {token} --url {url} will not work since you use a local install. You should try node ./node_modules/figmagic/build/index.js --token {token} --url {url} which will work just fine (this is also documented in the Figmagic example repo's package.json; obscure but true).".

The above does not seem to be clearly documented. With no .env or .figmagicrc and simply running _node ./nodemodules/figmagic/build/index.js --token XYZ --url XYZ -- --debug gives the same results.

[mikaelvesavuori]

Hi!

Action 1: Update to 4.0.9 in case you're not on that version.

I could not reproduce your issue with a blank new folder/project with an .env formatted like this:

FIGMA_TOKEN=figma-token
FIGMA_URL=figma-document-id

and having run:

npm init -y
npm install figmagic -D
node node_modules/figmagic/build/index.js

I also ran the same with the .figmagicrc file from scratch (no .env file):

npm init -y
npm install figmagic -D
node node_modules/figmagic/build/index.js init
[place token and url values in .figmagicrc]
node node_modules/figmagic/build/index.js

I did also get it to work correctly with the parameter variant ,node ./node_modules/figmagic/build/index.js --token ABC --url XYZ.

Strangely, at one point (cannot remember exactly how) I did see the message but was unable to reproduce that...

Action 2: Ensure your .figmagicrc is formatted and named correctly. At least in your example, you are missing a " in "token": "XYZ,.

Action 3: Ensure your Figma URL is correct.

If you right-click your file in Figma you can copy the link, and you'll get a URL like https://www.figma.com/file/K39TRbltDVcWFlpzw9r7Zh/Figmagic-%E2%80%94-Design-System-template-4.0?node-id=2657%3A116&viewport=30%2C111%2C0.6798259615898132. The bit you want is the one right after "file", i.e. K39TRbltDVcWFlpzw9r7Zh.

[mikaelvesavuori]

However, there is (I see) a bug where

Attempting to fetch data from Figma API...

Writing Figma base file...

Writing design tokens...
Error: Error: TypeError: Cannot read property 'children' of undefined

is thrown if running debug mode on an inline parameter variant, like so node ./node_modules/figmagic/build/index.js --token ABC --url XYZ --debug. I'll put up an issue for that.

[mikaelvesavuori]

I put an issue for the above, and I'd advise you to skip the debug flag since that has some unknown problem.

[stefencookwnzl]

Thanks Mikael - I've gone through the initiation as per your instructions and can't fault it this time. I appreciate you taking the time to respond what I thought was an issue, however it was obviously something I'd done! I'll compare branches tomorrow and work out where I went wrong.

[CodeByAlex]

Hey @mikaelvesavuori - Im receiving the same error with a similar setup in the original post: export const ErrorGetFromApi = ErrorMessage( 'Missing one or more of required arguments: "figmaToken", "figmaUrl" when attempting to get data from Figma API!' );

Im using version ^4.0.9

USER: Environment configuration (Low priority)

{
  token: 'XXXXXXXXXXXXXX',
  url: 'XXXXXXXXXXXXXX'
}
USER: Command-Line configuration (Medium priority)

{ debugMode: true }
USER: .figmagicrc configuration (Highest priority)

{
  fontUnit: 'rem',
  letterSpacingUnit: 'em',
  opacitiesUnit: 'float',
  figmaData: 'figma.json',
  figmagicFolder: '.figmagic',
  outputFolderElements: 'elements',
  outputFolderTokens: 'tokens',
  outputFormatElements: 'tsx',
  outputFormatTokens: 'ts',
  spacingUnit: 'rem',
  usePostscriptFontNames: true,
  token: 'XXXXXXXXXXXXXX',
  url: 'XXXXXXXXXXXXXX'
}
SYSTEM: Final user configuration that will be used...

{
  debugMode: true,
  fontUnit: 'rem',
  letterSpacingUnit: 'em',
  opacitiesUnit: 'float',
  figmaData: 'figma.json',
  figmagicFolder: '.figmagic',
  outputFolderElements: 'elements',
  outputFolderGraphics: 'graphics',
  outputFolderTokens: 'tokens',
  outputFormatCss: 'ts',
  outputFormatDescription: 'md',
  outputFormatElements: 'tsx',
  outputFormatGraphics: 'svg',
  outputFormatStorybook: 'js',
  outputFormatTokens: 'ts',
  outputGraphicElements: false,
  outputGraphicElementsMap: false,
  outputScaleGraphics: 1,
  outputDataTypeToken: null,
  recompileLocal: false,
  remSize: 16,
  skipFileGeneration: {
    forceUpdate: true,
    skipCss: false,
    skipDescription: false,
    skipReact: false,
    skipStorybook: false,
    skipStyled: false
  },
  spacingUnit: 'rem',
  syncElements: false,
  syncGraphics: false,
  syncTokens: true,
  templates: {
    templatePathGraphic: 'templates/graphic',
    templatePathReact: 'templates/react',
    templatePathStorybook: 'templates/story',
    templatePathStyled: 'templates/styled'
  },
  token: 'XXXXXXXXXXXXXX',
  unitlessPrecision: 2,
  url: 'XXXXXXXXXXXXXX',
  usePostscriptFontNames: true
}

Ive run npm install, copied in the example file from this project, and added the token and url

NOTE: This issue shows up when not in debug mode too

UPDATE: Ive also tried using the .env file without spaces (read the previous issues): FIGMA_URL=XXXXXXX FIGMA_TOKEN=XXXXX-XXXX-XXXXXXX-XXXXX

For the url Im using the ID: https://www.figma.com/file/ID_LOCATED_HERE/XXX-Core-Library?node-id=4723%3A371876

[mikaelvesavuori]

Hi! Try putting double quotes around the values in the env file. Pretty sure that might help.

Will investigate today.

[mikaelvesavuori]

Hi again.

My understanding (from assumptions plus reading the logs) is that:

• You are on Mac OS,
• You are setting your token and URL in .env,
• You have a custom .figmagicrc config,
• You are using the --debug flag from CLI,
• You are using only the Figma file ID part for your FIGMA_URL value

Please correct me if I am wrong on any of these.

Based on the logs it certainly looks like your token and URL is correctly propagated through the configuration steps (as it's part of the final config, seen in the bottom of your logs).

That ugly nesting of errors (entirely on my part to fix!) says this goes three layers deep, but I am unable to get more than two nested layers of errors for this particular problem.

I am also stumped by the token and/or URL somehow disappearing post-config, which doesn't really make sense for how the code is written.

Question 1: Are you attempting to use Figmagic as a consumer, or are you trying to develop for it? (thinking of your specific mention of the actual error as it's written in the source code)

Question 2: What Node version are you on?

Question 3: How are you calling Figmagic?

Question 4: What exactly are you referencing to when you write copied in the example file from this project?

Action 1: An invalid JSON file could cause errors. Ensure your .figmagicrc is valid JSON. Can you please re-format the config to:

{
  "fontUnit": "rem",
  "letterSpacingUnit": "em",
  "opacitiesUnit": "float",
  "figmaData": "figma.json",
  "figmagicFolder": ".figmagic",
  "outputFolderElements": "elements",
  "outputFolderTokens": "tokens",
  "outputFormatElements": "tsx",
  "outputFormatTokens": "ts",
  "spacingUnit": "rem",
  "usePostscriptFontNames": true,
  "token": "YOUR_TOKEN_HERE",
  "url": "YOUR_URL_HERE"
}

and see if that helps?

Action 2: Can you please verify your Figmagic version? Ideally, you'd remove package-lock.json and reinstall packages so they don't inherit anything or start acting up.

Action 3: Could you try to replicate your issues with the exact same guidance (for a minimal setup) I've provided above—and previously—to see whether this problem is particular to your project or affects all Figmagic projects you work on, on your machine? Also make sure to init the config with the ”init” command as per above, rather than copy paste any previous code, just in case.

[mikaelvesavuori]

@stefencookwnzl Hey, did you ever figure out what the diff between your approach and mine was?

[CodeByAlex]

Hi! Try putting double quotes around the values in the env file. Pretty sure that might help.

Will investigate today.

Hey I just tried this and didnt have any luck, unfortunately.

[CodeByAlex]

You are on Mac OS YES

You are setting your token and URL in .env Thats one method Ive tried but Ive also tried setting the token and url as command line args and in the config file. Whenever I set the token and url, I only set them using one of the methods

You have a custom .figmagicrc config, YES but I could try without. Ive also tried the init command to create a standard gen version but had the same problems so I copied in the one from this repo

You are using the --debug flag from CLI Yes but issues still persist without the debug flag

You are using only the Figma file ID part for your FIGMA_URL value Correct but Ive also tried using the full URL

[CodeByAlex]

Question 1: Are you attempting to use Figmagic as a consumer, or are you trying to develop for it? (thinking of your specific mention of the actual error as it's written in the source code) Im using it as a consumer (and am super excited to do so!) at the moment but may eventually want to contribute

Question 2: What Node version are you on? Node version = 12.18.3 NPM version = 6.14.6

Question 3: How are you calling Figmagic? I have a command in the package.json that I copied from the directions: "figmagic": "node ./node_modules/figmagic/build/index.js --debug", I then call npm run figmagic from the terminal

Question 4: What exactly are you referencing to when you write copied in the example file from this project? I meant that I tried running the init commmand and when I tried adding the token and url to the generated file, it didnt work. So then I copied this file into my project as mentioned as an option in the docs https://github.com/mikaelvesavuori/figmagic/blob/master/figmagicrc

[CodeByAlex]

Action 1: An invalid JSON file could cause errors. Ensure your .figmagicrc is valid JSON. Can you please re-format the config to:

{
  "fontUnit": "rem",
  "letterSpacingUnit": "em",
  "opacitiesUnit": "float",
  "figmaData": "figma.json",
  "figmagicFolder": ".figmagic",
  "outputFolderElements": "elements",
  "outputFolderTokens": "tokens",
  "outputFormatElements": "tsx",
  "outputFormatTokens": "ts",
  "spacingUnit": "rem",
  "usePostscriptFontNames": true,
  "token": "YOUR_TOKEN_HERE",
  "url": "YOUR_URL_HERE"
}

I copied the above in, removed the .env file and any token/url command args and ran but had the same result:

Attempting to fetch data from Figma API...
Error: Error: Error: Missing one or more of required arguments: "figmaToken", "figmaUrl" when attempting to get data from Figma API!

Action 2: Can you please verify your Figmagic version? Ideally, you'd remove package-lock.json and reinstall packages so they don't inherit anything or start acting up. Tried the above and deleted the node modules then renran npm install.

Figmagic is set to: "figmagic": "^4.0.9",

I still received the same result:

Attempting to fetch data from Figma API...
Error: Error: Error: Missing one or more of required arguments: "figmaToken", "figmaUrl" when attempting to get data from Figma API!

Action 3: Could you try to replicate your issues with the exact same guidance (for a minimal setup) I've provided above—and previously—to see whether this problem is particular to your project or affects all Figmagic projects you work on, on your machine? Also make sure to init the config with the ”init” command as per above, rather than copy paste any previous code, just in case.

I just tried this (as described above):

1 -

node node_modules/figmagic/build/index.js init
Result:
{
 "templates": {
  "templatePathGraphic": "./node_modules/figmagic/templates/graphic",
  "templatePathReact": "./node_modules/figmagic/templates/react",
  "templatePathStorybook": "./node_modules/figmagic/templates/story",
  "templatePathStyled": "./node_modules/figmagic/templates/styled"
 }
}


2 - [place token and url values in .figmagicrc]


Result:
{
 "templates": {
  "templatePathGraphic": "./node_modules/figmagic/templates/graphic",
  "templatePathReact": "./node_modules/figmagic/templates/react",
  "templatePathStorybook": "./node_modules/figmagic/templates/story",
  "templatePathStyled": "./node_modules/figmagic/templates/styled"
 },
 "token": “XXX”,
 "url": “XXX”,
}


3 -

node node_modules/figmagic/build/index.js


I received a different error than before:


Error: Error: Could not retrieve any data. Are you missing a valid API key?



Ive tried making a request to Figma’s API with the url id and the token and it did work as expected with a 200 response


{"document":{"id":"0:0","name":"Document","type":"DOCUMENT","children":[{"id":"34:0","name":"Cover","type":"CANVAS","children":[{"id":"365:6","name":"Core components","type":"FRAME","blendMode":"PASS_THROUGH","children":[{"id":"334:39","name":"Status","type":"GROUP","blendMode":"PASS_THROUGH","children":[{"id":"334:41","name":"Status /....

[mikaelvesavuori]

Hi again. Thanks for the answers. This entire thing is so weird...

At this point, I'd hazard a guess that Node 12 may be a problem here—and is really the only thing that sticks out for me TBH—Figmagic is built and tested only for Node 14+, and does use things that could potentially break functionality in old versions. Could you try using Node 14 (maybe with nvm or similar, in case you know you need to stay on Node 12)?

EDIT: Tried this myself just now, works just fine with Node 12...

[mikaelvesavuori]

Just adding here that I am in fact now starting to see this. Will update when I have something crisp. Extremely bizarre though.

[mikaelvesavuori]

OK, so I can't put my finger on it but in a brand new project something seems off about the RC file for token and URL. It looks correct but somehow does not actually function.

I've created a minimal proof that I'd hope you could try. It uses the CLI to provide token and URL. You'd create a new folder, put this in as package.json, run npm install, add token + URL, and then do npm start. It should work.

{
  "name": "figmagic-minimal-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "npm run init && node node_modules/figmagic/build/index.js --debug --token YOUR_TOKEN --url YOUR_URL",
    "init": "node node_modules/figmagic/build/index.js init"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "figmagic": "^4.0.12"
  }
}

[CodeByAlex]

Thanks a bunch for looking into this!

I tried with node v14 and got the same error.

Note (same results as with 12): Removing the config file and just using the .env file with the token and url set, I get the following: Error: Error: Error: Missing one or more of required arguments: "figmaToken", "figmaUrl" when attempting to get data from Figma API!

If I use the generated config file with the token and url added I get: Error: Error: Could not retrieve any data. Are you missing a valid API key?

[CodeByAlex]

"figmagic": "^4.0.12"

Ill give it a go

[mikaelvesavuori]

One thing, Google might like the trailing comma, but JSON parsing is prone to die on that. So in any RC or JSON files, avoid trailing comma's like you'd avoid passive smoking. Thinking of your previous example:


{
 "templates": {
  "templatePathGraphic": "./node_modules/figmagic/templates/graphic",
  "templatePathReact": "./node_modules/figmagic/templates/react",
  "templatePathStorybook": "./node_modules/figmagic/templates/story",
  "templatePathStyled": "./node_modules/figmagic/templates/styled"
 },
 "token": “XXX”,
 "url": “XXX”, <----- Will kill things
}


[CodeByAlex]

Good callout about the comma, @mikaelvesavuori. Ill watch out for that. I tried adding those commands to the package.json, added in the token and url in the right place, set the version of figmagic to "figmagic": "^4.0.12", removed all my old configurations (started from scratch), deleted the node modules and package lock and ran npm install, and then I ran the start command.

It created the new config file and ran but I recieved a similar error (one more "error:"): Error: Error: Error: Error: Missing one or more of required arguments: "figmaToken", "figmaUrl" when attempting to get data from Figma API!

*Im still running node 14

[mikaelvesavuori]

For the time being there is nothing further I can do on my end. I am unable to reproduce a set of steps or events that end up with this error. Given that the minimal working proof does not work for you, I am inclined on settling on something unknown on your end.

Again, I was seeing very intermittently a few instances of this, but it's all highly bizarre since there are several sets of redundancy before that error occurs. In short, that error shouldn't really ever come up, especially given that we do see the token and URL in debug mode.

I'll leave this open, but I don't have any leads right now.

[CodeByAlex]

Okay thanks @mikaelvesavuori. Ill keep trying. Please let me know if there is anything else you can think of that I should try. I'm a bit concerned about the number of "errors:" that are showing up in the log. Would increasing the logging help or do we not know enough about the error to determine the exact place to put the log?

[mikaelvesavuori]

I believe the logging and error handling (at least when it comes to quantity) to be high, even sometimes excessive. The Error: nesting is just because of ugly use of throw new Error() that does that.

Some context: If you'd go through the source code, you'd find that the configuration is one of the first steps, and right after that (after also checking if the user wants to recompile from local data or fetch new data) we'll split off into getDataLocal() or getDataRemote(). The Figma API is called for any graphics (which I suspect are out-of-scope here) and for the bulk JSON data, similar to what your regular API call does.

getDataRemote() requires a string for token and URL. That function then calls a sub-function called getFromApi() which also takes the same parameters. That's the point where your error is called. So it's pretty troubling that two known values somehow go up in smoke (?!) during that call chain. It's too late for me to have a logical, good answer to that.

[mikaelvesavuori]

You could always try this one: It uses a stricter type check on the above, removes the error throwing and outputs what the values are. This is freshly-compiled from my computer.

If you want to keep helping out, see if this package will work for you.

build.zip

To use it: download, extract to your testing folder, point any Figmagic commands to the build you got from me.

[CodeByAlex]

That worked perfectly! Could you publish that version?

[mikaelvesavuori]

Perfect. I will look at releasing an update of some sort tomorrow.

[CodeByAlex]

Thank you!

[mikaelvesavuori]

This will be out shortly in 4.0.13. I am not 100% happy about removing a null check—which should not even have triggered in the first place—to be removed. But if it works, then let's roll with it.