skip to Main Content

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.

2

Answers


  1. Do you use VS code? I’ve got the same error, I’ve fixed by uninstalling extension from my VS code. Let me know if this works for you

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search