I have recently installed the react-rails gem to replace an old react integration inside of my rails app.
But it seems like it broke the "react-mentions" package in production. It still works fine in my local dev environnement.
When I try to access the page with my react-mention input, it throws this error in my console :
TypeError: can't access property "style", _types.PropTypes is undefined
getWrappedComponent webpack:///./node_modules/substyle/lib/defaultStyle.js?:216
render webpack:///./node_modules/substyle/lib/defaultStyle.js?:196
React 7
unstable_runWithPriority webpack:///./node_modules/scheduler/cjs/scheduler.production.min.js?:311
React 5
_rollbar_wrapped https://cdnjs.cloudflare.com/ajax/libs/rollbar.js/2.4.6/rollbar.min.js:1
o https://cdnjs.cloudflare.com/ajax/libs/rollbar.js/2.4.6/rollbar.min.js:2
React 10
unstable_runWithPriority webpack:///./node_modules/scheduler/cjs/scheduler.production.min.js?:311
React 6
.....
These are the dependencies of my package.json
"dependencies": {
"@ant-design/compatible": "^1.0.2",
"@babel/core": "^7.5.5",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-proposal-decorators": "^7.4.4",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.9.6",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.9.4",
"@blueprintjs/core": "^3.19.1",
"@blueprintjs/datetime": "^3.14.0",
"@blueprintjs/icons": "^3.11.0",
"@blueprintjs/select": "^3.11.1",
"@blueprintjs/table": "^3.8.1",
"@material-ui/core": "^4.5.2",
"@material-ui/icons": "^4.5.1",
"@nivo/line": "^0.59.3",
"@rails/webpacker": "^5.1.1",
"antd": "^4.3.1",
"babel-loader": "^8.1.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"bootstrap": "^4.3.1",
"classnames": "^2.2.6",
"dom-to-image-improved": "^2.8.0",
"file-saver": "^2.0.2",
"jquery": "^3.4.1",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"numeral": "^2.0.6",
"papaparse": "^5.1.0",
"postcss-cssnext": "^3.1.0",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-bootstrap": "^1.0.0-beta.11",
"react-dom": "^16.13.1",
"react-dropdown-tree-select": "^2.1.1",
"react-highlight-words": "^0.16.0",
"react-mentions": "^3.3.1",
"react-orgchart": "^1.0.5",
"react-render-html": "^0.6.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-select": "^3.0.8",
"react-simple-maps": "^0.12.1",
"react-step-wizard": "^5.3.0",
"react-stepzilla": "^6.0.2",
"react-twitter-embed": "^3.0.3",
"react_ujs": "^2.6.1",
"recharts": "^1.8.5",
"select2": "^4.0.12",
"url-search-params-polyfill": "^7.0.0",
"whatwg-fetch": "^3.0.0"
},
How can I fix this issue ? I'm not sure what I'm missing!
