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 }
Related
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 get react-toastify to work in an app I'm writing while following an online course. I'm supposed to install a specific version but I always prefer using the very latest one but when I do, I'm getting a bunch of errors.
I've gone to the npm home page for React-Toastify and they provide very good documentation on how to use it and I believe I've followed the instructions from both the course and react-toastify correctly but I'm still getting an error.
I've defined react-toastify as the top of my App.js
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
and I'm simply calling a test toast as follows:
handleDelete = (post) => {
toast("deleted");
// toast.error("deleted");
}
and in my render method I have the <ToastContainer />:
render() {
return (
<React.Fragment>
<ToastContainer />
<button className="btn btn-error" onClick={this.handleDelete}>
Delete
</button>
When I click on my delete button I get an error (well I'm actually getting a bunch of them but this is the main one):
TypeError: Object(...) is not a function
useToastContainer
..myapp/node_modules/react-toastify/dist/react-toastify.esm.js:866
863 | }
864 |
865 | function useToastContainer(props) {
> 866 | var _useReducer = useReducer(function (x) {
867 | return x + 1;
868 | }, 0),
869 | forceUpdate = _useReducer[1];
Actually, I've just noticed that my <ToastContainer /> was commented out in my render method and the second I uncomment it, the same error occurs immediately as my page loads.
Am I missing something or is this a bug with react-notify and the version of React I'm using i.e. 16.4.1?
I was also facing a similar issue, this is because there are some conflicting dependencies with react-toastify in the newer versions with respect to its predecessor.
Also if you follow some courses they usually provide some resources to proceed with, when you start working on those resource and do a npm i for its dependencies it install certain versions of the package which is specified in the package.json file, so if you are trying to install a new package as a part of the course it might not be compatible with the ones mentioned in the resource files.
So to avoid conflict here you can manually install all the packages mentioned in package.json with the latest versions then install the latest version of react-toastify
OR
Try reverting the version of react-toastify to earlier version , maybe try with react-toastify#4.1 or the version mentioned in the course. (This worked for me)
install an older version of react-toastify and it will work just fine
Remove unused props.
handleDelete = () => {
toast("deleted");
// toast.error("deleted");
}
Or use the function props.
handleDelete = (post) => {
toast(post);
}
And call your function in arrow function.
render() {
return (
<React.Fragment>
<ToastContainer />
<button className="btn btn-error" onClick={() => {this.handleDelete('deleted')}}>
Delete
</button>
</React.Fragment>
)
What works for me was to create another file to hold the <ToastContainer/> and then import it in my App.js and it works fine. Here I'm giving you a simple example:
./src/toast.jsx
import React from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
const Toast = () => {
const errorMessage = () => {
toast.error("Unexpected error occured");
};
return (
<div>
<button onClick={errorMessage} className="btn btn-primary">
Submit
</button>
<ToastContainer />
</div>
);
};
export default Toast;
./src/App.js
import React, { Component } from "react";
import "./App.css";
import Toast from "./toast";
class App extends Component {
state = {
};
render() {
return (
<React.Fragment>
//Your code...
<Toast />
</React.Fragment>
);
}
}
export default App;
However, my application is a little bit more complex and basically I have a file httpServices.js, where I'm using Axios library to make HTTP requests and catch errors. So if I catch an error while sending an Http request and I'm using "toast.error("Message")". I'm using the new file toast.jsx to hold a container for the errors and this container I import in my App.js.
I would like to use some Cordova plugins in my react JS app and the app has been failing. I understand cordova is only available at runtime by i need a workaround.
My app was created with create react app with cordova here
For example, I want to import the cordova-plugin-device to get the device uuid with the following code:
import React, {Component} from 'react';
...
var device = require("cordova-plugin-device");
class Login extends Component {
handleSubmit = () => {
const { phone, password } = this.state
let params = {
phonenumber: phone,
password: password,
deviceID: device ? device.uuid : "test"
}
...
}
render () {
...
}
}
}
I am getting an error with npm start and when i run npm build . This is the error Module not found: Can't resolve 'cordova-plugin-device' in 'C:\projects\
Any pointers on how to implement this would be appreciated.
I figured how to solve my problem. COrdova is made available at runtime so i used window.cordovaPulgin to access it.
For example, i needed a Payment plugin service that call its methods, like this:
PaymentPlugin.pay(payRequest, paySuccess, payFail);
My problem was that my code npm start && npm run build was failing because it could not find PaymentPlugin, so to make this work, after extensive research, realized that if plugin was properly installed, I would be able to use it like
window.PaymentPlugin.pay(payRequest, paySuccess, payFail);
I was trying to follow the same suggested solution by #Lateefah to get access of local notifications plugin but window.cordova was showing undefined. After doing some more research, I realised that the solution is correct but my react application must reside in the the cordova project as suggest here https://stackoverflow.com/a/43440380/4080906.
The steps I followed:
create cordova app (e.g. cordovaApp)
cd cordovaApp && create-react-app reactApp
modify index.js in reactApp and add
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
const startApp = () => {
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
};
if (!window.cordova) {
startApp();
} else {
document.addEventListener("deviceready", startApp, false);
}
serviceWorker.unregister();
add cordova.js reference in the body tag of index.html in reactApp under public folder
<script type="text/javascript" src="cordova.js"></script>
(OPTIONAL) modify build command in package.json in reactApp to build and copy the build to cordova www folder (For Linux/Mac)
"build": "react-scripts build && cp -a ./build/. ../www/",
(OPTIONAL) To test this, I added a button in app.js and added notification there and it worked for me on an android device.
import React from "react";
import logo from "./logo.svg";
import "./App.css";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<button
onClick={() => {
if (window.cordova) {
if (window.cordova.plugins) {
alert("Crodova and plugins Found");
window.cordova.plugins.notification.local.schedule({
title: "My first notification",
text: "Thats pretty easy...",
foreground: true,
});
} else alert("plugins not found");
} else alert("Cordova not found");
}}
>
Get Notified
</button>
</header>
</div>
);
}
export default App;
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 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