codesandbox / codesandbox/codesandbox-client
Objects are not valid as a React child – package import fails
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 13.6k
- Forks
- 2.4k
- Avg merge
- 6d 19h
- Merged PRs (30d)
- 2
Description
🐛 bug report
Preflight Checklist
- I have read the [Contributing Guidelines][contributing] for this project.
- I agree to follow the [Code of Conduct][code_of_conduct] that this project
adheres to. - I have searched the issue tracker for an issue that matches the one I want
to file, without success.
Description of the problem
I author a NPM package / library and use your fantastic server here and there.
But suddenly I get this message, as soon as the module gets imported:
Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.
Yeah, I know what that message means.
This happens not from a component inside the library – it gets thrown by CSB 🤔
It only happens on CSB.
How has this issue affected you? What are you trying to accomplish?
To be able to import the package without failure.
To Reproduce
Just visit the links above:
This version works. We get a blank page ✅
https://scdeh.csb.app/node_modules/@dnb/eufemia/@9.2.0
This version fails ❌
https://scdeh.csb.app/node_modules/@dnb/eufemia/@9.2.1
I can't find any error stack showing why this happens.
There is no difference in the versions that could evoke such an error. Here is the version diff:
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Open the two CodeSandbox reproduction URLs and compare the linked @dnb/eufemia v9.2.0...v9.2.1 diff first; the issue names no repository file or test. Trace why the newer package import produces the React child error, and consider the issue done when the package imports without that error in CodeSandbox.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100