...
| Expand |
|---|
| title | Full `npm run lint` output |
|---|
|
| Code Block |
|---|
| /home/bsmith/code/frontend-app-learning/src/course-home/courseware-search/hooks.js
37:3 error Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/course-home/goal-unsubscribe/GoalUnsubscribe.jsx
36:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/course-home/outline-tab/Section.jsx
43:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/course-home/outline-tab/widgets/ProctoringInfoPanel.jsx
131:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx
87:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/course-home/progress-tab/certificate-status/CertificateStatus.jsx
215:5 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/CourseBreadcrumbs.jsx
125:20 error Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/bookmark/BookmarkButton.jsx
39:5 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/celebration/CelebrationModal.jsx
31:5 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/celebration/WeeklyGoalCelebrationModal.jsx
23:5 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/course-exit/CourseExit.jsx
48:5 error Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/course-exit/CourseRecommendations.jsx
146:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/new-sidebar/sidebars/discussions-notifications/DiscussionsNotificationsTrigger.tsx
43:5 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/sequence/SequenceContent.jsx
47:16 error Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.js
150:5 error Writing to a variable defined outside a component or hook is not allowed. Consider using an effect react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/sidebar/common/SidebarBase.jsx
32:5 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/courseware/course/sidebar/sidebars/discussions/DiscussionsTrigger.jsx
39:5 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/decode-page-route/index.jsx
26:26 error Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/generic/CourseAccessErrorPage.jsx
21:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/generic/path-fixes/PathFixesProvider.test.jsx
25:7 error Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/generic/tabs/useIndexOfLastVisibleChild.js
74:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/generic/upgrade-notification/UpgradeNotification.jsx
313:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/generic/user-messages/hooks.js
34:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/instructor-toolbar/InstructorToolbar.jsx
50:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/product-tours/ProductTours.jsx
1:1 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/shared/streak-celebration/StreakCelebrationModal.jsx
114:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
/home/bsmith/code/frontend-app-learning/src/tab-page/TabContainer.jsx
28:3 error React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior react-compiler/react-compiler
|
|
Most of the non “skipped optimizing” errors come from not following https://react.dev/reference/rules/rules-of-hooks
Proposed Next Steps
For frontend-app-learning specifically, I think simply removing ‘react-hooks/rules-of-hooks': ‘off', from .eslintrc.js is a great first step.
Looking beyond the one MFE, I think a great next step to move us closer to being able to use React Compiler when it moves out of beta is to start using the react-compiler/react-compiler eslint rules. If we add the eslint rules to frontend-build as warnings we’ll be able to work through those without breaking anything, and eventually turn them into errors when we’re ready to push towards actually using React Compiler.