Skip to content

HCRC-156 | Upgrade to Eslint v9#230

Merged
karisal-anders merged 7 commits into
mainfrom
HCRC-156-eslint-v9
Dec 17, 2025
Merged

HCRC-156 | Upgrade to Eslint v9#230
karisal-anders merged 7 commits into
mainfrom
HCRC-156-eslint-v9

Conversation

@karisal-anders

@karisal-anders karisal-anders commented Dec 15, 2025

Copy link
Copy Markdown
Contributor

Description

Upgrade to Eslint v9

Mostly tried to just do the same with Eslint v9 as was done before in .eslintrc,
but at least these differ:

  • airbnb config wasn't compatible → no airbnb rules
  • took some stylistic rules into use
  • added some rules manually after airbnb wasn't compatible with eslint v9

Related

HCRC-156

Testing

Tested by "yarn build" + "yarn pack" + portal method (+html-react-parser to ^5 here and in events-helsinki-monorepo) and "yarn dev" in apps/sports-helsinki, tried out the "Ajankohtaista" section, clicked on tags, changed the search text etc, worked ok.

Automated tests

Manual testing

Screenshots

Additional notes

FIXME: 14 errors still remain to be fixed in linting

airbnb config is out as it's not eslint v9 compatible:
- airbnb/javascript#2961

refs HCRC-156
Silence error: "Missing "key" prop for element in array  react/jsx-key".

refs HCRC-156
Fix errors:
- "Component definition is missing display name  react/display-name"

refs HCRC-156
Fix linting errors:
````
error  Multiple exports of name 'render'  import/export
```
and refactor imports/exports related to customRender function,
@testing-library/react and @testing-library/user-event. Previously
these were entangled, now they're clearer related to what is imported
from where rather.

NOTE: The renaming of customRender function to render function on import
is intentionally left as an explicit act so it is clear that it is being
done.

refs HCRC-156
Also fix linting error:
```
src/core/navigation/Navigation.tsx
  126:7  error  Error: This value cannot be modified

Modifying a variable defined outside a component or hook is not allowed.
Consider using an effect.

src/core/navigation/Navigation.tsx:126:7
  124 |         : undefined;
  125 |     if (url && window) {
> 126 |       window.location.href = url;
      |       ^^^^^^^^^^^^^^^ value cannot be modified
  127 |     }
  128 |   };
  129 |  react-hooks/immutability
```

See "Bug: eslint-react-hooks false positives on immutability rule":
react/react#35158

See react-hooks/immutability description:
https://react.dev/reference/eslint-plugin-react-hooks/lints/immutability

refs HCRC-156
Fix linting error in ArchiveSearchPageContent.tsx:
```
src/core/archiveSearchPageContent/ArchiveSearchPageContent.tsx
  273:9  error  Error: Calling setState synchronously within an effect
  can trigger cascading renders

Effects are intended to synchronize state between React and external
systems such as manually updating the DOM, state management libraries,
or other platform APIs. In general, the body of an effect should do one
or both of the following:
* Update external systems with the latest state from React.
* Subscribe for updates from some external system, calling setState in
  a callback function when external state changes.

Calling setState synchronously within an effect body causes cascading
renders that can hurt performance, and is not recommended.
(https://react.dev/learn/you-might-not-need-an-effect).

src/core/archiveSearchPageContent/ArchiveSearchPageContent.tsx:273:9
  271 |     if (withQuery) {
  272 |       if (currentTags?.length > 0) {
> 273 |         setSearchTags(currentTags);
      |         ^^^^^ Avoid calling setState() directly within an effect
  274 |       }
  275 |       setSearchText(currentText);
  276 |     }  react-hooks/set-state-in-effect
```

refs HCRC-156
Fix linting error in SocialMediaFeedModule.tsx:
```
Error: Cannot access refs during render

React refs are values that are not needed for rendering. Refs should
only be accessed outside of render, such as in event handlers or
effects. Accessing a ref value (the `current` property) during render
can cause your component not to update as expected
(https://react.dev/reference/react/useRef).

src\core\pageModules\SocialMediaFeedModule\SocialMediaFeedModule.tsx:38:
  36 |       scriptWrapperRef.current.append(documentFragment);
  37 |     }
> 38 |   }, [scriptWrapperRef.current?.innerHTML]);
     |      ^^^^^^^^^^^^^^^^^^^^^^ Cannot access ref value during render
  39 |
  40 |   const sanitizeScripts = (domNode: DOMNode) => {
  41 |     if ('attribs' in domNode) {
(react-hooks/refs)
```

refs HCRC-156
@sonarqubecloud

Copy link
Copy Markdown

@karisal-anders karisal-anders marked this pull request as ready for review December 17, 2025 11:36
@karisal-anders karisal-anders merged commit f88e66a into main Dec 17, 2025
5 checks passed
@karisal-anders karisal-anders deleted the HCRC-156-eslint-v9 branch December 17, 2025 14:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants