RangeError: Maximum call stack size exceeded at candidatePermutations #7330

abheist · 2022-02-04T19:23:57Z

abheist
Feb 4, 2022

Hi, getting the following error: as soon as I add tailwind.

Deploying build outputs...
--
16:52:04.342 | Done with "api/subscribe.ts"
16:53:01.456 | failed Building production JavaScript and CSS bundles - 75.813s
16:53:01.462 | error Generating JavaScript bundles failed
16:53:01.462 |  
16:53:01.462 | Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
16:53:01.462 | RangeError: Maximum call stack size exceeded
16:53:01.462 | at candidatePermutations (/vercel/path3/node_modules/tailwindcss/lib/lib/generateRules.js:36:32)
16:53:01.462 | at candidatePermutations (/vercel/path3/node_modules/tailwindcss/lib/lib/generateRules.js:61:12)
16:53:01.462 | at candidatePermutations.next (<anonymous>)
16:53:01.462 | at candidatePermutations (/vercel/path3/node_modules/tailwindcss/lib/lib/generateRules.js:61:12)
16:53:01.462 | at candidatePermutations.next (<anonymous>)
16:53:01.462 | at candidatePermutations (/vercel/path3/node_modules/tailwindcss/lib/lib/generateRules.js:61:12)
16:53:01.462 | at candidatePermutations.next (<anonymous>)
16:53:01.462 | at candidatePermutations (/vercel/path3/node_modules/tailwindcss/lib/lib/generateRules.js:61:12)
16:53:01.462 | at candidatePermutations.next (<anonymous>)
16:53:01.462 | at candidatePermutations (/vercel/path3/node_modules/tailwindcss/lib/lib/generateRules.js:61:12)
16:53:01.463 | at candidatePermutations.next (<anonymous>)
16:53:01.463 | at candidatePermutations (/vercel/path3/node_modules/tailwindcss/lib/lib/generateRules.js:61:12)
16:53:01.463 | at candidatePermutations.next (<anonymous>)
16:53:01.463 | at candidatePermutations (/vercel/path3/node_modules/tailwindcss/lib/lib/generateRules.js:61:12)
16:53:01.463 | at candidatePermutations.next (<anonymous>)
16:53:01.463 | at candidatePermutations (/vercel/path3/node_modules/tailwindcss/lib/lib/generateRules.js:61:12)
16:53:01.464 | not finished Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs - 85.877s
16:53:02.505 | error Command failed with exit code 1.
16:53:02.505 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
16:53:02.513 | Error: Command "yarn run build" exited with 1
16:53:04.697 | Build completed. Populating build cache...

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: ['./public/**/*.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    fontFamily: {
      sans: [
        'Open Sans',
        'ui-sans-serif',
        'system-ui',
        '-apple-system',
        'BlinkMacSystemFont',
        'Segoe UI',
        'Roboto',
        'Helvetica Neue',
        'Arial',
        'Noto Sans',
        'sans-serif',
        'Apple Color Emoji',
        'Segoe UI Emoji',
        'Segoe UI Symbol',
        'Noto Color Emoji',
      ],
      serif: [
        'Playfair Display',
        'ui-serif',
        'Georgia',
        'Cambria',
        'Times New Roman',
        'Times',
        'serif',
      ],
      mono: [
        'dm',
        'ui-monospace',
        'SFMono-Regular',
        'Menlo',
        'Monaco',
        'Consolas',
        'Liberation Mono',
        'Courier New',
        'monospace',
      ],
    },
    extend: {
      colors: {
        'indigo-primary': '#5945e4',
      },
      typography: theme => ({
        DEFAULT: {
          css: {
            pre: {
              paddingTop: '16px !important',
              paddingRight: '0px !important',
              paddingBottom: '8px !important',
              paddingLeft: '0px !important',
            },
            code: {
              color: theme('colors.gray.900'),
              background: theme('colors.indigo.50'),
              borderRadius: '6px',
              padding: '0.2em 0.4em',
              fontWeight: '100',
              userSelect: 'all',
            },
            'code::before': {
              content: '""',
            },
            'code::after': {
              content: '""',
            },
            blockquote: {
              fontWeight: '600',
              borderLeftColor: theme('colors.indigo.500'),
            },
            'blockquote p:first-of-type::before': {
              content: '',
            },
            'blockquote p:last-of-type::after': {
              content: '',
            },
          },
        },
      }),
    },
  },
  plugins: [require('@tailwindcss/typography')],
}

