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.

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.

• javascript
• reactjs
• jsx
• eslint

• Maybe you should show the code of Header Footer and Food? – Ricky Mo Commented Mar 27, 2024 at 6:07
• I’ve updated my question to include the code for Header, Footer, and Food ponents. Thank you for the suggestion! – Winter_bear2002 Commented Mar 27, 2024 at 6:33
• I'm seeing this in every file I open in vscode (react app); something wrong with packages? – Shamim Fahad Commented Mar 27, 2024 at 7:10
• Same here, I’m encountering this issue across all files, including those in my Node.js projects, not just in my React app. – Winter_bear2002 Commented Mar 27, 2024 at 7:37

5 Answers 5

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

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

The problem for me was the extension stylelint-plus, after uninstalling it the problem disappeared.

I just uninstalled a extension called "stylelint-plus" in VS Code. Then I didn't find any more "csssyntax error" neither in old projects nor in new ones. I would advise you to check the extensions installed in your Editor

disabling the 'stylelint-plus' extension fixed the issue for me.