react-redux-toastr | react-redux-toastr is a toastr message | State Container library

I want to connect the application with the rest of my components. But I've got this error:

react-redux v7.2 withRef is removed. To access the wrapped instance, use a ref on the connected component

This is my index.js

I created a draggable drag and drop table with draggable rows.
I'm using react beautiful-dnd for this.
When I drag a row, the row gets out of position instead on the position of my cursor.
When I drag a row, the row gets position: fixed and some top and left styling.
I suspect thats the issue, but why does it get the wrong numbers, so that its causing to not show on the right position?
This GIF will show the problem.

This is my full code:

I have some JavaScript code that gives this error is about "react-redux-toastr" package.

The code is as follow:

TypeError: Cannot read property 'confirm' of undefined

Also the package.json file is as follow:

"react-redux-toastr": "^7.4.9",

How i can solve it ?

The PhotosPage component below is rendered using

In going through and updating all the npm packages in a React application, I've encountered an error when performing a gulp build command from the terminal.

Unhandled rejection Error in plugin "webpack-stream" Message: Module build failed Error: Plugin/Preset files are not allowed to export objects, only functions.

The files where it seems to be encountering the problem are in the third-party npm_modules babel-loader and babel-preset-react. I've verified that all these "dependencies" are upgraded to the most current general release, and even tried the @latest version, but with no change in behavior - I'm still unable to produce a successful gulp build of my project.

