I have a solution, it seems that there are a ton of breaking changes in the 18.0.1 type definitions. Like you, I could not solve it by rolling back to earlier versions, but investigation lead me to discover that this was because ‘react-router’ among others was bringing in the ‘18.0.1’ version. to get around this, … Read more
Make sure to install PostCSS Language Support, extension found in the VSCODE. That will remove the error that is displaying. @apply rule is compatible with postCSS: https://github.com/tailwindcss/tailwindcss/issues/325 VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=csstools.postcss
The root cause of this issue is described here. Essentially this happens when you pass style property of some elemnt as string or array. Like style=”string” or style={[array]}. This may seem not relevant (I don’t think that someone intentionally try to send string or Array to style property), but in my case this was root … Read more
Issue is react-dom is not installed, when you hit npm -v react-dom, it gives you the version of npm not react-dom version, you can check that by using npm -v or npm -v react-dom both will give you the same result. You are checking the package version incorrectly. How to install react and react-dom properly? … Read more
Inside a react component tree, componentDidMount() is fired after all children components have also been mounted. This means, that any component’s componentDidMount() is fired before its parent has been mounted. So if you want to measure DOM position and sizes etc, using componentDidMount() of a child component is an unsafe place/ time to do this. … Read more
From the act() docs: When writing UI tests, tasks like rendering, user events, or data fetching can be considered as “units” of interaction with a user interface. React provides a helper called act() that makes sure all updates related to these “units” have been processed and applied to the DOM before you make any assertions … Read more
To solve the react testing library error: “ReactDOM.render is no longer supported in React 18, update the version of the react testing library.” Open your terminal in the root directory of your project and run the following commands: npm install –save-dev @testing-library/react@latest npm install –save-dev @testing-library/jest-dom@latest npm install –save-dev @testing-library/user-event@latest Make sure to update the … Read more
Check that you are not accessing ref before the child component has been mounted. E.g. it doesn’t work in componentWillMount. A different pattern which auto invokes ref related callback after the element has been mounted is this- <div ref={(elem)=>(console.log(elem))}/> You can use this notation to get mounted elements in deep nesting as well – <div … Read more
Changed in latest React: ReactDOM.findDOMNode https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode It is in the react-dom package. Note that ReactDOMServer has also been moved into another package. Probably in preparation for React related platform-specific APIs (such as React native). To import/ require the package: import ReactDOM from “react-dom”; or var ReactDOM = require(‘react-dom’).
The final solution that worked for me was simply to change the React 18 index.js file to the following: import React from ‘react’; import ReactDOM from ‘react-dom’; import ‘./index.css’; import App from ‘./App’; import reportWebVitals from ‘./reportWebVitals’; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById(‘root’) ); // If you want to start measuring performance in your app, … Read more