codesandbox / codesandbox/codesandbox-client

Objects are not valid as a React child – package import fails

Open
#5,852 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

🎒 Bundler 🐛 Bug
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:

https://github.com/dnbexperience/eufemia/compare/v9.2.0...v9.2.1?diff=split#diff-51e4f558fae534656963876761c95b83b6ef5da5103c4adef6768219ed76c2de

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.