igorprado / react-notification-system

A complete and totally customizable component for notifications in React
http://igorprado.github.io/react-notification-system/
MIT License
2.45k stars 249 forks source link

Steps to make it work with React 17 or 18 #183

Open Oskku opened 1 year ago

Oskku commented 1 year ago

This is what worked for me: First, change the react version to 17 in your project make npm install --legacy-peer to the project, then go to node_modules and copy the react-notification-system file out of the node module, for example, I create a file called forked in the root of the project and I drag the copied react notification system inside it, then I go inside the copied react

  1. notification system and I add the changes you can check them in this forked git: https://github.com/Osamah-learn/react-notification-system
  2. if you use redux in your project then you need to react notification system redux which I also make a change for it from the link below: https://github.com/Osamah-learn/react-notification-system-redux
  3. remember to do the same when you change your react version and make npm install --legacy-peer take react-notification-system-redux from there into the forked file where you put it in the root of the project

Let's assume you make the changes to the React notification system and redux system, it will be nicer to let them work locally with your work project, the way I did after playing around with the npm link i found the steps below the best option to make things work so this is how it goes: Run the forked library locally STEP 1: In the module project, execute first yarn to build the node module then run npm pack: This will build a -.tar.gz file.

STEP 2: Move the file to the consumer project Ideally, you can put all such files in a temp folder in your consumer-project root:

STEP 3: Refer it in your package.json: "dependencies": { "my-package": "file:/./tmp/my-package-1.3.3.tar.gz" } STEP 4: Install the packages: npm install or npm i or yarn

Now, your package would be available in your consumer project's node_modules folder. Good Luck...

sdenardi commented 7 months ago

We solved this by adding a overrides field in our package.json:

{
  "overrides": {
    "react-notification-system": {
      "react": ">=17",
      "react-dom": ">=17"
    }
  }
}

overrides was added in npm v8.