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

Open
#4,085 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
25/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Stale
Tech stack
javascript, typescript
Domain
frontend

Research direction

Start with the linked CodeSandbox reproduction and the componentDidLoad example, then trace the IonTypes access reported at Blob.js:6 through createCommonjsModule in utils.ts. Done means ion-js can be imported and the sample ionData can be parsed in a Stencil starter project without the reported TypeError.

Written by the indexing model from the issue text.

Description

Bug: Validated
Prerequisites
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

Dominant language
TypeScript
Stars
13.1k
Forks
855
Avg merge
4h 7m
Merged PRs (30d)
44

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from stenciljs/core

All issues in stenciljs/core

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.