App does not work with React: Error: Package subpath './decorators/property.js' is not defined by "exports" (lit dependecy error)

[mineturtle2137]

Describe the bug

Package subpath error shows after adding the @cds/core package

Error: Package subpath './decorators/property.js' is not defined by "exports" in /Users/i/my-project/node_modules/lit/package.json imported from /Users/i/my-project/node_modules/@cds/core/internal/index.js

User dependencies from package.json: "dependencies": { "@cds/city": "^1.1.0", "@cds/core": "^5.6.2", "@cds/react": "^5.6.2", "next": "12.0.9", "normalize.css": "^8.0.1", "react": "17.0.2", "react-dom": "17.0.2" },

How to reproduce

Install the npm dependencies from the clarity.design webpage:

1. Go to: https://clarity.design/get-started/developing/#react
2. Follow instructions on the guide
3. Add react imports in index file: (from create-react-app example) import 'normalize.css/normalize.css'; import '@cds/core/global.css'; // pre-minified version breaks import '@cds/city/css/bundles/default.min.css';
4. See error Error: Package subpath './decorators/property.js' is not defined by "exports" in /Users/i/my-project/node_modules/lit/package.json imported from /Users/i/my-project/node_modules/@cds/core/internal/index.js

Expected behavior

No error while running the @cds/core for React app.

Versions

Clarity project:

• [ ] Clarity Core

Clarity version:

• [ ] v5.x

Framework:

• [ ] React

Framework version: "react": "17.0.2", "react-dom": "17.0.2"

Device:

• Type: MacBook
• OS: iOS
• Browser Chrome
• Version 97.0.4692.99

Additional notes

Add any other notes about the problem here.

[ashleyryan]

Do you have a stackblitz or a repo where this is happening? We have a next js example here: https://stackblitz.com/edit/nextjs-e2bvez?file=package.json and I'm not able to reproduce. Also, the docs recommend modern-normalize instead of normalize

[mineturtle2137]

@ashleyryan using next/dynamic imports with @cds/react helps resolve the issue. could you please tell me why import { CdsButton } from '@cds/react/button' does not work in this case and throws an error?

[ashleyryan]

The dynamic import with ssr:false in the example stackblitz tells next to only load the import on the browser (web components only run in the browser anyway). We've had some issues with clarity in node in the past, it sounds like that's what's happening here, it's not loading in node correctly.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.