search

alenaksu / json-viewer

Web Component to visualize JSON data in a tree view
https://alenaksu.github.io/json-viewer/
MIT License
169 stars 29 forks source link

Not working in browser after 1.0.0 #36

Closed eMuonTau closed 2 years ago

eMuonTau commented 2 years ago

Describe the bug After 1.0.0 json view is not rendered in browser with following error.

Uncaught SyntaxError: Unexpected token 'export' (at JsonViewer.js:45:94)

Error message indicates that it is an ESM module and i tried to add type="module" attribute to script tag but it did not work too. I couldn't find anyhing about ESM change in releases page and readme. Then i tried to use index.js file from demo and it worked with type="module attribute. I think demo is using a custom file. It would be better to use latest distributed file in demo to detect issues early.

To Reproduce Steps to reproduce the behavior:

  1. Copy the code below to JSFiddle
  2. Enable the script with version 0.3.4
  3. :heavy_check_mark: Json view shoud be rendered
  4. Enable the script from gibhub.io which is used in demo site
  5. :heavy_check_mark: Json view shoud be rendered
  6. Enable the script with version 1.0.1
  7. :red_circle: You will only see json as text not json view

Link to Minimal Reproducible Example

<json-viewer>
{"widget":{"debug":"on","window":{"title":"Sample Konfabulator Widget","name":"main_window","width":500,"height":500},"image":{"src":"Images/Sun.png","name":"sun1","hOffset":250,"vOffset":250,"alignment":"center"},"text":{"data":"Click Here","size":36,"style":"bold","name":"text1","hOffset":250,"vOffset":100,"alignment":"center","onMouseUp":"sun1.opacity = (sun1.opacity / 100) * 90;"}}}
</json-viewer>

<!-- <script src="https://unpkg.com/@alenaksu/json-viewer@0.3.4/dist/index.js"></script> -->
<!-- <script type="module" src="https://alenaksu.github.io/json-viewer/index.js"></script> -->
<!-- <script type="module" src="https://unpkg.com/@alenaksu/json-viewer@1.0.1/dist/JsonViewer.js"></script> -->

Expected behavior It should render tree view

alenaksu commented 2 years ago

Hi @eMuonTau, there are two files in the dist folder, the one that you are trying to use only exports the custom element, in case you want to register it with a different name. The other one (the main), register the component with its standard name.

Example:

import '@alenaksu/json-viewer';
// OR
import '@alenaksu/json-viewer/dist/json-viewer.js';

Or if you want to register the component with a different tag:

import { JsonViewer } from '@alenaksu/json-viewer/dist/JsonViewer.js';

customElements.define('my-tree-view', JsonViewer);

In general I think you can just omit the path from the script url (eg https://unpkg.com/@alenaksu/json-viewer@1.0.1)

eMuonTau commented 2 years ago

Hi @alenaksu, I am sure i tried json-viewer.js as module. It was not working. I will try again and let you know.

alenaksu commented 2 years ago

Maybe I missed something then, this is the link of the fiddle I created https://jsfiddle.net/kyvo94ct/

eMuonTau commented 2 years ago

Hi @alenaksu you did not miss anything. I am using Blazor and after i rebuilt the project a few times it worked. As i said i was sure i tried json-viewer.js. Thanks for your help and sorry for taking your time.

alenaksu commented 2 years ago

No problem at all, I'm glad I could help