New Install: TypeError: Cannot read property '1' of undefined

[gaurangrshah]

I have a nextjs typescript project and I get the errors below after installing the package:

yarn add tailwindcss-radix-colors

then I updated my tailwind.config:

  plugins: [
    require('tailwindcss-radix-colors'),
  ],

This is the erorr in my tw:build script terminal:

TypeError: Cannot read property '1' of undefined
    at module.exports.plugin.theme.colors.transparent (/Users/gshah/gs/projects/swtchr-sandbox/swtchr/node_modules/tailwindcss-radix-colors/src/index.js:23:39)
    at registerPlugins (/Users/gshah/gs/projects/swtchr-sandbox/swtchr/node_modules/tailwindcss/lib/lib/setupContextUtils.js:777:61)
    at createContext (/Users/gshah/gs/projects/swtchr-sandbox/swtchr/node_modules/tailwindcss/lib/lib/setupContextUtils.js:1168:5)
    at createContext (/Users/gshah/gs/projects/swtchr-sandbox/swtchr/node_modules/tailwindcss/lib/processTailwindFeatures.js:44:61)
    at Object.getContext (/Users/gshah/gs/projects/swtchr-sandbox/swtchr/node_modules/tailwindcss/lib/cli/build/plugin.js:205:24)
    at /Users/gshah/gs/projects/swtchr-sandbox/swtchr/node_modules/tailwindcss/lib/cli/build/plugin.js:252:38
    at /Users/gshah/gs/projects/swtchr-sandbox/swtchr/node_modules/tailwindcss/lib/processTailwindFeatures.js:46:11
    at Object.Once (/Users/gshah/gs/projects/swtchr-sandbox/swtchr/node_modules/tailwindcss/lib/cli/build/plugin.js:260:19)
    at LazyResult.runOnRoot (/Users/gshah/gs/projects/swtchr-sandbox/swtchr/node_modules/postcss/lib/lazy-result.js:337:23)
    at LazyResult.runAsync (/Users/gshah/gs/projects/swtchr-sandbox/swtchr/node_modules/postcss/lib/lazy-result.js:393:26)

This is the error in my node terminal:

error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[1].oneOf[11].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[1].oneOf[11].use[2]!./node_modules/react-cmdk/dist/cmdk.css
TypeError: Cannot read property '1' of undefined
Import trace for requested module:
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[1].oneOf[11].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[1].oneOf[11].use[2]!./node_modules/react-cmdk/dist/cmdk.css
./node_modules/react-cmdk/dist/cmdk.css
./src/components/v0/controls/cmd-palette/cmd-palette.tsx
./src/components/v0/controls/cmd-palette/index.ts
./src/components/v0/controls/index.ts
./src/components/v0/index.ts

[mrcaidev]

Cannot reproduce. Are you using the latest version?

[gaurangrshah]

Cannot reproduce. Are you using the latest version?

Yes. This was a first time install attempt. I'll try to create a reproduction and will share back here.

[ysulyma]

I'm encountering this when I use custom colors along with this plugin:

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        secondary: "var(--gray11)",
      },
    },
  },
  plugins: [require("tailwindcss-radix-colors")],
};

[mrcaidev]

I'm encountering this when I use custom colors along with this plugin:

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        secondary: "var(--gray11)",
      },
    },
  },
  plugins: [require("tailwindcss-radix-colors")],
};

In previous versions, the plugin cannot handle custom colors, as it only expected Radix colors as all of its input.

In v0.5.0, this issue is addressed. Try it out and let me know if you have any problems!

Speaking the original issue on new installation, I still can't locate the problem. Waiting for a reproduction example. :)

[paperpluto]

I am having the same issue.

Here's the sandbox : https://codesandbox.io/p/sandbox/vibrant-buck-87h9tn?file=%2Ftailwind.config.js%3A21%2C3

[paperpluto]

It works but not for from which I was trying to extend white and black.

The error occurs because it's already defined in the plugin file.

Can you update the color list as here there is not white or black (generic colors)

[gaurangrshah]

then I updated my tailwind.config:

We ended up going another route, we're now using shadcn-ui - which uses radix under the hood. The issue never presented itself afterwards.

[mrcaidev]

Fixed in v0.5.1.

I see the point. The plugin is generating component classes for black and white, which works well if the colors are not extended (thus not including black and white). But after extension, the plugin tries to find black.[x] and white.[x], and the problem starts here.

The error occurs because it's already defined in the plugin file.

Can you update the color list as here there is not white or black (generic colors)

Thanks for pointing out! However, black and white are not going to be removed from the color list, because blacka and whitea are still radix-ui's official colors, and we will still be generating component classes for them.

Let me know if there is any problem left!