Global style contains apply

@tailwind base;

:root {
  --primary-color: #5945e4;
  --animatedUnderlineHeight: 1rem;
  --animatedUnderlineBgColor: #ff7eb2;
}

::-moz-selection {
  @apply text-gray-800;
  @apply bg-indigo-200;
}

::selection {
  @apply text-gray-800;
  @apply bg-indigo-200;
}

pre ::selection {
  @apply text-indigo-500;
  @apply bg-indigo-50;
  @apply bg-opacity-10;
}

pre ::-moz-selection {
  @apply text-indigo-500;
  @apply bg-indigo-50;
  @apply bg-opacity-10;
}

body {
  @apply text-gray-800;
  @apply antialiased;
}

h1::-moz-selection,
h2::-moz-selection,
h3::-moz-selection,
h4::-moz-selection,
h5::-moz-selection,
h6::-moz-selection {
  @apply text-white;
  text-shadow: 0 0 0 var(--primary-color),
    0.0025em 0.0025em 0 var(--primary-color),
    0.005em 0.005em 0 var(--primary-color),
    0.0075em 0.0075em 0 var(--primary-color),
    0.01em 0.01em 0 var(--primary-color),
    0.0125em 0.0125em 0 var(--primary-color),
    0.015em 0.015em 0 var(--primary-color),
    0.0175em 0.0175em 0 var(--primary-color),
    0.02em 0.02em 0 var(--primary-color),
    0.0225em 0.0225em 0 var(--primary-color),
    0.025em 0.025em 0 var(--primary-color),
    0.0275em 0.0275em 0 var(--primary-color),
    0.03em 0.03em 0 var(--primary-color),
    0.0325em 0.0325em 0 var(--primary-color),
    0.035em 0.035em 0 var(--primary-color),
    0.0375em 0.0375em 0 var(--primary-color),
    0.04em 0.04em 0 var(--primary-color),
    0.0425em 0.0425em 0 var(--primary-color),
    0.045em 0.045em 0 var(--primary-color),
    0.0475em 0.0475em 0 var(--primary-color),
    0.05em 0.05em 0 var(--primary-color),
    0.0525em 0.0525em 0 var(--primary-color),
    0.055em 0.055em 0 var(--primary-color),
    0.0575em 0.0575em 0 var(--primary-color),
    0.06em 0.06em 0 var(--primary-color),
    0.0625em 0.0625em 0 var(--primary-color),
    0.065em 0.065em 0 var(--primary-color),
    0.0675em 0.0675em 0 var(--primary-color),
    0.07em 0.07em 0 var(--primary-color),
    0.0725em 0.0725em 0 var(--primary-color),
    0.075em 0.075em 0 var(--primary-color),
    0.0775em 0.0775em 0 var(--primary-color),
    0.08em 0.08em 0 var(--primary-color),
    0.0825em 0.0825em 0 var(--primary-color),
    0.085em 0.085em 0 var(--primary-color),
    0.0875em 0.0875em 0 var(--primary-color),
    0.09em 0.09em 0 var(--primary-color),
    0.0925em 0.0925em 0 var(--primary-color),
    0.095em 0.095em 0 var(--primary-color),
    0.0975em 0.0975em 0 var(--primary-color), 0.1em 0.1em 0 var(--primary-color);
}

