Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Importing component display error on different set up

See original GitHub issue
  1. What version of RJEA are you using (react-json-editor-ajrm version)? 2.5.2
  2. What operating system and processor architecture are you using? Windows 10
  3. What did you do? Import component according to instructions.
  4. What did you expect to see? No errors on import.
  5. What did you see instead?

This errors occurs for either normal or es import. I am using a different working setup (than the one provided in this repo). The setup I am using includes webpack 3 and babel 6.


Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

PatrickSachscommented, Aug 9, 2018

I still need to wrap my head around what these babel plugins are / how they work. If we add @babel/runtime as dependency for project, is it required for other developers to use babel 7?

No. @babel/runtime is probably a confusing name as it does indeed suggest otherwise. It essentially contains the polyfills that babel injects into our code. It contains lots of small, runtime/bundler/transpiler/etc… independent es5 modules that polyfill one functionality at a time.

Babel then adds imports to the polyfills of this module as we use the functions. For example, this is the code of @babel/runtime/helpers/getPrototypeOf.js:

function _getPrototypeOf(o) {
  module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
    return o.__proto__ || Object.getPrototypeOf(o);
  return _getPrototypeOf(o);

module.exports = _getPrototypeOf;

As seen above, it has babel in its name, but essentially its “just” a library of polyfills. It does not depend on babel being either used in the development or production environment in any way.

If we add these dependencies, we don’t need to bundle it, right?

Yes. We can however additionally do that if you want a single bundle.js(like react) that we can ship. I’ve never been a fan of bundle.js files for libraries, but opinions vary.

I’ll go ahead and create a PR for this. (See #38)

AndrewRedicancommented, Aug 9, 2018

@PatrickSachs, thanks for feedback!

This is an approach I hadn’t though about yet. I would require us to implement a general purpose parser/tokenizer/etc in our main component or we’d loose the point of modularization.

You are right.

I agree, this is why I suggested making @babel/runtime a dependency which would have achieved this. […]

I still need to wrap my head around what these babel plugins are / how they work. If we add @babel/runtime as dependency for project, is it required for other developers to use babel 7? If no, let’s go ahead and add it as dependency. 👍

I think shipping libraries as a bundle is a bad idea for reasons already discussed in PR #31 that moved away from the bundling, but it’s your call. […]

If we add these dependencies, we don’t need to bundle it, right?

Thanks again.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Solved: "Couldn't import components" error when importing
Doing some Googling, I found this thread. The error message is the same, but I think the cause is different. In that thread...
Read more >
Trying to import component but getting error - Stack Overflow
I am creating a Tetris game and a created a component (StyledDisplay), which I an trying to import but I am getting an...
Read more >
Error Boundaries - React
A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch() .
Read more >
Fix import errors for audience-specific pages - Atlassian Support
Some errors might occur when attempting to import audience-specific users in Statuspage. Read these instructions to resolve errors for a successful import.
Read more >
How to Display Validation or Error Messages in Angular Forms
This guide covers how to display validation or error messages with Angular forms. It looks at both template-driven forms and reactive forms.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found