gatsby: Infinite loop with graphqlTypegen and tailwindcss

Preliminary Checks

This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

If you have a project with tailwindcss and graphqlTypegen the build triggers an infinite loop due to the gatsby-types.d.ts changing.

Reproduction Link

https://github.com/nrandell/gatsby-tailwind-loop

Steps to Reproduce

yarn install yarn develop --verbose

Expected Result

A single pass at building

…

You can now view my-gatsby-site in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 11.094s
verbose Transition to "initialGraphQLTypegen"
verbose Successfully created schema.graphql
success Writing page-data.json files to public directory - 0.099s - 3/4 40.41/s
verbose Wrote fragments.graphql file to .cache
success Generating GraphQL and TypeScript types - 0.251s
verbose Transition to "waiting"

Actual Result

It continues a number of times - some projects are infinite!

You can now view my-gatsby-site in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 11.263s
verbose Transition to "initialGraphQLTypegen"
verbose Successfully created schema.graphql
success Writing page-data.json files to public directory - 0.090s - 3/4 44.59/s
verbose Wrote fragments.graphql file to .cache
verbose Webpack file changed: D:\temp\ts\my-gatsby-site\src\gatsby-types.d.ts
success Generating GraphQL and TypeScript types - 0.321s
verbose Transition to "waiting"
verbose Transition to "runningQueries"
success onPreExtractQueries - 0.003s
verbose Re-Generating fragments.graphql & TS Types
success extract queries from components - 0.044s
verbose Transition to "runningQueries" > "waitingPendingQueries"
verbose Wrote fragments.graphql file to .cache
verbose Transition to "runningQueries" > "writingRequires"
success write out requires - 0.004s
verbose Transition to "runningQueries" > "calculatingDirtyQueries"
verbose Transition to "runningQueries" > "runningStaticQueries"
verbose Transition to "runningQueries" > "runningPageQueries"
verbose Transition to "runningQueries" > "waitingForJobs"
verbose Transition to "runningQueries" > "done"
verbose Transition to "recompiling"
⠋ Re-building development bundle
warn Warning: Event "xstate.after(200)#waitingMachine.aggregatingFileChanges" was sent to stopped service "waitingMachine". This service has already
reached its final state, and will not transition.
Event: {"type":"xstate.after(200)#waitingMachine.aggregatingFileChanges"}
success Re-building development bundle - 0.254s
verbose Webpack file changed: D:\temp\ts\my-gatsby-site\src
verbose Transition to "waiting"
success Writing page-data.json files to public directory - 0.027s - 0/1 37.55/s
verbose Transition to "runningQueries"
success onPreExtractQueries - 0.003s
verbose Re-Generating fragments.graphql & TS Types
success extract queries from components - 0.035s
verbose Transition to "runningQueries" > "waitingPendingQueries"
verbose Wrote fragments.graphql file to .cache
verbose Transition to "runningQueries" > "writingRequires"
success write out requires - 0.003s
verbose Transition to "runningQueries" > "calculatingDirtyQueries"
verbose Transition to "runningQueries" > "runningStaticQueries"
verbose Transition to "runningQueries" > "runningPageQueries"
verbose Transition to "runningQueries" > "waitingForJobs"
verbose Transition to "runningQueries" > "done"
verbose Transition to "recompiling"
warn Warning: Event "xstate.after(200)#waitingMachine.aggregatingFileChanges" was sent to stopped service "waitingMachine". This service has already
reached its final state, and will not transition.
Event: {"type":"xstate.after(200)#waitingMachine.aggregatingFileChanges"}
success Re-building development bundle - 0.179s
verbose Webpack file changed: D:\temp\ts\my-gatsby-site\src
verbose Transition to "waiting"
success Writing page-data.json files to public directory - 0.029s - 0/1 34.74/s
verbose Transition to "runningQueries"
success onPreExtractQueries - 0.003s
verbose Re-Generating fragments.graphql & TS Types
success extract queries from components - 0.038s
verbose Transition to "runningQueries" > "waitingPendingQueries"
verbose Wrote fragments.graphql file to .cache
verbose Transition to "runningQueries" > "writingRequires"
success write out requires - 0.003s
verbose Transition to "runningQueries" > "calculatingDirtyQueries"
verbose Transition to "runningQueries" > "runningStaticQueries"
verbose Transition to "runningQueries" > "runningPageQueries"
verbose Transition to "runningQueries" > "waitingForJobs"
verbose Transition to "runningQueries" > "done"
verbose Transition to "recompiling"

Environment

System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 AMD Ryzen 7 PRO 4750G with Radeon Graphics
  Binaries:
    Node: 16.11.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.0.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.10.4
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (101.0.1210.53), ChromiumDev (User home = 'C:\Users\nickr\AppData\Local\IISExpress'
IIS USER HOME configured)
  npmPackages:
    gatsby: ^4.15.0 => 4.15.1 
    gatsby-plugin-image: ^2.15.0 => 2.15.0 
    gatsby-plugin-manifest: ^4.15.0 => 4.15.0 
    gatsby-plugin-postcss: ^5.15.0 => 5.15.0 
    gatsby-plugin-react-helmet: ^5.15.0 => 5.15.0 
    gatsby-plugin-sharp: ^4.15.0 => 4.15.0 
    gatsby-plugin-sitemap: ^5.15.0 => 5.15.0 
    gatsby-source-filesystem: ^4.15.0 => 4.15.0 
    gatsby-transformer-sharp: ^4.15.0 => 4.15.0

Config Flags

No response

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 5
Comments: 19 (12 by maintainers)

Most upvoted comments

Hi!

This issue is happening due to a misconfiguration of Tailwind CSS on your end. They have this documentation section: https://tailwindcss.com/docs/content-configuration#styles-rebuild-in-an-infinite-loop

Exactly that is happening with your tailwind.config.js:

Once you don’t watch the generated file anymore it doesn’t rebuild.

So https://www.gatsbyjs.com/docs/how-to/styling/tailwind-css/#4-configuring-your-content-path should get a paragraph saying that when GraphQL Typegen is used the generated file should be ignored.

+10

LekoArts on May 30, 2022

This is the solution for my case

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/*.{js,jsx,ts,tsx}',
    './src/components/**/*.{js,jsx,ts,tsx}'
  ],
  theme: {},
  variants: {},
  plugins: []
};

Ilham-Pratama on Jun 13, 2022

This error originated with gatsby-source-filesystem for me. In my gatsby-config.ts I had

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
        ignore: [`images/galleries/**/*`, `files/**/*`], // ignore other source-filesystems
      },
    },

Commenting this out fixed the infinite looping for me.

nsbruce on Jun 20, 2022

The problem is that the gatsby-types.d.ts file is generated in the src directory. If there was an option to generate it somewhere else, the infinite loop would not happen. Generating a file in the same directory as source files is a bad idea anyway.

therealgilles on Jun 20, 2022

Please report that to Tailwind, it’s nothing we can do about 😃

LekoArts on Jun 7, 2022

I can’t promise a timeline for when options for graphqlTypegen are added, so you’ll need to update your tailwind configuration.

The action item for this issue here will be updating our documentation to mention that you should update your content option like the Tailwind CSS folks said.

LekoArts on May 30, 2022

According to glob tester website this should work:

content: ["./src/**/!(*.d).{ts,tsx}"],

But it doesn’t, in my testing. So for this you should open a bug report with Tailwind CSS.

LekoArts on May 30, 2022