h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection {
  @apply text-white;
  text-shadow: 0 0 0 var(--primary-color),
    0.0025em 0.0025em 0 var(--primary-color),
    0.005em 0.005em 0 var(--primary-color),
    0.0075em 0.0075em 0 var(--primary-color),
    0.01em 0.01em 0 var(--primary-color),
    0.0125em 0.0125em 0 var(--primary-color),
    0.015em 0.015em 0 var(--primary-color),
    0.0175em 0.0175em 0 var(--primary-color),
    0.02em 0.02em 0 var(--primary-color),
    0.0225em 0.0225em 0 var(--primary-color),
    0.025em 0.025em 0 var(--primary-color),
    0.0275em 0.0275em 0 var(--primary-color),
    0.03em 0.03em 0 var(--primary-color),
    0.0325em 0.0325em 0 var(--primary-color),
    0.035em 0.035em 0 var(--primary-color),
    0.0375em 0.0375em 0 var(--primary-color),
    0.04em 0.04em 0 var(--primary-color),
    0.0425em 0.0425em 0 var(--primary-color),
    0.045em 0.045em 0 var(--primary-color),
    0.0475em 0.0475em 0 var(--primary-color),
    0.05em 0.05em 0 var(--primary-color),
    0.0525em 0.0525em 0 var(--primary-color),
    0.055em 0.055em 0 var(--primary-color),
    0.0575em 0.0575em 0 var(--primary-color),
    0.06em 0.06em 0 var(--primary-color),
    0.0625em 0.0625em 0 var(--primary-color),
    0.065em 0.065em 0 var(--primary-color),
    0.0675em 0.0675em 0 var(--primary-color),
    0.07em 0.07em 0 var(--primary-color),
    0.0725em 0.0725em 0 var(--primary-color),
    0.075em 0.075em 0 var(--primary-color),
    0.0775em 0.0775em 0 var(--primary-color),
    0.08em 0.08em 0 var(--primary-color),
    0.0825em 0.0825em 0 var(--primary-color),
    0.085em 0.085em 0 var(--primary-color),
    0.0875em 0.0875em 0 var(--primary-color),
    0.09em 0.09em 0 var(--primary-color),
    0.0925em 0.0925em 0 var(--primary-color),
    0.095em 0.095em 0 var(--primary-color),
    0.0975em 0.0975em 0 var(--primary-color), 0.1em 0.1em 0 var(--primary-color);
}

.highlight-line {
  @apply bg-indigo-50;
  @apply bg-opacity-10;
  @apply border-l-4;
  @apply border-yellow-500;
}

.strike {
  position: relative;
  display: inline-block;
}

.strike::before {
  content: '';
  border-bottom: 1px solid black;
  width: 100%;
  position: absolute;
  right: 0;
  top: 63%;
}

.wrap p a {
  position: relative;
  text-decoration: none;
  @apply text-indigo-600;
  @apply font-medium;
}
.wrap p a::after {
  content: '';
  @apply bg-indigo-200;
  position: absolute;
  left: 12px;
  bottom: -6px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  z-index: -1;
  transition: 0.35s cubic-bezier(0.25, 0.1, 0, 2.05);
}

.wrap p a:hover:after {
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 100%;
}

.gatsby-highlight {
  -webkit-overflow-scrolling: touch;
}

.gatsby-highlight pre[class*='language-'] {
  -webkit-overflow-scrolling: touch;
}

.shake {
  animation: shake 0.5s infinite;
}

.shake-horizontal {
  animation: shake-horizontal 0.5s infinite;
}

