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
};
0

Did you this?

https://stenciljs.com/docs/react

After dropping that to src/index.js it worked fine. Did not need to do 'import "g-component-library";' , since the script below adds custom tags.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

// test-component is the name of our made up Web Component that we have
// published to npm:
import { applyPolyfills, defineCustomElements } from 'test-components/loader';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

applyPolyfills().then(() => {
  defineCustomElements();
});
| improve this answer | |

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.