Uncaught TypeError: Cannot read property '3' of undefined

[terryupton]

I am hitting these errors when trying to import a config file.

VM958:74 Uncaught TypeError: Cannot read property '3' of undefined
    at Object.n.convertConfigColor (<anonymous>:74:85395)
    at Object.n.fetchConfigColors (<anonymous>:74:85844)
    at Object.addColorStyles (<anonymous>:16:51265)
    at ye (<anonymous>:16:9347)
    at r (<anonymous>:16:9041)
    at <anonymous>:74:27526
    at _e (<anonymous>:74:27778)
    at r (<anonymous>:74:27954)
    at onClick (<anonymous>:59:6281)
    at Object.<anonymous> (<anonymous>:51:1124)

Here is the config file:

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    extend: {
      colors: {
        currentColor: 'currentColor',

        'pink': {
          100: '#FBEBF1',
          200: '#F6CDDB',
          300: '#F1AFC5',
          400: '#E6729A',
          500: '#DB366E',
          600: '#C53163',
          700: '#832042',
          800: '#631832',
          900: '#421021',
        },

        social: {
          'twitter': '#00ACED',
          'facebook': '#3B5998',
          'instagram': '#C13584',
          'linkedin': '#007BB6',
          'youtube': '#BB0000',
          'email': '#a0aec0'
        },
      },

      maxWidth: {
        '8xl': '90rem',
        '9xl': '100rem',
      }
    }
  },
  variants: {},
  corePlugins: {
    container: false,
  },
  plugins: [
    require('@tailwindcss/ui'),
  ]
};

I then reduced my config down to this to see if it would work, but hit the same issues:

module.exports = {
  theme: {
    extend: {
      colors: {
        currentColor: 'currentColor',

        'pink': {
          100: '#FBEBF1',
          200: '#F6CDDB',
          300: '#F1AFC5',
          400: '#E6729A',
          500: '#DB366E',
          600: '#C53163',
          700: '#832042',
          800: '#631832',
          900: '#421021',
        },

        social: {
          'twitter': '#00ACED',
          'facebook': '#3B5998',
          'instagram': '#C13584',
          'linkedin': '#007BB6',
          'youtube': '#BB0000',
          'email': '#a0aec0'
        },
      },

      maxWidth: {
        '8xl': '90rem',
        '9xl': '100rem',
      }
    }
  },
  variants: {},
  corePlugins: {
    container: false,
  },
  plugins: [
  ]
};

Any ideas on how to resolve?

[terryupton]

Ah just solved it. It was the currentColor: 'currentColor', causing the issue.