Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – react-json-tree want to have default

I tried to use this module to display a json
https://www.npmjs.com/package/react-json-tree

my example code for this was

import React from "react";
import { JSONTree } from 'react-json-tree'
import { Map } from 'immutable';

const JsonViewer = () => {

  const json = {
    array: [1, 2, 3],
    bool: true,
    object: {
      foo: 'bar',
    },
    immutable: Map({ key: 'value' }),
  };

  return (
    <JSONTree data={json} />
  )
};
export default JsonViewer;

in my App.jsx I’m calling <JsonViewer />

When I’m opening the site in browser I’m always getting

Build Result Error: There was a problem with a file build result.
Error: Module "react-json-tree" has no exported member "default". Did you mean to use "import default from 'react-json-tree'" instead?

Source
/home/daniel/projects/tsi/scale_test/src/components/JsonViewer.jsx

Error: Module "react-json-tree" has no exported member "default". Did you mean to use "import default from 'react-json-tree'" instead?
    at Object.install (/home/daniel/projects/tsi/scale_test/node_modules/snowpack/lib/index.js:44237:23)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async Object.installPackages (/home/daniel/projects/tsi/scale_test/node_modules/snowpack/lib/index.js:54326:25)
    at async inProgressBuilds.add.priority (/home/daniel/projects/tsi/scale_test/node_modules/snowpack/lib/index.js:54727:35)
    at async run (/home/daniel/projects/tsi/scale_test/node_modules/snowpack/lib/index.js:47005:29)

How can I solve this ?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I think I found solution. I downgraded to "react-json-tree": "^0.18.0",

    before it was "react-json-tree": "^0.19.0",

    on this version the issue does not exist


  2. 0

    on a high level, it seems that you are trying to use Map from immutable but you are missing the import.

    Approach: 1
    `

    import { JSONTree } from 'react-json-tree';
import { Map } from 'immutable';

const JsonViewer = () => {
  const json = {
    array: [1, 2, 3],
    bool: true,
    object: {
      foo: 'bar'
    },
    immutable: Map({ key: 'value' }),
  };

  return <JSONTree data={json} />;
};

export default JsonViewer;

    `

    Approach: 2

    Otherwise, if you do not wish to use immutable then you can modify your json object to immutable: new Map().set('key', 'value')
    `

    import { JSONTree } from 'react-json-tree';

const JsonViewer = () => {
  const json = {
    array: [1, 2, 3],
    bool: true,
    object: {
      foo: 'bar'
    },
    immutable: new Map().set('key', 'value')
  };

  return <JSONTree data={json} />;
};

    `

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search