Update to maintained version of REACT

[swirtSJW]

Description

Currently this repo requires exactly React 17.0.2 https://github.com/CMSgov/design-system/blob/main/package.json#L156. However React 17 lost support back in March 2022 reference . Even React18 went out of support in December 2024. This binds anyone relying on the CMS design system to use an outdated and no longer supported version of React. React has an approach that it will backport only Critical Security findings, but not lesser findings. Which still puts us all at a bit of risk.

Can we please prioritize updating to a maintained version of React?

[swirtSJW]

related to an update to 18 which is already no longer supported. #3433

[jack-ryan-nava-pbc]

Thanks @swirtSJW as you noted we have a React 18 migration under way. It will be released in September. We will begin work on migrating to v19 after that.

Thanks again!

[swirtSJW]

Thanks @jack-ryan-nava-pbc Is there any reason not to keep this issue open until we get to React19. It is hard for our stakeholders to understand that our work is blocked by a ticket that has been closed.

[jack-ryan-nava-pbc]

What is blocking your work?

[swirtSJW]

Our own updates to React 19 are blocked/hampered by the CMS Design System requiring exactly 17.0.2

[jack-ryan-nava-pbc]

Is this because of breaking changes to React APIs our components use?

[swirtSJW]

I don't think so specifically, though there is that possibility. It is mainly dependency conflicts and management when installing packages.

[jack-ryan-nava-pbc]

I'm not certain that is a barrier, since I know of teams running React at 18+ and our Design System as dependencies (but I very possibly could be wrong). We also haven't tested using React 19 at the application level with our Design System as a dependency, so there might be breaking changes that we just aren't aware of.

Can you share what packages are conflicting?

[swirtSJW]

I just conferred with others on my team. It seems there are issues related to the package uncertainties. React19, Vitest and the CMS Design system are definitely not playing nicely with each other.
Examples:

• Any test that loads a component with a CMS Design Tooltip or Label component will fail to render.
• 

The last one may not be tied to React version.

[jack-ryan-nava-pbc]

Ok this is super helpful to know!

Is it possible for your team to isolate the issues coming from Vitest vs. React 19? I'd also super duper appreciate if you could create bug reports for those issues. We have a bug report template you can use.

Our Tooltip component relies on some packages that we should honestly replace, and that could be causing issues.

[swirtSJW]

We can absolutely do that going forward. We are early in our efforts of updating to React19.

[averysmithproductions]

within our repo, npm run test generates the following error message:

SyntaxError: Unexpected token 'export'
Module /Users/asmith/Repos/pqdc-dkan/src/frontend/node_modules/@cmsgov/design-system/dist/react-components/esm/index.js:1 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "@cmsgov/design-system" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.

As a temporary workaround you can try to inline the package by updating your config:

// vitest.config.js
export default {
  test: {
    server: {
      deps: {
        inline: [
          "@cmsgov/design-system"
        ]
      }
    }
  }
}

This is causing 12 tests to fail. Screenshot below for context:

Please note, the work-around was unsuccesful.

In short, I think https://github.com/CMSgov/design-system/blob/main/package.json needs to have a type: "module" property for vitest to be satisfied.

[jack-ryan-nava-pbc]

@averysmithproductions We've encountered a similar error when working with Astro (which uses Vite to build) and this issue I believe comes from some packages we use in our ToolTip component (which we plan to replace). Can you offer additional information about which component might be causing this? It's ok if you can't see that.