package.json file: { "name": "", "version": "0.1.0", "description": "", "main": "apps/poc/index.html", "private": true, "dependencies": { "array.prototype.find": "^2.0.3", "axios": "^0.18.0", "base64-js": "^1.2.1", "bootstrap": "^4.1.3", "bootstrap-sass": "^3.3.7", "chance": "^1.0.16", "classnames": "^2.2.6", "es6-promise": "^4.2.5", "font-awesome": "^4.7.0", "history": "^4.6.3", "immutability-helper": "^2.7.1", "moment": "^2.22.2", "moment-range": "^4.0.1", "moment-timezone": "^0.5.21", "object-assign": "^4.1.1", "object-entries": "^1.0.0", "object-keys": "^1.0.12", "object.entries": "^1.0.4", "object.values": "^1.0.4", "prop-types": "^15.6.2", "query-string": "^6.1.0", "react": "^16.5.0", "react-bootstrap": "^0.32.4", "react-bootstrap-date-picker": "^5.1.0", "react-datepicker": "^1.6.0", "react-datetime": "^2.15.0", "react-dom": "^16.5.0", "react-fontawesome": "^1.6.1", "react-hot-loader": "^4.3.6", "react-portal": "^4.1.5", "react-redux": "^5.0.7", "react-redux-toastr": "^7.4.0", "react-router": "^4.3.1", "react-router-dom": "^4.3.1", "react-router-redux": "^5.0.0-alpha.6", "react-timeago": "^4.1.9", "react-toggle": "^4.0.2", "react-transition-group": "^2.4.0", "redux": "^4.0.0", "redux-devtools": "^3.3.2", "redux-devtools-dock-monitor": "^1.1.1", "redux-devtools-log-monitor": "^1.2.0", "redux-idle-monitor": "^0.10.2", "redux-logger": "^3.0.6", "redux-thunk": "^2.3.0", "reselect": "^3.0.1", "should": "^13.2.3", "signature_pad": "^2.3.2", "simple-react-bootstrap-button-dropdown": "^0.2.3", "string.prototype.startswith": "^0.2.0" }, "devDependencies": { "@babel/core": "^7.0.1", "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", "autoprefixer": "^9.1.5", "babel-eslint": "^9.0.0", "babel-loader": "^8.0.2", "babel-plugin-syntax-class-properties": "^6.13.0", "babel-plugin-syntax-object-rest-spread": "^6.13.0", "babel-plugin-transform-class-properties": "^6.23.0", "babel-plugin-transform-es2015-destructuring": "^6.23.0", "babel-plugin-transform-object-assign": "^6.22.0", "babel-plugin-transform-object-rest-spread": "^6.23.0", "babel-plugin-transform-react-constant-elements": "^6.23.0", "babel-plugin-transform-react-inline-elements": "^6.22.0", "babel-plugin-transform-runtime": "^6.23.0", "babel-polyfill": "^6.23.0", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.23.0", "babel-runtime": "^6.23.0", "chokidar": "^2.0.4", "css-loader": "^1.0.0", "dateformat": "^3.0.3", "del": "^3.0.0", "enzyme": "^3.6.0", "eslint": "^5.5.0", "eslint-loader": "^2.1.0", "eslint-plugin-react": "^7.11.1", "express": "^4.14.1", "extract-text-webpack-plugin": "^3.0.2", "faker": "^4.1.0", "file-loader": "^2.0.0", "glob": "^7.1.3", "graceful-fs": "^4.1.11", "gulp": "github:gulpjs/gulp#4.0", "gulp-autoprefixer": "^6.0.0", "gulp-babel": "^8.0.0", "gulp-changed": "^3.2.0", "gulp-concat": "^2.6.1", "gulp-cssmin": "^0.2.0", "gulp-if": "^2.0.2", "gulp-less": "^4.0.1", "gulp-load-plugins": "^1.5.0", "gulp-mocha": "^6.0.0", "gulp-notify": "^3.0.0", "gulp-plumber": "^1.1.0", "gulp-postcss": "^8.0.0", "gulp-print": "^5.0.0", "gulp-rename": "^1.4.0", "gulp-sass": "^4.0.1", "gulp-sourcemaps": "^2.4.1", "gulp-task-listing": "^1.1.0", "gulp-uglify": "^3.0.1", "gulp-util": "^3.0.8", "gulp-watch": "^5.0.1", "gulp-wrapper": "^1.0.0", "imports-loader": "^0.8.0", "jquery": "^3.3.1", "json-loader": "^0.5.4", "json-schema-faker": "^0.4.0", "livereload": "^0.7.0", "merge-stream": "^1.0.1", "node-notifier": "^5.0.2", "node-sass": "^4.9.3", "postcss": "^7.0.2", "raw-loader": "^0.5.1", "sass-loader": "^7.1.0", "source-map": "^0.7.3", "style-loader": "^0.23.0", "url-loader": "^1.1.1", "webpack": "^4.18.0", "webpack-bundle-analyzer": "^3.0.2", "webpack-dev-server": "^3.1.8", "webpack-merge": "^4.1.4", "webpack-stream": "^5.1.1", "yargs": "^12.0.2" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "./node_modules/.bin/gulp build", "watch": "./node_modules/.bin/gulp watch", "run-dev": "./node_modules/.bin/webpack -d --progress --colors --display-error-details", "run-prod": "./node_modules/.bin/webpack -p --progress --colors --display-error-details", "profile-dev": "./node_modules/.bin/webpack --profile -d --progress --colors --display-error-details --json > stats.json", "profile-prod": "./node_modules/.bin/webpack --profile -p --progress --colors --display-error-details --json > stats.json", "serve-cold": "./node_modules/.bin/webpack-dev-server --progress --colors --inline", "serve-hot": "./node_modules/.bin/webpack-dev-server --progress --colors --inline --hot", "serve-api": "node server.express.js", "watch-dev": "./node_modules/.bin/webpack --watch -d --progress --colors --display-error-details", "watch-prod": "./node_modules/.bin/webpack --watch -p --progress --colors --display-error-details", "postinstall": "./node_modules/.bin/gulp postinstall" }, "author": "", "license": "" }

gulpfile.babel.js `

I'm trying to implement an infinite scrolling but I can't get document.body.scrollHeight or window.scrollY or window.pageYOffset to work in my app. I've tried it by inspecting wikipedia and other sites and it works fine, but for some reason it just doesn't work in my React app. Can anyone help?

Inspection - React - Fail

Inspection - Other apps e.g. Wikipedia - Works

App logging - React - Fail

I've since tried finding this scrollY property in other React applications but still nothing. Always logs 0 in a react app.

As you can see in the image, the scrollbar is clearly not at the top.

Not sure what's going on, when I do a prod build ("cross-env NODE_ENV=production API_V=production npm run build") I get this error from from react-player:

ERROR in ./node_modules/react-player/lib/ReactPlayer.js Module build failed: ReferenceError: Unknown plugin "transform-es3-member-expression-literals" specified in "C:\work\website\node_modules\react-player\package.json.env.production" at 0, attempted to resolve relative to "C:\work\website\node_modules\react-player"

I'm already excluding node_modules from babel:

In my React/Redux application I have created a promise for a user, when the user attempts to 'login' with the wrong credentials the error won't be called on my reducers, however, when I change the return statement in the 'login' function on my Auth.js file to a undefined variable such as 'response' instead of 'error' it will indeed call an error and register it on my reducers, I have looked at other posts and I couldn't figure it out. I have 3 files that handle this logic, Auth, Sagas, and Reducers. Any help is appreciated thanks

Auth.js

I am using react-redux-toastr to generate alerts in my app. These alerts are to be shown to the user for a period of time. I want to launch these messages after another actions is successfully done or failed programmatically. I am using the Readme bundled with the package.

I did the first 4 steps as indicated in the read me. To launch the message action from another action (custom) I did the following: