Reference error while building in azure pipeline

[JoelGeorge693]

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/home/vsts/work/1/s/node_modules/json-edit-react/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///home/vsts/work/1/s/node_modules/json-edit-react/build/index.cjs.js:1:20
at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)

I am facing this error when I am my azure pipeline is building the application. It would be of great help if someone could guide me to a solution.

[CarlosNZ]

Are you using the latest version (1.16.0) ? If so, can you try with one of the previous versions (1.15.x) ?

I made a small change to the build process that may have caused this, so if you could let me know what happens with an earlier version, that'd be handy thanks.

[JoelGeorge693]

No, I am not using the latest version I am using 1.13.1. It was working till the 9th of this month started to have an issue since the 10th. If this helps.

[CarlosNZ]

That's odd, because /home/vsts/work/1/s/node_modules/json-edit-react/package.json' contains "type": "module". -- it only changed to use type: module in the very latest release.

You might be able to import the .cjs build directly, if that helps?

import {JsonEditor} from 'json-edit-react/build/index.cjs'

I don't know much about Azure pipelines, but I do suspect that the build process might be pulling in the latest version. Can you explicitly specify a max version in your package.json?

[JoelGeorge693]

Yes, maybe you're right about the pulling of latest version I'll try adding a strict version and let you know. Also, if that doesn't work I'll try the direct import.

[JoelGeorge693]

Thanks a lot, you're a life saver, restricting it to a strict version worked.
Have a nice day.

[CarlosNZ]

Good to hear. I've just published a new version (1.16.1) with explicit exports specified in package.json, so maybe that will help?

I'm keen for this to work seamlessly in as many environments as possible, so I'll keep trying to make it as flexible as possible, so please post again if you have trouble with a specific version.

[MattChowski]

After updating to 1.16.1 I get Module not found: Error: Can't resolve 'react/jsx-runtime' for this package :/. If I revert to 1.13.1 all is good

[MattChowski]

If i try your workaround import {JsonEditor} from 'json-edit-react/build/index.cjs', it works but I lose all typescript types and I can't ts-ignore everything

[CarlosNZ]

After updating to 1.16.1 I get Module not found: Error: Can't resolve 'react/jsx-runtime' for this package :/. If I revert to 1.13.1 all is good

If you wouldn't mind, would you be able to go back through the versions from 1.16.1 to see where the problem came in? I'd like to pin it down exactly.

[CarlosNZ]

@MattChowski I've removed the type: module in 1.16.3. Can you confirm that version works for you?

[CarlosNZ]

@MattChowski @JoelGeorge693 Can you try with v1.17.2 and see if it's working for you?

If not, would you mind sharing your repo (or an equivalent repo) so I can check out the problem for myself?

[MattChowski]

@CarlosNZ Unfortunately I am unable to test this at the moment. We needed a really performant solution for the JSON viewer as our jsons can be huge, so we decided to build our own, optimized for our needs.

Nevertheless this library is great and is better than any other json editor i've seen!

[CarlosNZ]

@CarlosNZ Unfortunately I am unable to test this at the moment. We needed a really performant solution for the JSON viewer as our jsons can be huge, so we decided to build our own, optimized for our needs.

All good, just out of interest how big are we talking?

Nevertheless this library is great and is better than any other json editor i've seen!

Thank you 🙏