Search code examples
javascriptreactjszustand

React/Zustand - Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type

I am facing an error in my react app, not sure where the error itself is coming from and the code seems to be clean and bug-free and also following best practices.

Error Log

Failed to compile.

./src/components/CourseList.jsx 74:14
Module parse failed: Unexpected token (74:14)
You may need an appropriate loader to handle this file type.
|         columnNumber: 17
|       }
>     }, course?.title), /*#__PURE__*/React.createElement("button", {
|       className: "delete-btn",
|       onClick: function onClick() {

courseList.jsx

<span className="course-title">{course?.title}</span>
  <button
    className="delete-btn"
    onClick={() => {
      removeCourse(course.id);
    }}
  >
    Delete Course
  </button>
Solution

  • After a really long time debugging what the issue was and so many tries, I later got what the issue was but don't understand why that itself was what was throwing the issue.

    I simply had to change this, {course?.title} to this {course.title} and the code got compiled successfully without issues. Thereby, removing the ? to make it work.

    I hope this helps someone out there.