React lower 18 version is not working and peerDependencies are forcing us to install later version of react

[hanumanthnbalu]

"peerDependencies": {
"@types/react": "^18.2.6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
if we are using js, is it required to insall types and docer build is failing due to dependency and react version expections

Expected behavior
it should work for react version of 16 or greater

Screenshots

[CarlosNZ]

Thanks for pointing this out, I'll release an update in the next couple of days.

[CarlosNZ]

Hi @hanumanthnbalu , I've published v1.8.2, which has the minimum React peer dependency at 16.0.0, which should solve your problem.

[hanumanthnbalu]

Thanks @CarlosNZ issue is resolved.
and there are few suggestions below,

1. we can provide a custom icons (with any library of their choice) and custom functionalities along with existing once
2. if the content is more then the content is overlapping it is better to give the height of their use or remove max height
3. json-edit-react is not indexed in google ranking, please do the indexing and seo optimise
   it wont appear in the npm search when we googled it only the github repo will show and it should display the npm repo as well.

i observe these things, i thaught to share with you as a suggestion

[CarlosNZ]

Thanks for the suggestions.

• we can provide a custom icons (with any library of their choice) and custom functionalities along with existing once

You can already override the existing icons: https://github.com/CarlosNZ/json-edit-react?tab=readme-ov-file#icons

Were you thinking of more than this?

• if the content is more then the content is overlapping it is better to give the height of their use or remove max height

Yeah, can you provide me with a chunk of JSON where I can test this problem?

• json-edit-react is not indexed in google ranking, please do the indexing and seo optimise
  it wont appear in the npm search when we googled it only the github repo will show and it should display the npm repo as well.

I don't know much about this side of things. Any idea how to get the npm page to show up? I only know how to manually index stuff from my own sites, not individual pages on the npm site.

[hanumanthnbalu]

@CarlosNZ for the indxing use keywords in package.json

for example (you can add the relavent keywodrs in it).
"keywords": [
"interactive-json",
"json",
"json-component",
"json-display",
"json-tree",
"json-view",
"json-viewer",
"json-inspector",
"json-tree",
"react",
"react-component",
"react-json",
"tree-view",
"treeview"
]

use descriptive titles, meta descriptions, and relevant headings. in package documentation.

check your indexing status here, and verify your domain
https://search.google.com/search-console/welcome

[hanumanthnbalu]

@CarlosNZ custom icons whatever is exist now that's fine along with that we can give option to give their own custom icons and custom functionalities is would be greatful

[ramsaylanier]

Im still running into issues installing 1.8.4

npm ERR! Found: @types/react@18.3.1
npm ERR! node_modules/@types/react
npm ERR!   dev @types/react@"^18.0.27" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @types/react@"^16.0.0" from json-edit-react@1.8.4
npm ERR! node_modules/json-edit-react
npm ERR!   json-edit-react@"1.8.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

[ramsaylanier]

If I install 1.8.1 I can get it working

[CarlosNZ]

Im still running into issues installing 1.8.4

Okay, can you try v1.9.0 ? I've moved @types/react into devDependencies and set react and react-dom to >=16.0.0 in peerDependencies.

[michelcrypt4d4mus]

i'm still having this issue:

$ npx expo install json-edit-react
(node:8938) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
› Installing 1 other package using npm
> npm install --save json-edit-react
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: uzor@1.0.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"18.2.0" from the root project
npm ERR!   peer react@">=16.0.0" from json-edit-react@1.9.1
npm ERR!   node_modules/json-edit-react
npm ERR!     json-edit-react@"*" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.3.1" from react-dom@18.3.1
npm ERR! node_modules/react-dom
npm ERR!   peer react-dom@">=16.0.0" from json-edit-react@1.9.1
npm ERR!   node_modules/json-edit-react
npm ERR!     json-edit-react@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

[CarlosNZ]

@michelcrypt4d4mus Would you mind sharing a basic repo where you can replicate this? I can't see it in the ones I'm working with, so hard to know what to do. It must be something to do with the bundler being used -- I've used it in a projects with Vite and with Webpack with no issues. And at worst I've seen it give a warning, but not an error.

[michelcrypt4d4mus]

i temporarily put the various config files for the project in a public repo. will take down in a few days but feel free to look around.

it's a react-native app being built with expo if that seems important. also while i am an experienced developer javascript / node is not something i work with super often so i may be missing something obvious.

[michelcrypt4d4mus]

i have no idea if this matters but reviewing this repo's package.json i was struck that two of the eslint packages are pegged to a version with a ^ instead of a >=:

    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",

[michelcrypt4d4mus]

i temporarily put the various config files for the project in a public repo. will take down in a few days but feel free to look around.

did you manage to grab a copy of the repo yet? just wanted to check before i take it down.

[CarlosNZ]

did you manage to grab a copy of the repo yet? just wanted to check before i take it down.

Yup, I've cloned it, thanks 👍

[CarlosNZ]

Okay, @michelcrypt4d4mus -- have sorted this now. The problem was that I had react-dom in peerDepencies -- I hadn't considered React Native, which doesn't use the dom package!

I've re-published (v1.9.2) now with react-dom moved to devDependencies instead and can confirm is installing without errors in the repo you shared.

Thanks for sharing that BTW -- makes it so much easier to debug this kind of thing if I can see the problematic environment directly :)

