Unable to import this library in my project!?

[brandoncollins7]

When I import the latest version import jsondiffpatch from 'jsondiffpatch' I get this error..... super freaking wierd I've never seen anything like this.

require() of ES Module C:\Users\brand\Documents\Projects\atlantic-dawn-monorepo\node_modules\.pnpm\jsondiffpatch@0.6.0\node_modules\jsondiffpatch\lib\index.js from C:\Users\brand\Documents\organization-api\src\api\handlers\handler.js not supported.\nInstead change the require of index.js in C:\Users\brand\Documents\handler.js to a dynamic import() which is available in all CommonJS modules.","ecs":{"version":"1.5.0"},"name":"RethrownError","original":{"code":"ERR_REQUIRE_ESM"}}

[Methuselah96]

As of v0.6.0 the package is ESM. Take a look at Sindre Sorhus's ESM FAQ and see if that helps.

[howardjones]

The problem with the FAQ is that it assumes you are a Javascript developer. I had an old-fashioned Flask app (HTML templates rendered on the server by Python) with one page using jsondiffpatch to show changes between config files. It was a couple of includes and 4 lines of code, and very nice! (thanks for that).

Now it seems that I need to learn 15 years of Javascript history to do it? (CommonJS? ESM? Packagers?). The FAQ doesn't mention a browser. I don't have node (except npm to download packages).

Is there a FAQ for the "jQuery crowd"? :-)

[Methuselah96]

Thanks for the feedback! Is your current setup using a script tag like the Visual Diff example for v0.5.0?

[howardjones]

Yes, just like that. I switched back to 0.5.0 for now.

[Methuselah96]

The Visual Diff example for v0.6.0 should be pretty similar as far as complexity. I need to update it to use ESM.sh instead of skypack.dev because of https://github.com/benjamine/jsondiffpatch/issues/360 and then I'll update the Release Notes for v0.6.0 to show an example of how to migrate for that use case.

Let me know if anything sticks out to you about the new way to do it that would not work with your current setup.

[Methuselah96]

I have updated the example in the README to use ESM.sh and added a note to the v0.6.0 Relase Notes that explains how to upgrade. Let me know if that's helpful.

[howardjones]

Is that first URL ('https://cdn.skypack.dev/jsondiffpatch') effectively pointing at a copy of the node_modules jsondiffpatch/lib directory, or some build artifact that needs to be compiled? i.e. can I do this without using a CDN? I can see the formatter files (maybe) in the lib/ directory, but not really clear on what the first import would point to, unless it just adds "index.js" on the end and tries to fetch that. I was going to just confirm with the live demo but I guess that link is broken in a branch.

(in my current setup, I am just adding node_modules/jsondiffpatch/dist as a static mount to the web app)

[marcomuser]

Since this is all just esm now and browsers natively understand how to handle imports this way, you should be able to simply copy the lib folder and the index.js file from node_modules. Include the index.js file as a <script type="module" ...> in your html file. Browsers will then request the necessary modules from the lib folder from your server automatically. If you want to only include a single index.js file you could bundle the package with esbuild. Point it to index.js as entry point and it will spit out a bundled javascript file that you can include in your html the same way without any further imports.