3

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"
Ed Lucas
  • 5,955
  • 4
  • 30
  • 42
ki0
  • 31
  • 3

2 Answers2

0

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.

Daniel B. Papp
  • 106
  • 4
  • "currArtist" is state(from useState Hooks) which type is number. And i declared the type of "currArtist" as number in "ArtistsList" components. but that's not work.... In addition, i rollback my code(before i use "currArtist" props), error persists and does not go away. – ki0 Aug 25 '22 at 04:31
0

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>
))}
Rias
  • 31
  • 3