score:0

I've recently used create-react-library, and had encountered the same issue. The error message exactly makes sense in this case. The issue will not happen when you actually publish the package and consume it at a consumer application. This means, the problem is with your example folder. If you look at package.json, that's inside example folder, you can see there are library references for react, react-scripts, react-dom etc. Referring those with file protocol like below will solve your problem.

  "dependencies": {
    "library-name": "file:..",
    "react": "file:../node_modules/react",
    "react-dom": "file:../node_modules/react-dom",
    "react-scripts": "file:../node_modules/react-scripts"
    "node-sass": "file:../node_modules/node-sass"
  },

Clear your node_modules as well as package-lock.json before trying this.

score:1

Check your package.json file you appear to have dependencies react / react-dom version 16 but peer dependencies for versions 15 . I think this is the cause of your problem , remove the peer dependencies. Also you don't need to write your components as class based if all you are doing is rendering use a functional component approach instead.

score:1

The dependencies in the included example project are very outdated.

Instead I set up a new separate example project, which perfectly renders your button:

npx create-react-app component-library-example
cd component-library-example
npm install --save emmas-super-cool-component-library
npm start

App.js:

import React from "react";
import { PrimaryButton } from "emmas-super-cool-component-library";

const App = () => (
  <PrimaryButton
    onClickHandler={() => {
      alert("clicked");
    }}
  >
    text
  </PrimaryButton>
);

export default App;

Result:

App


Related Query

More Query from same tag