Can't get it running

[leshokunin]

Hello,

This looks super helpful. I'm trying to get it going.

I created something from scratch using: gatsby new reactTest
Then I edited the config.js and added:

• my access token, and for the file ID,
• for the id from the Figma URL I get when I open the sketch in the browser: TV9yeRhO....

When I run the example from the documentation:

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
  {
    resolve: `gatsby-source-figma`,
    options: {
      // For files:
      //fileId: `TV9yeRhO....`,
      // For projects:
      projectId: `TV9yeRhO....`,
      // Get an access token from Figma Account Settings.
      accessToken: `XXXXX-XXXX0137-6a01-4b4a-a85c-04b5ac88d0d7`,
    },
  },
],
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

I get this error:

{
  "errors": [
    {
      "message": "Cannot query field \"allFigmaDocument\" on type \"Query\".",
      "locations": [
        {
          "line": 2,
          "column": 3
        }
      ],
      "stack": [
        "GraphQLError: Cannot query field \"allFigmaDocument\" on type \"Query\".",
        "    at Object.Field (C:\\reactTest2\\node_modules\\graphql\\validation\\rules\\FieldsOnCorrectType.js:64:31)",
        "    at Object.enter (C:\\reactTest2\\node_modules\\graphql\\language\\visitor.js:334:29)",
        "    at Object.enter (C:\\reactTest2\\node_modules\\graphql\\language\\visitor.js:385:25)",
        "    at visit (C:\\reactTest2\\node_modules\\graphql\\language\\visitor.js:252:26)",
        "    at validate (C:\\reactTest2\\node_modules\\graphql\\validation\\validate.js:63:22)",
        "    at C:\\reactTest2\\node_modules\\express-graphql\\dist\\index.js:154:52",
        "    at process._tickCallback (internal/process/next_tick.js:68:7)"
      ]
    }
  ]
}

Any idea how to fix that?
Could it be due to the fact that I installed gatsby-source-figma via yarn, but my gatsby prefers npm as package manager?

[fabe]

Hey @leshokunin! I just answered another question similar to this one about one of my Gatsby starters. I'm pretty sure it's related to npm not linking the dependencies correctly. Could you try to re-install all dependencies via yarn and see if that helps? Thanks!

I just set up clean install via yarn and everything worked as expected.

[leshokunin]

What do you mean by clean install here? Erase gatsby completely, erase npm, something else? Thanks!

…

On Sun, Apr 21, 2019 at 08:12 Fabian Schultz ***@***.***> wrote: Hey @leshokunin <https://github.com/leshokunin>! I just answered another question similar to this one about one of my Gatsby starters. I'm pretty sure it's related to npm not linking the dependencies correctly. Could you try to re-install all dependencies via yarn and see if that helps? I just set up clean install via yarn and everything worked as expected. Thanks! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHMD5CHW43QY4PUQGXQ4OCTPRR755ANCNFSM4HHLBPUA> .

[fabe]

Just the dependencies (node_modules) and maybe even the .cache folder.

# Delete node_modules
rm -rf node_modules/

# Delete Gatsby cache
rm -rf .cache/

# Install dependencies
yarn install

[imehr]

I have similar issue. Really like to try this and see how it works. I tried your solutions to clean node modules and re install them through yarn, but didn't help. Here is what I get:

error Plugin gatsby-source-figma returned an error

TypeError: Cannot destructure property createNode of 'undefined' or 'null'.

• gatsby-node.js:19 Object.exports.sourceNodes
  [mmprojects-blog]/[gatsby-source-figma]/gatsby-node.js:19:26

• api-runner-node.js:110 runAPI
  [mmprojects-blog]/[gatsby]/dist/utils/api-runner-node.js:110:36

• api-runner-node.js:187
  [mmprojects-blog]/[gatsby]/dist/utils/api-runner-node.js:187:33

• map.js:27
  [mmprojects-blog]/[gatsby]/[async]/internal/map.js:27:9

• eachOfLimit.js:66 replenish
  [mmprojects-blog]/[gatsby]/[async]/internal/eachOfLimit.js:66:17

• eachOfLimit.js:50 iterateeCallback
  [mmprojects-blog]/[gatsby]/[async]/internal/eachOfLimit.js:50:17

• onlyOnce.js:12
  [mmprojects-blog]/[gatsby]/[async]/internal/onlyOnce.js:12:16

• map.js:29
  [mmprojects-blog]/[gatsby]/[async]/internal/map.js:29:13

• util.js:16 tryCatcher
  [mmprojects-blog]/[bluebird]/js/release/util.js:16:23

• nodeify.js:23 Promise.successAdapter
  [mmprojects-blog]/[bluebird]/js/release/nodeify.js:23:30

• promise.js:566 Promise._settlePromise
  [mmprojects-blog]/[bluebird]/js/release/promise.js:566:21

• promise.js:606 Promise._settlePromiseCtx
  [mmprojects-blog]/[bluebird]/js/release/promise.js:606:10

• async.js:142 _drainQueueStep
  [mmprojects-blog]/[bluebird]/js/release/async.js:142:12

• async.js:131 _drainQueue
  [mmprojects-blog]/[bluebird]/js/release/async.js:131:9

• async.js:147 Async._drainQueues
  [mmprojects-blog]/[bluebird]/js/release/async.js:147:5

• async.js:17 Immediate.Async.drainQueues
  [mmprojects-blog]/[bluebird]/js/release/async.js:17:14

⠄ source and transform nodes

It just stays there and nothing happens. Any idea how to fix this?

Cheers,

[fabe]

@imehr Which version of Gatsby are you using? Sounds like a version mismatch, this plugin only works with gatsby > 2.

[imehr]

It is the latest version of gatsby (2.5.9). I did another setup today with default gatsby blog . The blog works properly, as soon I I install Figma plugin I get this new error:

----:my-blog-starter ----$ gatsby develop
success open and validate gatsby-configs — 0.012 s
success load plugins — 1.111 s
success onPreInit — 0.003 s
success initialize cache — 0.016 s
success copy gatsby files — 0.060 s
warning gatsby-plugin-feed was initialized in gatsby-config.js without a feeds option.
This means that we the plugin will use the internal RSS feed creation, which may not match your use case.
This behavior will be removed in the next major release of gatsby-plugin-feed.
For more info, check out: https://gatsby.app/adding-rss-feed
success onPreBootstrap — 0.009 s
success source and transform nodes — 30.090 s
error UNHANDLED REJECTION

Error: Schema must contain uniquely named types but contains multiple types named "FigmaDOCUMENTPagesChildrenChildrenChildrenChildrenChildrenChildrenChildrenChildrenChildrenChildrenC hildrenChildrenBackgroundColor".

----:my-blog-starter ----$

[daimz]

I'm getting the same error that @imehr has.

Seems if I include multiple plugins like @leshokunin did in his example the error goes away:

plugins: [
    {
      resolve: 'gatsby-source-figma',
      options: figmaConfig,
    },
  ],
  plugins: [
    'gatsby-transformer-remark',
    'gatsby-transformer-sharp',
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-source-contentful',
      options: contentfulConfig,
    }
  ],

But then the plugin is not used and when I do:

  plugins: [
    'gatsby-transformer-remark',
    'gatsby-transformer-sharp',
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-source-contentful',
      options: contentfulConfig,
    },
    {
      resolve: 'gatsby-source-figma',
      options: figmaConfig,
    },
  ],

I get the error:

error UNHANDLED REJECTION
  Error: Schema must contain uniquely named types but contains multiple types named "FigmaDOCUMENTPagesChildrenChildrenChildrenChildrenChildrenBackgroundColor".