React bootstrap with SPFX - reactjs

I am trying to integrate React-bootstrap into my SPFX project. I use the following versions.
React: 16.13.1
react-bootstrap: 2.4.0
SPFx: 1.14
When I try to import any react-bootstrap module into my tsx file, something like:
import Alert from 'react-bootstrap/Alert';
I get the error Cannot find module 'react/jsx-runtime'
Many forums tell me to upgrade my react version, but I cannot do so in my case, as latest version of SPFX (1.14) supports React 16.13.1, and not higher version.
Any solution to overcome the above issue would be very helpful

Related

Using X-grid in Material v5

I started building an react app using the new v5 alpha material-ui
According to their documentation 'The data grid components are supporting v5 and v4'.
So I installed the X-grid and when I import the X-grid I get this error:
./node_modules/#material-ui/x-grid/dist/index-esm.js
Module not found: Can't resolve '#material-ui/styles' in 'C:\Users\remusp\Desktop\React\material\node_modules#material-ui\x-grid\dist'
Does anyone know how to make this work together?
so you can install material/styles
npm install #material-ui/styles
sometimes the packages comes splited, so if you will use all material-ui install all lib

React material UI compatibility with react 15.4.1 version

I have a project having react version ^15.4.1, which version of material UI can I use in the same project? I tried installing latest version of #material-ui/core and upgrading the react version, but its affecting so many other dependencies, is there any way to import #material-ui/core in the same react version?

Installing Material UI with SSR React

I am trying to import #material/ui core into a SSR React project. I have come across the following error.
node_modules#babel\runtime\helpers\esm\objectWithoutProperties.js:1
I feel like I am missing a dependency but not sure which to install.
Any suggestions on how to fix?
Thanks
I need to update the babel packages:
Specifically https://babeljs.io/docs/en/babel-runtime and
https://babeljs.io/docs/en/babel-helpers

react: what happend if I import a component which import a higher version react in a lower version react project

react: what happend if I import a component which import a higher version react in a lower version react project.
Does there will has two diff version of react in diff module? or just has one react?
Does there any diff between webpack and native es6?
Only one version of react if defined as peer dependency. Of course you should only use features supported by both versions.

React Native and Webpack

I played around with the react native tutorial provided by Facebook. The React Native seemed to have a bundler already. I planned to use Webpack as my bundler and Typescript. How do I use webpack on the current React Native Version?

Resources