Creating custom react package library

Question

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

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

SayHello is exported as a named export, you should import it as such too. — juliomalves
– juliomalves, Commented Dec 14, 2021 at 19:34
Do you mean doing import {SayHello} from'devso-react-library'; If so I've tried that but I now get the following ./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' — Boardy
– Boardy, Commented Dec 14, 2021 at 19:43

Boardy · Accepted Answer · 2021-12-15 17:59:21Z

1

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'

answered Dec 15, 2021 at 17:59

Boardy

36.4k108 gold badges274 silver badges469 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Stoyanoff Over a year ago

You can avoid this, by setting the main field in the library's package json to dist/index.js, but also make sure you are exporting all components from a top-level index.js file. However, have in mind that this would mean that you are going to load your whole library when you are importing. If you want it to be split, you need to use exports in package.json

R4k4210 · Accepted Answer · 2021-12-16 05:59:07Z

1

Post your package.json and check if you have something like this pointing to your types.

For quick testing I recommend you to use link.

In your library do (with yarn):

yarn link
yarn install
cd node_modules/react
yarn link
cd node_modules/react-dom
yarn link

Then in the project you need to use the library

yarn link react
yarn link react-dom
yarn link

edited Dec 16, 2021 at 5:59

answered Dec 16, 2021 at 3:46

R4k4210

319 bronze badges

Comments

Dharman · Accepted Answer · 2021-12-16 12:31:17Z

0

You are not exporting components as a default but in index.js you are importing as default.

You can avoid the extra step of import and export from the index.js. You can directly export components without importing them into index.js

// Component
import * as React from 'react';
export const SayHello = (props) => {
    return (
        <h1>Hello ${props.name}</h1>
    )
}

// index.js
export * from "./components/SayHello";
     OR
export { SayHello } from "./components/SayHello";

edited Dec 16, 2021 at 12:31

Dharman♦

34k27 gold badges106 silver badges157 bronze badges

answered Dec 16, 2021 at 12:26

Rahul Sharma

10.1k1 gold badge20 silver badges41 bronze badges

Collectives™ on Stack Overflow

Creating custom react package library

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related