search

fabe / gatsby-source-figma

🍭 Gatsby plugin for using Figma documents as a data source.
https://npm.im/gatsby-source-figma
MIT License
126 stars 8 forks source link

Can't get it running #7

Open leshokunin opened 5 years ago

leshokunin commented 5 years ago

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:

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 commented 5 years ago

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 commented 5 years ago

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 notifications@github.com 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 https://github.com/fabe/gatsby-source-figma/issues/7#issuecomment-485259363, or mute the thread https://github.com/notifications/unsubscribe-auth/AHMD5CHW43QY4PUQGXQ4OCTPRR755ANCNFSM4HHLBPUA .

fabe commented 5 years ago

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 commented 5 years ago

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'.

⠄ source and transform nodes

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

Cheers,

fabe commented 5 years ago

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

imehr commented 5 years ago

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 commented 5 years ago

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".