json-edit-react icon indicating copy to clipboard operation
json-edit-react copied to clipboard

Reference error while building in azure pipeline

Open JoelGeorge693 opened this issue 1 year ago • 10 comments

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.

JoelGeorge693 avatar Sep 11 '24 04:09 JoelGeorge693

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.

CarlosNZ avatar Sep 11 '24 05:09 CarlosNZ

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.

JoelGeorge693 avatar Sep 11 '24 05:09 JoelGeorge693

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?

CarlosNZ avatar Sep 11 '24 09:09 CarlosNZ

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 avatar Sep 11 '24 09:09 JoelGeorge693

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

JoelGeorge693 avatar Sep 11 '24 10:09 JoelGeorge693

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.

CarlosNZ avatar Sep 11 '24 10:09 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

MattChowski avatar Sep 13 '24 10:09 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

MattChowski avatar Sep 13 '24 10:09 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

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 avatar Sep 14 '24 01:09 CarlosNZ

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

CarlosNZ avatar Sep 14 '24 11:09 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?

CarlosNZ avatar Dec 11 '24 10:12 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.

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

MattChowski avatar Dec 20 '24 09:12 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.

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 🙏

CarlosNZ avatar Dec 21 '24 01:12 CarlosNZ

Closing for now, as no further follow-up.

CarlosNZ avatar Jan 30 '25 10:01 CarlosNZ