[Bug]: Rollup error - "validateProps" is not exported

[jebbard]

Browser

No response

Package version

3.0.1204

React version

19.1.0

Description

I am building a TS library that provides reusable react components that use CloudScape components. I am bundling this library with TSUP. The library itself builds without issues. However, if I am using this library in another project, I am getting an error when running yarn build:

x Build failed in 16.76s
error during build:
node_modules/@cloudscape-design/components/alert/index.js (7:9): "validateProps" is not exported by "node_modules/@cloudscape-design/components/node_modules/@cloudscape-design/component-toolkit/internal/index.js", imported by "node_modules/@cloudscape-design/components/alert/index.js".
file: /myproject/node_modules/@cloudscape-design/components/alert/index.js:7:9

5: import CoreComponent from './internal-do-not-use-core';
6: import { applyDisplayName } from '../internal/utils/apply-display-name';
7: import { validateProps } from '@cloudscape-design/component-toolkit/internal';
            ^

    at getRollupError (file:///myproject/node_modules/rollup/dist/es/shared/parseAst.js:401:41)
    at error (file:///myproject/node_modules/rollup/dist/es/shared/parseAst.js:397:42)
    at Module.error (file:///myproject/node_modules/rollup/dist/es/shared/node-entry.js:16875:16)
    at Module.traceVariable (file:///myproject/node_modules/rollup/dist/es/shared/node-entry.js:17327:29)
    at ModuleScope.findVariable (file:///myproject/node_modules/rollup/dist/es/shared/node-entry.js:14997:39)
    at ReturnValueScope.findVariable (file:///myproject/node_modules/rollup/dist/es/shared/node-entry.js:5620:38)
    at FunctionBodyScope.findVariable (file:///myproject/node_modules/rollup/dist/es/shared/node-entry.js:5620:38)
    at Identifier.bind (file:///myproject/node_modules/rollup/dist/es/shared/node-entry.js:5394:40)
    at CallExpression.bind (file:///myproject/node_modules/rollup/dist/es/shared/node-entry.js:2785:23)
    at CallExpression.bind (file:///myproject/node_modules/rollup/dist/es/shared/node-entry.js:12058:15)

yarn build worked for me without issues up to @cloudscape-design/components v3.0.962.

Source code

No response

Reproduction

• Library:
  • Create a TS library using TSUP
  • Reference "@cloudscape-design/components": "3.0.1204" in package.json (as peer dependency and dev dependency)
  • Export a react component that uses the CS Alert component
• Project:
  • Import the library in another react project, also reference "@cloudscape-design/components": "3.0.1204" in package.json
  • rm -rd ./node_modules && yarn install && yarn build
  • This results in the error mentioned

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[SpyZzey]

Hey,
Thanks for creating this bug report.
Could you share the version of @cloudscape-design/component-toolkit that gets installed as a peer dependency of @cloudscape-design/components?

I checked the latest component-toolkit version whethervalidateProps is being exported and this seems to be the case. You can validate this here: node_modules/@cloudscape-design/component-toolkit/internal/index.js.

From your error logs:
node_modules/@cloudscape-design/components/node_modules/@cloudscape-design/component-toolkit/internal/index.js
This line lets me suspect there could be a problem in how the paths are being resolved in tsup. This should be node_modules/@cloudscape-design/component-toolkit/internal/index.js instead because component-toolkit and components should live in the same node_modules folder.

[SpyZzey]

Could you possibly share a minimum setup example repository with your configuration where this error occurs?

[jebbard]

Hi @SpyZzey , thanks for the quick response!

The version where this occurs is "@cloudscape-design/component-toolkit": "^1.0.0-beta.138"

Do you indicate this is fixed in newer versions?

I cannot see validateProps being exported in that index.js, neither in "1.0.0-beta.111" nor in "1.0.0-beta.138".

I will try to come up with a minimum example over the weekend, but not sure how much effort it is.

Thanks!

[SpyZzey]

The version where this occurs is "@cloudscape-design/component-toolkit": "^1.0.0-beta.138"

Do you indicate this is fixed in newer versions?

This is already the newest version - it should work correctly.
I'll take a look at it once you have shared the minimal example. I wasn't able to reproduce it locally.

[jebbard]

Unfortunately, I cannot reproduce the issue with a minimum repo (just exporting a react component that wraps Alert, and using it in the consumer).

What else can I do to understand the error?

Trying the newest version of Cloudscape components, I still get the same error. The error only appears during transform.

As I am using a vite project, I do the following in vite.config.ts:

optimizeDeps: {
        include: ['@cloudscape-design/components'],
    },
    ssr: {
        noExternal: [
            '@cloudscape-design/components',
            '@cloudscape-design/test-utils-core',
            '@myuser/mylib' // Also your shared lib
        ]
    }

Here, mylib is the library also using @cloudscape-design/components.

Not sure if that has any impact, but it is necessary since the module formut exported by cloudscape cannot be directly integrated with vite (as far as I remember).

[jebbard]

Can be closed!

I found that my yarn.lock had component-toolkit v111 which did not export validateProps. My library was already correctly using v138. The fix for me was to remove the entry for v111 from yarn.lock, reinstall and rebuild.