Fresh install fails

[alexgseymour]

Fresh installation of the project fails with dependency resolution errors preventing the development server from starting.

Environment

• Node.js: v21.7.3
• npm: 10.5.0
• OS: macOS

Reproduction Steps

1. Clone the repository
2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

Expected Behavior

The development server should start successfully at http://localhost:5173

Actual Behavior

The installation and server startup fail with multiple errors:

Error 1: Missing react-is dependency

✘ [ERROR] Could not resolve "react-is"

    node_modules/@carbon/ibm-products/es/node_modules/prop-types/index.js:9:23:
      9 │ import require$$0 from 'react-is';
        ╵                        ~~~~~~~~~~

Error: Error during dependency optimization

Workaround: Install react-is manually:

npm install react-is

Error 2: Missing export from @carbon-labs/utilities

After installing react-is, the server starts but fails with:

SyntaxError: The requested module '../node_modules/@carbon-labs/utilities/es/usePrefix.js' does not provide an export named 'usePrefix'
    at file:///Users/alexseymour/datalabs/templates/carbon-react-router-starter/node_modules/@carbon-labs/react-theme-settings/es/components/ThemeSettings.js:12

[rodet]

@alexgseymour currently we only support Node 24. We think Node 22 should work as well but Node 21 is a development version at end of life so I would avoid it if possible, given you probably won't even get security updates for it. Do you have the same problem on Node 22 or 24? It didn't appear on my system right now, testing with v22.14.0.

Edit: the last Node 21 version has last been updated two years ago. Strongly recommend you upgrade from it.

[alexgseymour]

Upgrading to Node 24 has fixed the usePrefix issue but the missing react-is package remains:

alexseymour@Alexs-MBP-2 carbon-react-router-starter % node -v
v24.11.1
alexseymour@Alexs-MBP-2 carbon-react-router-starter % npm -v
11.6.2
alexseymour@Alexs-MBP-2 carbon-react-router-starter % npm install
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

> carbon-react-starter@0.1.0 prepare
> husky


added 1065 packages, and audited 1067 packages in 16s

221 packages are looking for funding
  run `npm fund` for details

5 vulnerabilities (4 low, 1 moderate)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
alexseymour@Alexs-MBP-2 carbon-react-router-starter % npm run dev

> carbon-react-starter@0.1.0 dev
> node src/server

Server started at http://localhost:5173
✘ [ERROR] Could not resolve "react-is"

    node_modules/@carbon/react/es/components/ComposedModal/ComposedModal.js:11:26:
      11 │ import { isElement } from 'react-is';
         ╵                           ~~~~~~~~~~

  You can mark the path "react-is" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "react-is"

    node_modules/@carbon/ibm-products/es/node_modules/prop-types/index.js:9:23:
      9 │ import require$$0 from 'react-is';
        ╵                        ~~~~~~~~~~

  You can mark the path "react-is" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "react-is"

    node_modules/@carbon/ibm-products/es/node_modules/prop-types/factoryWithTypeCheckers.js:8:23:
      8 │ import require$$0 from 'react-is';
        ╵                        ~~~~~~~~~~

  You can mark the path "react-is" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "react-is"

    node_modules/@carbon/react/es/components/Tabs/Tabs.js:20:26:
      20 │ import { isElement } from 'react-is';
         ╵                           ~~~~~~~~~~

  You can mark the path "react-is" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle.

/Users/alexseymour/datalabs/templates/carbon-react-router-starter/node_modules/esbuild/lib/main.js:1465
  let error = new Error(text);
              ^

Error: Error during dependency optimization:

✘ [ERROR] Could not resolve "react-is"

    node_modules/@carbon/ibm-products/es/node_modules/prop-types/factoryWithTypeCheckers.js:8:23:
      8 │ import require$$0 from 'react-is';
        ╵                        ~~~~~~~~~~

  You can mark the path "react-is" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.


✘ [ERROR] Could not resolve "react-is"

    node_modules/@carbon/ibm-products/es/node_modules/prop-types/index.js:9:23:
      9 │ import require$$0 from 'react-is';
        ╵                        ~~~~~~~~~~

  You can mark the path "react-is" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.


✘ [ERROR] Could not resolve "react-is"

    node_modules/@carbon/react/es/components/ComposedModal/ComposedModal.js:11:26:
      11 │ import { isElement } from 'react-is';
         ╵                           ~~~~~~~~~~

  You can mark the path "react-is" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.


✘ [ERROR] Could not resolve "react-is"

    node_modules/@carbon/react/es/components/Tabs/Tabs.js:20:26:
      20 │ import { isElement } from 'react-is';
         ╵                           ~~~~~~~~~~

  You can mark the path "react-is" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.


    at failureErrorWithLog (/Users/alexseymour/datalabs/templates/carbon-react-router-starter/node_modules/esbuild/lib/main.js:1465:15)
    at /Users/alexseymour/datalabs/templates/carbon-react-router-starter/node_modules/esbuild/lib/main.js:924:25
    at /Users/alexseymour/datalabs/templates/carbon-react-router-starter/node_modules/esbuild/lib/main.js:1343:9
    at process.processTicksAndRejections (node:internal/process/task_queues:103:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Node.js v24.11.1
alexseymour@Alexs-MBP-2 carbon-react-router-starter % npm install react-is

added 1 package, and audited 1068 packages in 1s

221 packages are looking for funding
  run `npm fund` for details

5 vulnerabilities (4 low, 1 moderate)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
alexseymour@Alexs-MBP-2 carbon-react-router-starter % npm run dev         

> carbon-react-starter@0.1.0 dev
> node src/server

Server started at http://localhost:5173
Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use meta.type-of instead.

More info and automated migrator: https://sass-lang.com/d/import

    ╷
113 │       @if type-of($property-value) != map {
    │           ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    ../../../@carbon/themes/scss/_theme.scss 113:11  -custom-property()
    ../../../@carbon/themes/scss/_theme.scss 30:5    theme()
    ../../../@carbon/styles/scss/_theme.scss 16:3    theme()
    ../../../../src/index.scss 44:3                  root stylesheet

[rodet]

@alexgseymour please test the tentative fix from the branch issue-265-react-is and let us know if this helps. The root cause seems to be related to that change: since React 19 Carbon moved react-is to a peer dependency. Adding it back should fix it.

[rodet]

OK not heard back, will preemptively merge the fix which seems to work so far.