reactjsnext.jspackage

Creating custom react package library

I am trying to create a library package for the first time but I've run into a problem where although everything compiles fine, when loading a page it says it can't find the module to my component within my library.

In my library project I have the following directory structure

Directory Structure

In my SayHello.jsx file I have the following:

import * as React from 'react';

const SayHello = (props) => {
    return (
        <h1>Hello ${props.name}</h1>
    )
}

export {SayHello}

In my babel.config.js I have the following:

{
    "presets": [
     [
      "@babel/env",
       {
        "targets": {
        "edge": "17",
        "firefox": "60",
        "chrome": "67",
        "safari": "11.1"
         },
      "useBuiltIns": "usage",
      "corejs": "3.6.5"
       }
   ],
      "@babel/preset-react"
   ]
   }

In my main app that is making the use of this library, I have added the project into NPM (hosting it from GitHub not NPM package manager as its a private library)

I import the component into my main app and use it as follows:

import SayHello from 'devso-react-library'
...

<SayHello name={'chris'} />

In the index.js within the lib directory I have the following:

import SayHello from "./components/SayHello";

export {
    SayHello
}

Everything within VS Code seems to imply that it can find everything however when I then go to the page, I get the following error:

./node_modules/devso-react-library/dist/index.js:13:0
Module not found: Can't resolve '../../lib/component/SayHello'

Import trace for requested module:
./pages/products-and-services.tsx

https://nextjs.org/docs/messages/module-not-found

The pages/products-and-services.tsx is as follows:

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import { useState } from 'react'
import ContentWrapper from '../components/StandardComponents/ContentWrapper'
import Footer from '../components/StandardComponents/Footer'
import TopNav from '../components/StandardComponents/TopNav'
import SayHello from 'devso-react-library'

const Home: NextPage = () => {




  return (
    <div className='flex flex-col h-screen'>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <TopNav />

      <ContentWrapper>
        <button>Show Modal</button>

        <SayHello name={'chris'} />

      </ContentWrapper>
      <Footer />
    </div>
  )
}

export default Home

I don't get why its looking in lib/component instead of lib/components, if there's any other files that need to be included let me know, first time trying this so think I've included everything relevant.

This is a NextJS project as the main app but the library was using the create-react-app as a template.

UPDATE

I've tried changing the import from import SayHello from "devso-react-library' to import { SayHello } from "devso-react-library" as suggested in the comments and I now get a different error as follows:

/node_modules/devso-react-library/dist/components/SayHello.js:3:0 Module not found: Can't resolve 'core-js/modules/web.dom-collections.iterator.js

Solution

  • I appear to have got it working although doesn't seem quite right. I had to install core-js into the library package and then change the import to be the path to the component I want within the dist folder, e.g.

    import { SayHello} from 'devso-react-library/dist/components/SayHello'