@keyframes shake {
  0% {
    transform: translate(2px, 1px) rotate(-90deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-92deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(-93deg);
  }
  30% {
    transform: translate(0px, 2px) rotate(-90deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(-91deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-91deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(-90deg);
  }
  70% {
    transform: translate(2px, 1px) rotate(-92deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(-94deg);
  }
  90% {
    transform: translate(2px, 2px) rotate(-90deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-91deg);
  }
}

@keyframes shake-horizontal {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

@tailwind components;
@tailwind utilities;

Repo link: https://github.com/abheist/abheist/blob/to-vercel/src/style.css

Please let me know if I'm missing anything!

Answered by abheist

Feb 8, 2022

Fixed in this release.

https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.19

View full answer

thecrypticace · 2022-02-04T19:53:11Z

thecrypticace
Feb 4, 2022
Maintainer

I wasn't able to reproduce this using npm run build (I get an error about MDX) nor with ./node_modules/.bin/tailwind --input src/style.css but I've opened a PR with a possible solution though I'm honestly surprised that this is a problem at all.

Any chance you could fixup the repo / branch / whatever to reproduce the issue when running build?

10 replies

abheist Feb 4, 2022
Author

Just pushed the fixed code, running fine gatsby build in local now.

https://github.com/abheist/abheist/tree/to-vercel

abheist Feb 4, 2022
Author

But giving error while deploying

failed Building production JavaScript and CSS bundles - 78.158s
--
02:05:07.824 | error Generating JavaScript bundles failed
02:05:07.824 |  
02:05:07.824 | Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
02:05:07.824 | RangeError: Maximum call stack size exceeded
02:05:07.824 | at candidatePermutations (/vercel/path3/node_modules/tailwindcss/lib/lib/generateRules.js:36:32)
02:05:07.824 | at candidatePermutations (/vercel/path3/node_modules/tailwindcss/lib/lib/generateRules.js:61:12)
02:05:07.824 | at candidatePermutations.next (<anonymous>)
02:05:07.824 | at candidatePermutations (/vercel/path3/node_modules/tailwindcss/lib/lib/generateRules.js:61:12)
02:05:07.824 | at candidatePermutations.next (<anonymous>)
02:05:07.824 | at candidatePermutations (/vercel/path3/node_modules/tailwindcss/lib/lib/generateRules.js:61:12)
02:05:07.824 | at candidatePermutations.next (<anonymous>)
02:05:07.824 | at candidatePermutations (/vercel/path3/node_modules/tailwindcss/lib/lib/generateRules.js:61:12)
02:05:07.824 | at candidatePermutations.next (<anonymous>)
02:05:07.824 | at candidatePermutations (/vercel/path3/node_modules/tailwindcss/lib/lib/generateRules.js:61:12)
02:05:07.824 | at candidatePermutations.next (<anonymous>)
02:05:07.824 | at candidatePermutations (/vercel/path3/node_modules/tailwindcss/lib/lib/generateRules.js:61:12)
02:05:07.824 | at candidatePermutations.next (<anonymous>)
02:05:07.824 | at candidatePermutations (/vercel/path3/node_modules/tailwindcss/lib/lib/generateRules.js:61:12)
02:05:07.824 | at candidatePermutations.next (<anonymous>)
02:05:07.824 | at candidatePermutations (/vercel/path3/node_modules/tailwindcss/lib/lib/generateRules.js:61:12)
02:05:07.826 | not finished Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs - 88.946s
02:05:08.862 | error Command failed with exit code 1.
02:05:08.862 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
02:05:08.874 | Error: Command "yarn run build" exited with 1
02:05:10.587 | Build completed. Populating build cache...

abheist Feb 7, 2022
Author

@thecrypticace, any update when this fixed can be released! :(

Or is there any temp-fix which I can use?

thecrypticace Feb 7, 2022
Maintainer

gonna see if we can get it out today!

abheist Feb 7, 2022
Author

Thanks!

abheist · 2022-02-08T07:53:00Z

abheist
Feb 8, 2022
Author

Fixed in this release.

https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.19

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RangeError: Maximum call stack size exceeded at candidatePermutations #7330

{{title}}

Replies: 2 comments 10 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

RangeError: Maximum call stack size exceeded at candidatePermutations #7330

abheist Feb 4, 2022

Replies: 2 comments · 10 replies

thecrypticace Feb 4, 2022 Maintainer

abheist Feb 4, 2022 Author

abheist Feb 4, 2022 Author

abheist Feb 7, 2022 Author

thecrypticace Feb 7, 2022 Maintainer

abheist Feb 7, 2022 Author

abheist Feb 8, 2022 Author

abheist
Feb 4, 2022

Replies: 2 comments 10 replies

thecrypticace
Feb 4, 2022
Maintainer

abheist Feb 4, 2022
Author

abheist Feb 4, 2022
Author

abheist Feb 7, 2022
Author

thecrypticace Feb 7, 2022
Maintainer

abheist Feb 7, 2022
Author

abheist
Feb 8, 2022
Author