App does not work with React: Error: Package subpath './decorators/property.js' is not defined by "exports" (lit dependecy error)
mineturtle2137 opened this issue · 4 comments
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:
- Go to: https://clarity.design/get-started/developing/#react
- Follow instructions on the guide
- 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'; - 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.
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
@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?
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.
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.