Groundwork NPM errors with new, blank, React 19 application

[JeremyDKellett]

Hi everyone, I'm experiencing a NPM error when starting a React 19 project and importing groundwork:

Example:
npm install @usace/groundwork --force
npm warn using --force Recommended protections disabled.
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @usace/[email protected]
npm warn Found: [email protected]
npm warn node_modules/react
npm warn peer react@">=16.8.0" from @floating-ui/[email protected]
npm warn node_modules/@floating-ui/react
npm warn @floating-ui/react@"^0.26.16" from @headlessui/[email protected]
npm warn node_modules/@headlessui/react
npm warn 14 more (@floating-ui/react-dom, @headlessui/react, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^18.2.0" from @usace/[email protected]
npm warn node_modules/@usace/groundwork
npm warn @usace/groundwork@"^3.11.0" from the root project
npm warn
npm warn Conflicting peer dependency: [email protected]
npm warn node_modules/react
npm warn peer react@"^18.2.0" from @usace/[email protected]
npm warn node_modules/@usace/groundwork
npm warn @usace/groundwork@"^3.11.0" from the root project
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @usace/[email protected]
npm warn Found: [email protected]
npm warn node_modules/react-dom
npm warn peer react-dom@">=16.8.0" from @floating-ui/[email protected]
npm warn node_modules/@floating-ui/react
npm warn @floating-ui/react@"^0.26.16" from @headlessui/[email protected]
npm warn node_modules/@headlessui/react
npm warn 7 more (@floating-ui/react-dom, @headlessui/react, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react-dom@"^18.2.0" from @usace/[email protected]
npm warn node_modules/@usace/groundwork
npm warn @usace/groundwork@"^3.11.0" from the root project
npm warn
npm warn Conflicting peer dependency: [email protected]
npm warn node_modules/react-dom
npm warn peer react-dom@"^18.2.0" from @usace/[email protected]
npm warn node_modules/@usace/groundwork
npm warn @usace/groundwork@"^3.11.0" from the root project

[krowvin]

Reproducing

I was able to walk through the install steps and reproduce this.

When we run the command here:

• groundwork/src/app-pages/documentation/getting-started/quick-start-guide.jsx

  Line 67 in 67328b5

  Run <Code className="gw-text-nowrap">npm create vite@latest</Code>.

It targets the latest version of React when you select react in the menu AFAIK. React 19 was just released on Dec 5th

• https://github.com/facebook/react/releases/tag/v19.0.0

Groundwork expects React 18.2.0 to be installed as a peer dependency here:

• groundwork/package.json

  Line 42 in 67328b5

  "react": "^18.2.0",

@jbkolze and I were talking about when to use peer dependency just the other day

Some ideas

• Update groundwork to support React 19
  or
• Change the docs to target specific versions for everything (issue Running tailwind init gives error on fresh install #156 as well).

Experimenting it looks like vite version 5 targets React 18.3.1
with npm create vite@5

[willbreitkreutz]

I think we should bump to 18.3 and then see what is going to break when going to 19, make those changes, then bump to 19 to stay up to date. https://react.dev/blog/2024/04/25/react-19-upgrade-guide

[JeremyDKellett]

I also found an issue with tailwind versioning

npx tailwindcss init -p

npm error could not determine executable to run
npm error A complete log of this run can be found in: C:\Users...\AppData\Local\npm-cache_logs\2025-02-25T14_42_22_062Z-debug-0.log

and was able to move forward by doing

npx tailwindcss@3 init -p

however when running the empty app get this error:
[plugin:vite:css] [postcss] It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

[JeremyDKellett]

@krowvin documented this in #156

[jmtaillon]

I have been looking at pulling in Groundwork to give a styling update to a USACE Typescript React application after upgrading React to 19.

Some quick searches and fixes led me to:

vite.config.js

The changes below fixed the [TypeError: Cannot read property'ReactCurrentDispatcher'of undefined] error I was seeing. An answer stack pointed me in the right direction: https://stackoverflow.com/a/79350215

  rollupOptions: {
    external: ['react', 'react-dom', 'react/jsx-runtime'],
    output: {
      globals: {
        react: "React",
        "react-dom": "ReactDOM",
        'react/jsx-runtime': 'ReactJsxRuntime',
      },
    },
  },

package.json

@headlessui/react v2.2.0 supports React 19.

{
    "dependencies": {
        "@headlessui/react": "^2.2.0",
        "@tailwindcss/forms": "^0.5.9",
        "internal-nav-helper": "^3.1.0",
        "react-icons": "^5.0.1",
        "redux-bundler": "^28.1.0",
        "redux-bundler-hook": "^1.0.3",
        "redux-bundler-react": "^1.2.0"
    },
    "devDependencies": {
        "@types/react": "^18.3.0",
        "@types/react-dom": "^18.3.0",
        "@vitejs/plugin-react": "^4.2.1",
        "autoprefixer": "^10.4.17",
        "eslint": "^8.55.0",
        "eslint-plugin-react": "^7.33.2",
        "eslint-plugin-react-hooks": "^4.6.0",
        "eslint-plugin-react-refresh": "^0.4.5",
        "postcss": "^8.4.33",
        "tailwind-merge": "^2.5.2",
        "tailwindcss": "^3.4.1",
        "vite": "^5.0.13",
        "vitest": "^2.1.1"
    },
    "peerDependencies": {
        "react": "^18.2.0 || ^19.0.0",
        "react-dom": "^18.2.0 || ^19.0.0"
    }
},

This gets through the initial hurdle, but it is only tested with a SiteWrapper and UsaceBox with no properties. Let me know if you would find a PR helpful, but this is just from bare minimum poking and I have not tried it on React 18 at all.

[willbreitkreutz]

@jmtaillon That's great, I was/am going to be looking at jumping to 19 this week. If you don't mind submitting a PR I'll jump in and do some testing.