bug: Error Importing 3rd party JS Lib ion-js

[rahulrsingh09]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

3.0.0

Current Behavior

I am trying to ion-js in Stencil Component. I can get the same code to work in a React workspace but due to module it dosent seem to work in Stencil

componentWillLoad() {
    let ionData = `{ ccp_datatype_name:ResponsiblePerson, ccp_datatype_version:"1.0", definition:type::{ name: PriceSchema, major_version:1, minor_version:0, base:VariantBase, fields:[ { name:category, type:symbol, nullable:false, min_occurs:1, max_occurs:1 }, { name:address_identifier, type:string, nullable:false, min_occurs:1, max_occurs:1 } ] }, status:active, table_name:ccp_datatypes}`;
    let value = ion.load(ionData);
    console.log(value.fields())
  }

This same code works in run kit / React but not in stencil

require("jsbi/package.json"); // jsbi is a peer dependency. 
var ionJs = require("ion-js")
let ionData = `{ ccp_datatype_name:ResponsiblePerson, ccp_datatype_version:"1.0", definition:type::{ name: PriceSchema, major_version:1, minor_version:0, base:VariantBase, fields:[ { name:category, type:symbol, nullable:false, min_occurs:1, max_occurs:1 }, { name:address_identifier, type:string, nullable:false, min_occurs:1, max_occurs:1 } ] }, status:active, table_name:ccp_datatypes}`;


let value = ionJs.load(ionData);


console.log(value.fields());

Expected Behavior

It should be able to parse and use the lib

System Info

Brave / Mac

Steps to Reproduce

Just Put this code in any Stencil Starter Repo under ComponentDidLoad and you should see error in console.

TypeError: Cannot read properties of undefined (reading 'IonTypes')
    at Blob.js:6:36
    at createCommonjsModule (utils.ts:3:1)
    at Lob.js:58:1 undefined   

Code Reproduction URL

https://codesandbox.io/s/issue-in-stencil-and-ion-js-6uzg1w

Additional Information

No response

[rwaskiewicz]

Hey @rahulrsingh09 👋

Thanks for the bug report and repro case! I can confirm that this is an issue, where it appears that there appears to be a use-before-definition issue occurring here:

I'm going to label this to get it added to our backlog. Thanks again!

[rahulrsingh09]

Hi @rwaskiewicz is there any workaround for now or we are stuck..

[rwaskiewicz]

Sorry, I don't have a workaround at this time

[alicewriteswrongs]

@rahulrsingh09 It looks like the ion-js maintainers have some suggestions for usage in the browser - perhaps you could achieve your end goal by incorporating the suggested approach there? Basically they suggest using a <script> tag to import a browser-compatible script they build and distribute.

[rahulrsingh09]

Yes i was checking it, dosent seem to be an ideal approach when we eventually want to ship this as another resource. I wish we had a solution to bypass this without having to download at runtime

[alicewriteswrongs]

@rahulrsingh09 I agree it's not always optimal to import from a CDN, but it can often be quite performant to do so. I think for now that's the only workaround we can really point to here, so if you're able to get things working by following the recommendations from the ion-js team I'd say that's the way forward for now. The Stencil team will be looking at the root cause of this issue in the future, we'll ping you here on this issue when we have any updates on that to share.

Thanks again for filing!