0

I am building a custom component library using Stenciljs and webcomponents. I have published to an npm repo and was able to create an example create-react-app app using all of the components without an issue. However, when pulling the library into a jss/sitecore app the npm package is never fully loaded in the browser.

staticjs/<localpath>/nodemodules/g-component-library/dist I only see the index.mjs file.

I'm wondering if webpack is responsible but I'm not sure why it doesn't have issues with any other package. I'm not even sure which code would be relevant since there are a lot of moving parts but this is the react component we are trying to consume our custom component in.

import React from "react";
import "./footer.css";
import PropTypes from "prop-types";
import "g-component-library";
import { Row, Col } from "react-bootstrap";

export default function Footer(props) {
  // const { handleNext } = props;
  return (
    <div
      className={
        props.pageStyle === "full"
          ? "footer-container-full"
          : "footer-container"
      }
    >
      <div
        className={
          props.pageStyle === "full" ? "footer-buttons-full" : "footer-buttons"
        }
      >
        <input
          id="cancel"
          type="button"
          value={props.backButtonLabel || "Cancel"}
        />
        <input
          id="next"
          type="button"
          onClick={props.handleNext}
          value={props.nextButtonLabel || "Next"}
        />
        <g-button id={'test'} type={'primary'}>G Button</g-button>
      </div>
    </div>
  );
}

Footer.propTypes = {
  handleNext: PropTypes.func.isRequired
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.