Unknown word (CssSyntaxError) in JSX File (react js)

Question

I'm working on a React project and have run into an issue where ESLint is throwing an Unknown word (CssSyntaxError) when linting my JSX files. This error seems to be related to CSS parsing within JSX, but I'm not using any CSS-in-JS libraries or style-related code that should cause this error.

Here's the content of my MyComponent2.jsx file:

import Header from "./Header";
import Footer from "./Footer";
import Food from "./Food";

function App() {
  return (
    <>
      <Header></Header>
      <Food></Food>
      <Footer></Footer>
    </>
  );
}

export default App;

Header.jsx: (same error at return keyword)

function Header() {
    return (
        <header>
            <h1>My Website</h1>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
            <hr />
        </header>
    );
}

export default Header

Footer.jsx:(same error at return keyword)

function Footer() {
    return (
        <footer>
            <p>&copy; {new Date().getFullYear()} Your website name</p>
        </footer>
    );
}

export default Footer

Food.jsx: (same error at keyword const)

function Food() {

    const food1 = "Orange";
    const food2 = "Mango";

    return (
        <ul>
            <li>Apple</li>
            <li>{food1}</li>
            <li>{food2.toUpperCase()}</li>
        </ul>
    );
}

export default Food

And here’s the error message I receive when running the lint script from my package.json:

    "resource": "/e:/Web Projects/Learning React/React js/my-react-app/src/MyComponent2.jsx",
    "owner": "stylelint",
    "code": "CssSyntaxError",
    "severity": 8,
    "message": "Unknown word (CssSyntaxError)",
    "source": "stylelint",
    "startLineNumber": 1,
    "startColumn": 10,
    "endLineNumber": 1,
    "endColumn": 10
}]

The package.json file is as follows:

{
  "name": "my-react-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.55.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vite": "^5.0.8"
  }
}

I’ve tried the following troubleshooting steps:

• Ensuring there are no typos or syntax errors in my JSX or any CSS.
• Checking the configuration of ESLint and any associated plugins.
• Looking for any accidental CSS within my JSX files.

Despite these efforts, the error persists. I’m not sure why ESLint is flagging this as a Stylelint error when I’m not using Stylelint in my project. Any insights or suggestions on how to resolve this would be greatly appreciated.

Answer 1

I had the same issue today -- every file was affected, even on new test projects with Vite and CreateReactApp. Have no idea what happened. Anyway, if you search for stylelint in VS code settings and deselect 'enable', it worked for me.enter image description here