0

I'm trying to import a React components library that I've created and published on npm. Although, when importing the header component I get the following error:

Module parse failed: Unexpected token (6:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export default function Accordion(props) {
|   return (
>     <details className={styles.accordion}>
|       <summary className={styles.accordion__summary}>{props.title}</summary>
|       <div className={styles.accordion__content}>{props.children}</div>

Import trace for requested module:
./node_modules/safetyhub-components/src/components/accordion/Accordion.js
./node_modules/safetyhub-components/index.js
./src/pages/layout.js

Accordion component

// Accordion.js
import styles from "./Accordion.module.scss";
import "../../index.scss";

export default function Accordion(props) {
  return (
    <details className={styles.accordion}>
      <summary className={styles.accordion__summary}>{props.title}</summary>
      <div className={styles.accordion__content}>{props.children}</div>
    </details>
  );
}

Import code

// layout.js
import AppHeader from "safetyhub-components";

export default function Layout({ children }) {
  return (
    <>
      <AppHeader />
      <main>{children}</main>
    </>
  );
}
Daniel
  • 32
  • 9
  • 2
    Does this answer your question? ["You may need an appropriate loader to handle this file type" with Webpack and Babel](https://stackoverflow.com/questions/33469929/you-may-need-an-appropriate-loader-to-handle-this-file-type-with-webpack-and-b) – Re9iNee May 15 '23 at 01:03
  • You need to build your react component library before publishing it. See https://stackoverflow.com/questions/56970495/build-react-components-library-with-webpack-4 – Lin Du May 15 '23 at 04:08

0 Answers0