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
Related
I have my React project, and I'm trying to import and use
react-embedded-browser
but I'm getting this error:
Module not found: Error: Can't resolve 'child_process' in
'C:...\projectName\node_modules\open\lib'
Hints:
I integrated this project with ExtReact, (but still the project works OK just until I npm install react-embedded-browser
I see that this npm package was updated last time 3 years ago (so it might be deprecated)
what should I use to Embed Web Browser into my WebPage if not this package (it can Not be a native)?
import React, {Component} from 'react';
import EmbeddedBrowser from 'react-embedded-browser';
function show() {
let eb = document.querySelector('.embedded-browser');
eb.className = 'embedded-browser anime-slidein';
eb.open('https://google.com');
}
class EmbeddedBrowserComponent extends Component{
render(){
return (
<div>
<button type="button" onClick={show}>push me</button>
<EmbeddedBrowser id="scaffolded-browser" />
</div>
)
}
}
export default EmbeddedBrowserComponent;
just put in package.json
"browser":{
"child_process": false
}
or { fork: false }
Just getting started with Handsontable. I used create-react-app and npm install --save react-handsontable.
Added a table to App.js:
import React, { Component } from 'react';
import HotTable from 'handsontable'
class App extends Component {
render() {
return (
<HotTable/>
);
}
}
export default App;
And seeing error:
TypeError: rootElement.insertBefore is not a function
node_modules/handsontable/dist/handsontable.js:8197
rootElement.insertBefore(this.container, rootElement.firstChild);
From searching the web it seems this may have something to do with load order issues, but I'm not sure what I can change.
Solution: I was importing handsontable but I should have imported react-handsontable.
import HotTable from 'react-handsontable'
This is documented correctly but I did not notice that detail.
https://github.com/handsontable/react-handsontable
I use WebStorm for React JS and I'm getting this 'Unresolved variable warning' for all props.
I searched for solution everywhere but couldn't find. Whenever i pass down prop value and then use it as this.props.something, that something is unresolved. App works fine and there is no problem, it's just that WebStorm makes this irritating. I installed typescript definitions and nothing.
This is the code:
import React from 'react';
import ReactDOM from 'react-dom';
class A extends React.Component
{
render()
{
return (
<button>
{this.props.something}
</button>
);
}
}
class B extends React.Component
{
render()
{
return(
<A something={1}/>
)
}
}
ReactDOM.render(
<B/>,
document.getElementById('root')
);
Here is screenshot of that:
Screenshot
Known issue, please follow WEB-31785 for updates
npm install --save #types/react
use es6 destructuring to remove the warnings:
eg : rather than
if (this.props.variableName) ...
use
const { variableName } = this.props;
if (variableName) ...
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
I start making a new interface with react-toolbox. and this is just my first step and i face this problem. I got an message in my console:
Unable to resolve some modules: "./style" ...
i don't know why the style won't load. i also imported its component already.
here are some simple code :
import React from 'react';
import {Button} from 'react-toolbox';
class MyButton extends React.Component {
render() {
return (
<div>
<Button icon='bookmark' label='Bookmark' raised primary />
</div>
);
}
}
export default MyButton;
Thanks so much for your help.
You are getting this error because react-toolbox uses CSS Modules and you dont have the loaders to preprocess them.
You are going to need
webpack
css-loader
style-loader