microsoft fluent-UI/react library did not work on my project when I included it, what is the best way to make this work properly? the UI broke immediately after I ran the project and I would like to know what the best fix is to this problem
There is no proper fix for this yet. And it looks like dev team is not considering this issue as high priority. Check out this github issue.
Pls use following command and following library Fluent UI - React Northstar able to work with react v18
npm i #fluentui/react-northstar --legacy-peer-deps
Related
I am trying to render 3D files in my react project. I am using ThreeJS for my react project of version 16.13.1. After installing #react-three/fiber & #react-three/drei these packages, I am getting error of Module not found: Can't resolve 'react-dom/client'. After searching solution for this I get to know that for these we have to upgrade React version to 17 or above. I did it in demo project & it worked. But the restriction is that I can not update actual project version from 16 to 18 as it will change or break so many things as well as I have to take care of other dependencies. Is there any solution available for using ThreeJS with React v16.
Or if there is any other way or different packages available to render 3D files (like .glb, .gltf) please share with me.
Thank you in advance.
How to find a version of a library that supports particular version of react?
Google <library-name> npm
Go to npm page
Go to repository (usually github)
Open package.json
Check version of react; if it's matching your version go to 7.
Change tag to some previous version; go to 5.
#react-three/fiber & #react-three/drei for react 16.13.1
These two should work:
#react-three/fiber 4.2.21
#react-three/drei 3.2.0
npm install #react-three/fiber#4.2.21 #react-three/drei#3.2.0
Disclaimer
You can never know if the packages work without trying. Many things changes and bug fixes only apply to the newest versions.
I found one package react-3d-viewer to render 3D files which perfectly work for me.
Google model viewer also works and it comes with variety of props which is good for customization of rendered 3D model.
https://github.com/dwqdaiwenqi/react-3d-viewer
https://modelviewer.dev/docs/index.html
I am new to react and I am even newer to typescript. I am working on this project right now and I need to use this specific git repository which is a typescript project. I want to add react-reveal so I can have some cool animations on my website but I get this error message.
I am not sure why this specific library is not working because I have installed other librarys like reactstrap. If anyone could give me any information on how to get this to work or why this isn't working it would be much appreciated!
React-reveal doesn't seem to be actively maintained as it was last updated on August 2018.
Based on the error you received it looks that there is a library that is explicitly configured to only work with React v15 or v16. You could use a slightly older version of React that works with react-reveal. You're using React 17.0.2. You could try using React v16.14.0.
You could also follow the instructions in the error message - using the force option. Here is a link(npm: When to use `--force` and `--legacy-peer-deps`) that describes how that works.
A better way to go is search for a more popular actively maintained alternative like react-spring(https://react-spring.io/) or react-awesome-reveal(https://www.npmjs.com/package/react-awesome-reveal).
I found the problem, you must put this command in the terminal => npm config set legacy-peer-deps true
I am working with Speechly API in my react application. In that, I imported PushToTalkButton and PushToTalkButtonContainer from #speechly/react-ui and I have also configured from Speechly Playground it's working fine in Playground. Then I click on the button(PushToTalkButton) in react application it is not capturing my voice and not using the microphone. I tried to find out the problem with ErrorPanel but nothing is showing.
Could you try upgrading to version 1.2.4 by issuing npm install #speechly/react-ui#latest
Earlier versions were inadvertently coupled with a certain version of react-client package and might cause a problem you described.
I do have some components I use across my projects so I thought it was a good idea to build my own React UI lib, but how?
Do I create a SPA using CRA and start coding and listing the components on it?
Yep, it’s one way to start.
But if you want to publish it or organize it to have a better use of it, I suggest you use Storybook as your dev environment and Jest + ESlint.
There’s some boilerplates like React AZap to help you with that.
I built React AZap to be an easy to use React UI lib boilerplate.
It uses Storybook and stories to organize your components, it has a component generator using Plop, tests with Jest+Enzime and styles with styled-components.
Try it out, it can save you time to start your lib ;)
Using CRA won't help you, as you won't be running this project.
Creating a library of components is the same as creating any other npm package, the only difference is that it should export components instead of normal functions/objects.
There are plenty of guides online that you can consult if you want more in-depth explanation.
I'd recommend giving this guide a read, which goes into the details for how to structure a multi-package UI component library. The code is included as well, so you should be able to clone to repository and get started.
Hope that helps!
I've started learning React with Redux and part of my development has seen me want to use the Material UI to make my application more interesting. I created my project in Visual Studio 2017 using the React with Redux template for ASP.NET Core.
I followed the documentation presented at the MatrialUI site and opted to use the CDN option for delivery of the MaterialUI library.
I started creating a few elements and was quickly confronted with the message that I needed to upgrade my react installation to use the Toolbar.
My question is, when we use the Visual Studio React/Redux ASP.NET Core template, how do I update my react installation? Is that carried out via NPM? I can't see any nuget packages relating to React.
Many thanks
Hey not sure if you found an answer yet but here is my take:
I tried using npm update inside the "ClientApp" folder, but that didn't seem to work. Something that did work though was manually updating each package. So open up a separate terminal -> cd into the ClientApp directory and then
npm i <package name>#<newest version>
so an example would be
npm i react#16.8.6
Some packages you will definitely need to update are React, React-DOM and rimraf. But you might choose to just update all of them while you're at it. When you're using ASP.NET Core try and go for the 2.2 version, which at least already has Bootstrap 4 installed.
Another tip: With Visual Studio, if you hover over the package names in the package.json file inside, it will show you the latest version. That's gonna make it a bit easier to find out what version you want to update to.
Hope that helped! And if anyone has a better solution please let me know.