react-portal | 🎯 React component for transportation of modals , lightboxes | Frontend Framework library

I am trying to transfer a variable to a template. I have tried: ${{ variables.portalPath }} and $(portalPath)

But no values are transferred. If I dont use a variable but just a string it works:

pipeline:

I just upgraded my react app to include the newest react router v5.2 in order to get the useHistory hook. Things worked fine until I restarted for the first time next morning. Now when I use f5 to start a debugging session I get an exception in a node-modules file named json3. (BTW, the app runs okay in the browser after yarn start.) The exception is "SyntaxError: Unexpected token in JSON at position 1". The code is line 186 in json3.js:

I am seeing this issue 100% of the attempts at building webpack for production. I've tried the approach mentioned on the other similar StackOverflow issues which is NODE_OPTIONS=--max_old_space_size=8192

my build command is:

I am using preact (a small version of react) in my project.

before updating to preactX version I was using Modal component like this and there was no problem with it, this is how my Modal component looked like:

Been trying to migrate from react-portal from v2 to v4, due to recent upgrade of React to 16.8.6.

Stucked at Portal, whereby the dialog box doesn't show up even when isOpen=true. Found out that onOpen is not firing. Any suggestion on how should I change the codes?

Been trying to migrate from react-portal from v2 to v4, due to recent upgrade of React to 16.8.6.

Having problem with Portal, whereby supposed to load a button on openByClickOn (as shown below), but nothing appears. Is there any breaking changes on the usage of openByClickOn ?

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 have a chat box for a stream and I want to have react-portal-tooltips have a dropdown to show a users information when I select their name.

Visual

The way that react-portal-tooltips knows which dom element to put a tooltip under is by taking a element id. When I hardcode the id in everything works just fine. However I can't hard code because as you know chat items are generated dynamically. So I've been trying to create a id dynamical threw the use of props. When I do this however it returns with this error.

Now this only happens when I use variables in the name so the props. I've checked the values for what the output is and they are correct and what I want. This is why I'm confused because if the value is correct but it treats the string as if it is an incorrect data type.

Component Code (React.js)

This is the component for each chat item individually that gets generated.

I've created the following Higher-Order Component: