I'm trying to nest a modal component within the navbar component, but I come up with the following error:
Error: _processChildContext is not available in React 16+. This likely means you have multiple copies of React and are attempting to nest a React 15 tree inside a React 16 tree using unstable_renderSubtreeIntoContainer, which isn't supported. Try to make sure you have only one copy of React (and ideally, switch to ReactDOM.createPortal).
My code:
import React, { Component } from 'react';
import { Navbar, NavItem, Modal, Button } from 'react-materialize';
class Header extends Component {
constructor(props) {
super(props);
this.state = {
showLoginModal: false
};
this.toggleLoginModal = this.toggleLoginModal.bind(this);
}
toggleLoginModal() {
this.setState({ showLoginModal: !this.state.showLoginModal });
}
render() {
console.log(this.state.showLoginModal);
return (
<div>
<Navbar brand='Voting App' right>
<Modal
header='Login'
trigger={<Button>Login</Button>}
>
Login
</Modal>
</Navbar>
</div>
)
}
}
export default Header;
Any ideas why this is the case? Been trying to figure out the best way to introduce modals in react using the materialize styling, but hitting a lot of brick walls. Any help very welcome!
Upgrade your yarn from 0.x to 1.x, or NPM accordingly and try it again. Based on this post it should work.
If you encounter with this problem, upgrading Yarn does not solve anything. You need to delete & re-install some conflicting packages. Upgrading yarn may delete those files, but if you are using npm; upgrading npm does not delete files and does not provide solution.
To delete modules:
If you use npm: Command to remove all npm modules globally?
If you use yarn: https://github.com/yarnpkg/yarn/issues/1048
Related
I am following a guide to upgrade to React 18. After completing the upgrade I am seeing errors on certain pages in my app.
ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported in React 18.
I am not using the unstable_renderSubtreeIntoContainer() function anywhere in my app, but when I look closer at what is causing these errors it seems to be caused my Bootstrap components.
Is there anyway to update this to remove the errors?
I ran into the same problem with react-bootstrap#v0.33.1 specifically when using OverlayTrigger component after upgrading to React 18. The warning message suggests to migrate to using portals. So I implemented a CustomOverlayTrigger component that leverages portals and referred to React's portal documentation to do so. Note that this solution is for Bootstrap 3 usage of OverlayTrigger (react-bootstrap v0.33.1). It seems later versions of react-bootstrap got rid of using ReactDOM.unstable_renderSubtreeIntoContainer. If you are not in a position to migrate to later versions (like I am), this solution will help for this use case. I have not check thoroughly if other components use the deprecated method, but the approach might be the same.
First of all, I copied the original source of the OverlayTrigger component code located here. You will need to clean up the imports and include into your code the utils function createChainedFunction located here.
I then created a portal wrapper based off React's documentation that looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
const tooltipRoot = document.getElementById('tooltip-root');
class PortalWrapper extends React.Component {
constructor(props) {
super(props);
this.el = document.createElement('div');
}
componentDidMount() {
tooltipRoot.appendChild(this.el);
}
componentWillUnmount() {
tooltipRoot.removeChild(this.el);
}
render() {
// eslint-disable-next-line react/destructuring-assignment
return ReactDOM.createPortal(this.props.children, this.el);
}
}
PortalWrapper.propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]).isRequired,
};
export default PortalWrapper;
At the top, you can see the line const tooltipRoot = document.getElementById('tooltip-root');, I simply added in my index.html a div next to the react app's root div that will server as the anchor for my portal.
Then, back in the CustomOverlayTrigger component copied from react-bootstrap, I edited it in the follwing manner:
Remove all references to this._overlay and this._mountNode because the PortalWrapper now manages the mounting/unmounting. So I deleted componentDidMount(), componentDidUpdate(), componentWillUnmount() and renderOverlay()
I modified makeOverlay so that its result is wrapped by PortalWrapper so it became the following:
makeOverlay(overlay, props) {
return (
<PortalWrapper>
<Overlay
{...props}
show={this.state.show}
onHide={this.handleHide}
target={this}
>
{overlay}
</Overlay>
</PortalWrapper>
);
}
Finally, I changed the render method's return statement to become:
return (<>
{cloneElement(child, triggerProps)}
{this.makeOverlay(overlay, props)}
</>);
After this, I simply had to replace all my invocations to OverlayTrigger with CustomOverlayTrigger and I had the same result without the warning message.
I'm using NextJS version 12.0.3 with framer motion for animations. Putting the functionality of the framer-motion library aside, when I tag any html element in my component, I get an error
error - SyntaxError: The requested module 'react' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'react';
const { createContext } = pkg;
The file (Login.jsx) causing the error:
import { motion } from "framer-motion";
const Login: React.FC = () => {
return (
<motion.div
className=""
>
</motion.div>
);
};
export default Login;
Oddly enough, when I am routed TO the logo page from a different page, the page loads fine. But when I REFRESH the page, I'm faced with this error.
When I keep the import statement for framer-motion, BUT remove the motion. tags on my div element, the error does not persist when I refresh.
Is this a common issue with Next JS 12.0.3?
Should I just roll back to previous versions?
Thanks for your time!!
I had the same errors by importing framer-motion.
I solved this problem change import by require:
const { motion } = require("framer-motion");
I think the problem is from the latest update.
This works for me yarn add framer-motion#6.5.1
I was also facing the same issue and looking at the upgrade guide
of next js I found that the I was using nodejs version < 12.22.0 which caused this issue. Upgrading it to nodejs 12.22.0 fixed the issue for me.
I have got a problem, I tried everything so far and with no success. I have installed react, react-native comes with it, but when I try importing components I get ``
This is Register.js code, I have these imports:
import React, { Component } from "react";
import { View, Text } from "react-native";
And class:
class Register extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<View>
<Text>Hello</Text>
</View>
);
}
}
export default Register;
I'm trying to use <View> and <Text>, but I get this error: Module not found: Can't resolve 'react-native' in 'D:\Darbai\2 kursas 2 semestras\Lankstusis prog. kurimas\Git workspace\team01\research\todosi-react\src\components\user_management' My guess is it's trying to find react-native in components\user_management folder, can this be a problem? Also Here is my files hierarchy.
Just found out I needed to install all dependencies, it solved my problem. I installed these dependencies with command npm install <dependency_name>:
react-scripts,
react-dom,
react-native-web,
react-art,
react-router-native,
react-router-dom
I'm trying to use Atomize (https://atomizecode.com/) with Gatsby JS (https://www.gatsbyjs.org/) and while it is successfully installed, the atomize components are not being rendered to the page.
I am trying to import a button to start "Hey", and while it renders something it is not the standard button component. Also, even though the button component is imported, I get the warning that reads it is not being used.
I am wrapping atomize around gatsby app by the following way:
import React from "react"
import { StyleReset } from "atomize"
export const wrapRootElement = ({ element }) => (
<>
<StyleReset />
{element}
</>
)
Did you install styletron toolkit?
According to their docs it's a dependency and looking at their package.json it's defined under peerDependencies which means it won't get installed along with atomize.
Styletron's docs sugggets using gatsby-plugin-styletron for Gatsby.
Hope that helps.
I'm trying to use lazy loading for my create-react-app with react#16.5.2 and I did this :
import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom';
const Header = React.lazy(() => import('./_header'));
class SomeFile extends Component {
render() {
return (
<BrowserRouter>
<React.Fragment>
<Header />
</React.Fragment>
</BrowserRouter>
);
}
}
export default SomeFile;
Do you know why this error occurs ? is it because of my react version ? based on this everything seems fine!
Edit
What does this mean? based on reactjs.org :
Note:
React.lazy and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend Loadable Components. It has a nice guide for bundle splitting with server-side rendering.
React.lazy is only available from v16.6.0 https://reactjs.org/blog/2018/10/23/react-v-16-6.html
In your comand line interface, try updating React using the following command:
npm i react#latest
Restart Development Server, if you still face issue try the above steps:
Search for REACT_EDITOR on the Readme.md file, and insert =atom in front of it, like as follow:
REACT_EDITOR=atom
Then, save, restart the development server. It should work now