CODEWITHSUNDEEP
reactjstailwind-csspostcsspostcss-loader
ki0
ki0

Reputation: 31

Tailwind CSS error in React (CRA). postcss-loader: Cannot read properties of undefined (reading '5')

I'm trying to use Tailwind CSS with React, but I'm running into a problem. There's no error when I use Tailwind CSS, but then I get:

ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/react-scripts/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css)

Module build failed (from ./node_modules/react-scripts/node_modules/postcss-loader/dist/cjs.js): TypeError: Cannot read properties of undefined (reading '5')

This error occurred. really really suddenly. I can't understand what reading '5' means or why this error occurred suddenly.

What should I do to solve this problem?

I think this error occurred after I wrote this code:

import { artistArr, ArtistsListPropsType } from "./Interface";

function ArtistsList({ moveToArtist, currArtist }: ArtistsListPropsType) {
  return (
    <nav className="hidden lg:flex justify-center w-screen top-1/2 fixed">
      <ul className="flex flex-col items-center font-semibold xl:text-xl">
        {artistArr.map((item, index) => (
          <li
            className={`hover:cursor-pointer [&:nth-child(${currArtist})]:border-b-2 border-black`}
            key={index}
            onClick={() => moveToArtist(index)}
          >
            {item.name}
          </li>
        ))}
      </ul>
    </nav>
  );
}

export default ArtistsList;

This code worked fine when I added the className in the <li> tag.

className="hover:cursor-pointer [&:nth-child(3)]:border-b-2 border-black"

I can't understand why this error occurred. There doesn't seem to be any problem.

My dev environment is as follows:
craco.config.js

module.exports = {
  style: {
    postcssOptions: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
};

tailwind.config.js

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  mode: "jit",
};

postcss.config.js

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

package.json dependencies

// --save
"@craco/craco": "^6.4.5",
"@tailwindcss/postcss7-compat": "^2.2.17",

// --save-dev
"autoprefixer": "^10.4.8",
"postcss": "^8.4.16",
"postcss-loader": "^7.0.1",
"tailwindcss": "^3.1.8"

Upvotes: 3

Views: 3666

Answers (2)

Rias
Rias

Reputation: 51

ClassName just take string, so You have to define currArtist as string value.

{artistArr.map((item, index) => (
    <li className={`hover:cursor-pointer [&:nth-child(${currArtist as string})]:border-b-2 border-black`}
        key={index}
        onClick={() => moveToArtist(index)}>
    {item.name}
    </li>
))}

Upvotes: 0

Daniel B. Papp
Daniel B. Papp

Reputation: 126

So based on your configuration everything should be working as it is up to date with the Tailwind Docs.

What I think the issue might be is either the data type of the currArtist argument/prop or the actual value that you are passing in. It seems to me that post-css broke because you passed in an invalid argument into the nth-child CSS function. I’d suggest making currArtist a number type (as I can see you are using typescript) which should fix your issue.

Upvotes: 0

Related Questions