search

juanjoDiaz / json2csv

Flexible conversion between JSON and CSV
https://juanjodiaz.github.io/json2csv/
MIT License
296 stars 32 forks source link

Browser usage #27

Closed garrucho closed 1 year ago

garrucho commented 1 year ago

Hi!

I'm not experienced with this type of import, but should I be able to use "plainjs" in the browser just like that? 🤔 

<html>
<head>
  <script type="module">
    import { Parser } from 'https://cdn.jsdelivr.net/npm/@json2csv/plainjs/src/Parser.js';
    import { StreamParser } from 'https://cdn.jsdelivr.net/npm/@json2csv/plainjs/src/StreamParser.js';
  </script>
</head>
...
</html>

(test made through a basic "test.html" file and opened in the latest Chrome)

It's not working. At the console, we can see the error:

caught TypeError: Failed to resolve module specifier "lodash.get". Relative references must start with either "/", "./", or "../".

I've tried creating an "importmap" before the import to solve this issue:

<script type="importmap">
  {
    "imports": {
      "lodash.get"            : "https://cdn.jsdelivr.net/npm/lodash.get/index.js",
      "@json2csv/formatters/" : "https://cdn.jsdelivr.net/npm/@json2csv/formatters/src/",
      "@streamparser/json"    : "https://cdn.jsdelivr.net/npm/@streamparser/json/dist/mjs/index.min.js"
    }
  }
</script>
<script type="module">...

But each remap goes to a new failure. After these three, the error ends being:

caught SyntaxError: The requested module 'lodash.get' does not provide an export named 'default' (at BaseParser.js:1:8)

Any recommendations?

Thanks.

juanjoDiaz commented 1 year ago

Sorry for the super-slow response time.

You can see how I do it on the docs page: https://github.com/juanjoDiaz/json2csv/blob/2d827e99d849e3afbbfcde4fa25f9789aab25c83/docs/index.html#L172-L177

The key thing is that, for this to work you need to pull from GitHub and not from npm as npm won't have all the needed modules connected in a way that works for the browser.

garrucho commented 1 year ago

Oh, that's okay... Late answer yet. haha

Many thanks! Didn't have the eyes to get that – and by some reason I didn't see the "try it live", which is very cool!