create react npm package with dependencies

Question

I am creating a simple UI library on React ts.

and on this package, I'm adding an external library like draft-js.

and now when I try to implement my package on some other project but every time it's stuck on error.

I have already spent a day trying to figure this out. I think it's a problem the way I'm installing an external library on my library. should I only install it on dev dependencies or normal or on peer? or should I also install that external library on the project on where I'm trying to implement.

This is the package JSON of the package I'm creating.

"scripts": {
    "build": "yarn build:esm && yarn build:cjs",
    "build:esm": "tsc",
    "build:cjs": "tsc --module commonjs --outDir lib/cjs"
  },
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/draft-js": "^0.11.9",
    "@types/react": "^17.0.40",
    "@types/react-dom": "^17.0.13",
    "@types/react-draft-wysiwyg": "^1.13.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "typescript": "^4.6.2"
  },
  "dependencies": {
    "draft-js": "^0.11.7",
    "react-draft-wysiwyg": "^1.14.7"
  }

and this is the error I'm getting

before compile RichEditor.tsx

 import React, { useState } from "react";
import { EditorState } from "draft-js";
// import apiClient from "../api/api_client";
import { convertToRaw } from "draft-js";
import { EditorProps } from "../../interface";

import { Editor } from "react-draft-wysiwyg";

// import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

export default function RichEditor({ handleContent }: EditorProps) {
  const [editorState, setEditorState] = useState<any>(
    EditorState.createEmpty()
  );

  const onEditorStateChange = (editorState: any) => {
    setEditorState(editorState);
    handleContent(convertToRaw(editorState.getCurrentContent()));
  };

  return (
    <Editor
      // @ts-ignore
      toolbarClassName="toolbar-class"
      editorState={editorState}
      wrapperClassName="wrapper-class"
      editorClassName="editor-class"
      onEditorStateChange={onEditorStateChange}
      // toolbarOnFocus
      toolbar={{
        options: [
          "inline",
          "blockType",
          "fontSize",
          "fontFamily",
          "list",
          "textAlign",
          "colorPicker",
          "link",
          "embedded",
          "emoji",
          "image",
          "history",
        ],
        inline: { inDropdown: true },
        list: { inDropdown: true },
        textAlign: { inDropdown: true },
        link: { inDropdown: true },
        history: { inDropdown: true },
        image: {
          urlEnabled: true,
          uploadEnabled: false,
          // uploadCallback: this.uploadImageCallBack,
          previewImage: true,
          alt: { present: false, mandatory: false },
        },
      }}
    />
  );
}

after compile RichEditor.js

 import React, { useState } from "react";
import { EditorState } from "draft-js";
// import apiClient from "../api/api_client";
import { convertToRaw } from "draft-js";
import { Editor } from "react-draft-wysiwyg";
// import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
export default function RichEditor(_a) {
    var handleContent = _a.handleContent;
    var _b = useState(EditorState.createEmpty()), editorState = _b[0], setEditorState = _b[1];
    var onEditorStateChange = function (editorState) {
        setEditorState(editorState);
        handleContent(convertToRaw(editorState.getCurrentContent()));
    };
    return (React.createElement(Editor
    // @ts-ignore
    , { 
        // @ts-ignore
        toolbarClassName: "toolbar-class", editorState: editorState, wrapperClassName: "wrapper-class", editorClassName: "editor-class", onEditorStateChange: onEditorStateChange, 
        // toolbarOnFocus
        toolbar: {
            options: [
                "inline",
                "blockType",
                "fontSize",
                "fontFamily",
                "list",
                "textAlign",
                "colorPicker",
                "link",
                "embedded",
                "emoji",
                "image",
                "history",
            ],
            inline: { inDropdown: true },
            list: { inDropdown: true },
            textAlign: { inDropdown: true },
            link: { inDropdown: true },
            history: { inDropdown: true },
            image: {
                urlEnabled: true,
                uploadEnabled: false,
                // uploadCallback: this.uploadImageCallBack,
                previewImage: true,
                alt: { present: false, mandatory: false },
            },
        } }));
}

@Andy I'm working on creating a library that's why `react` and `react-dom` should be on `peer`. that means anyone using this library should be a react project — anjit pariyar, Mar 15 '22 at 16:16

score 0 · Answer 1 · answered Mar 15 '22 at 16:50

0

Just like the error says, there's an error because you called a hook in a forbidden area. Hooks need to be called at top level only, EditorState is the top-level state object for the editor. - from draftJs' docs @EditorState.
You are calling this hook inside react's useState. I have never used this library, but from a quick read it seems like you really don't need react's useState with it.

answered Mar 15 '22 at 16:50

Art

431
4
12

after a day I realize this error is because of error no 3, i.e multiple files of React. this error is only on local implementation. I am surprised that it works fine in live npm. – anjit pariyar Mar 17 '22 at 17:25

create react npm package with dependencies

1 Answers1