[michelcrypt4d4mus]

interestingly i just ran into a very similar looking error installing @testing-library/react (also peer deps, also based on the error message did not seem like there were actually incompatible dependencies)... this time i noticed that the error messages suggested re-running npm install with --legacy-peer-deps which surprisingly actually worked.

[michelcrypt4d4mus]

...and now i tried to install json-edit-react and ran into the same error again, but this time on account of the @testing-library/react package i just installed:

$ npm i json-edit-react --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @testing-library/react@15.0.7
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peerOptional react@"^16.9.0 || ^17.0.0 || ^18" from @reduxjs/toolkit@2.2.4
npm ERR!   node_modules/@reduxjs/toolkit
npm ERR!     @reduxjs/toolkit@"^2.2.3" from the root project
npm ERR!   peer react@"^18.0.0" from @testing-library/react@15.0.7
npm ERR!   node_modules/@testing-library/react
npm ERR!     dev @testing-library/react@"^15.0.7" from the root project
npm ERR!   7 more (react-native, react-redux, react-shallow-renderer, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react-dom@"^18.0.0" from @testing-library/react@15.0.7
npm ERR! node_modules/@testing-library/react
npm ERR!   dev @testing-library/react@"^15.0.7" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@18.3.1
npm ERR! node_modules/react
npm ERR!   peer react@"^18.3.1" from react-dom@18.3.1
npm ERR!   node_modules/react-dom
npm ERR!     peer react-dom@"^18.0.0" from @testing-library/react@15.0.7
npm ERR!     node_modules/@testing-library/react
npm ERR!       dev @testing-library/react@"^15.0.7" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

thankfully though i did the same thing and tried to re-run it with --legacy-peer-deps (as is suggested in the errors again) and it worked? wtf. node package management makes python look pretty good which is not an easy trick. (though note i have not yet actually tried to use your package in my app).

[michelcrypt4d4mus]

ok so now i tried to use your package in my app and got an error: Property 'getComputedStyle' doesn't exist. any ideas? seems like it might be a dependency issue (maybe related to why it wouldn't install easily) but i'm not a javascript developer really...

This is how i'm using it in a file called current_daemon_status.js. I'm certain that what's in serviceStatus is a valid data structure (i can JSON.stringify() it just fine):

export default function CurrentDaemonStatus() {
    <...snipped API retrieval code...>
    return <JsonEditor data={serviceStatus} />;
}

Here is the App.js file:

export default function App() {
    return (
        <Provider store={store}>
            <View style={styles.container}>
                <ImageBackground source={BACKGROUND_IMAGE} imageStyle={styles.bg_image} resizeMode="cover">
                    <CurrentDaemonStatus/>
                </ImageBackground>

                <StatusBar style="auto" />
            </View>
        </Provider>
    );
};

my iOS simulator shows this:

STDERR shows:

 ERROR  ReferenceError: Property 'getComputedStyle' doesn't exist

This error is located at:
    in CollectionNode (created by Editor)
    in div (created by Editor)
    in Editor
    in CollapseProvider
    in ThemeProvider
    in Unknown (at current_daemon_status.js:32)
    in CurrentDaemonStatus (at App.js:20)
    in RCTView (at View.js:116)
    in View (at ImageBackground.js:82)
    in ImageBackground (at App.js:17)
    in RCTView (at View.js:116)
    in View (at App.js:15)
    in Provider (at App.js:14)
    in App (at withDevTools.ios.js:29)
    in withDevTools(App) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67), js engine: hermes

[CarlosNZ]

Okay, I've moved this new problem over to a new issue: #59

thankfully though i did the same thing and tried to re-run it with --legacy-peer-deps (as is suggested in the errors again) and it worked? wtf. node package management makes python look pretty good which is not an easy trick. (though note i have not yet actually tried to use your package in my app).

Yeah, I generally use yarn myself, which avoids a lot of npm grief 🙄