I made some code to scrape some information from an webpage using puppeteer and I wanted to use react to show the information. But when I tried to install the puppeteer package in the react app, I found that I can't install it. Did I make something wrong, or is it impossible to use puppeteer in react? And if is impossible, is there an alternative to implement puppeteer?
import React, {Component} from 'react';
import './App.css';
import puppeteer from 'puppeteer'
class App extends Component{
constructor(props){
super(props);
this.state = {
name:"Test"
};
}
render(){
return(
<h1> {this.state.name} </h1>
)
}
}
export default App;
And I get this error
Module not found: Can't resolve 'ws' in 'C:\Users\zoica\Desktop\PupeteerTest\my-app\node_modules\puppeteer\lib'
You need to import puppeteer like this:
import * as puppeteer from 'puppeteer';
Related
I want to create a cart for a shopping mall,
when I use the redux ,which always comes two errors(Problem A&B).
Problem A.
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Problem B.
Uncaught TypeError: Cannot read properties of null (reading 'useMemo')
at useMemo (react.development.js:1650:1)
at Provider (Provider.js:12:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
As the photo below:
Data structures:
cartRedux>>store>>index.js
useSelector>>Nav.jsx(which shows the console.log() )
here are my relative data:
cartRedux.js
import {createSlice} from "#reduxjs/toolkit"
const cartSlice=createSlice({
name:"cart",
initialState:{
products:[],
quantity:0,
total:0,
},
reducers:{
addProduct:(state,action)=>{
state.quantity+=1;
state.products.push(action.payload.product);
state.total+=action.payload.price;
},
}
})
export const {addProduct}=cartSlice.actions;
export default cartSlice.reducer;
store.js
import {configureStore} from "#reduxjs/toolkit";
import cartReducer from "./cartRedux";
export default configureStore({
reducer:{
cart:cartReducer,
}
})
index.js and the error always metioned the Provider,but it is imported from react-redux.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from "react-redux";
import store from './redux/store';
const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);
Nav.jsx
import React from 'react'
import {useSelector} from 'react-redux';
import Styled from 'styled-components';
const Container = Styled.div`
width:100%;
color: black;
height:max-content;
`;
const Nav = () => {
const cart=useSelector(state=>state.cart)
console.log(cart);
return (
<Container/> .....
)
}
export default Nav
I am new to react.I am trying to display appbar using material ui in react project. but i can't see the output of it. I have the latest version of the material ui and react.
but the same code is running on codesand box ide on web.
I don't know why it is happening
this is my file structure:
[file structure][1]
These are the versions of the node modules:
[versions of my node modules][2]
The App.js file:
[App.js][3]
this is expected:
[Expected output screen][4]
but got this:
[obtained output screen][5]
this is my index.js file:
[index.js][6]
import React from 'react';
import AppBar from '#material-ui/core/AppBar';
import Typography from '#material-ui/core/Typography';
import VideoPlayer from './components/VideoPlayer';
import Notifications from "./components/Notifications";
import Options from "./components/Options";
const App=()=>{
return(
<div>
<AppBar position="static" color="inherit">
<Typography variant="h2" align="center">Video Chat</Typography>
</AppBar>
<VideoPlayer/>
<Options>
<Notifications/>
</Options>
</div>);
}
export default App;
Thanks in advance for who has replied for my post. thank you for getting me out of this error.
[1]: https://i.stack.imgur.com/ms4fI.png
[2]: https://i.stack.imgur.com/yxLnC.png
[3]: https://i.stack.imgur.com/4VfvN.png
[4]: https://i.stack.imgur.com/dFDg0.png
[5]: https://i.stack.imgur.com/MMK0E.jpg
[6]: https://i.stack.imgur.com/0GWKQ.png
This might be an import issue. Material UI is now MUI If you have the latest version of Material you might need to change the import.
import AppBar from '#mui/material/AppBar';
// or
import { AppBar } from '#mui/material';
We are using pusher-js in our chrome extension application to connect with backend messaging.
Till manifest V2, It worked perfectly fine. But post manifest V3 migration, pusher-js is throwing Uncaught ReferenceError: window is not defined while doing load-unpacked.
I event tried updating the pusher-js npm package, but dint worked.
I am well know that window object is not available in new manifest V3. But how to make pusher-js work in my chrome extension.
This error happens as soon as I import the pusher from pusher-js.
Removing the pusher import, code works perfectly. Can anyone help me on this?
import code pusher
/* global chrome */
// import Config from '../config';
import StatusChecker from '../utils/status-checker';
import StatusCheckerNotifier from '../utils/status-checker-notifier';
import loggingService from '../utils/logging-service';
import fetchProvider from '../fetch';
import fetchGraphqlProvider from '../fetch-graphql';
import { addLinkedInCsrfTokenHeader } from './csrf-token-header';
import LoggingService from './services/LoggingService';
import FetchableService from './services/FetchableService';
import ContractChooserResolver from './services/ContractChooserResolver';
import dispatcher from '../dispatcher';
import ContextRuntime from '../contextruntime';
import { pusherInit } from './pusher-init';
import { SIDEBAR_EVENTS } from '../constants';
import * as Utils from './helpers';
class GoldmineBackend {
init(userMeta) {
console.log('testing');
}
}
export default new GoldmineBackend();
service-worker console error
service-worker console error - source
build load-unpacked error
So when doing an npm run build I get the following error
Cannot find module: '#styles/react/libs/toastify/toastify.scss'. Make sure this package is installed.
[2021-05-27T08:03:15.123590112Z]
[2021-05-27T08:03:15.123595462Z] You can install this package by running: npm install #styles/react/libs/toastify/toastify.scss.
However if I run the command it is telling me to npm install #styles/react/libs/toastify/toastify.scss it is telling me that
Could not install from "#styles\react\libs\toastify\toastify.scss" as it does not contain a package.json file.
I have tried deleting my node modules and doing a complete npm install again but that hasn't fixed it
Package.json
https://pastebin.com/qEUs8esc
Console
https://pastebin.com/znUKVdmt
Index.js
// ** React Imports
import { Suspense, lazy } from 'react'
import ReactDOM from 'react-dom'
// ** Redux Imports
import { Provider } from 'react-redux'
import { store } from './redux/storeConfig/store'
// ** Toast & ThemeColors Context
import { ToastContainer } from 'react-toastify'
import { ThemeContext } from './utility/context/ThemeColors'
// ** Spinner (Splash Screen)
import Spinner from './#core/components/spinner/Fallback-spinner'
// ** Ripple Button
import './#core/components/ripple-button'
// ** PrismJS
import 'prismjs'
import 'prismjs/themes/prism-tomorrow.css'
import 'prismjs/components/prism-jsx.min'
// ** React Perfect Scrollbar
import 'react-perfect-scrollbar/dist/css/styles.css'
// ** React Toastify
import '#styles/react/libs/toastify/toastify.scss'
// ** Core styles
import './#core/assets/fonts/feather/iconfont.css'
import './#core/scss/core.scss'
import './assets/scss/style.scss'
// ** Service Worker
import * as serviceWorker from './serviceWorker'
// ** Lazy load app
const LazyApp = lazy(() => import('./App'))
ReactDOM.render(
<Provider store={store}>
<Suspense fallback={<Spinner />}>
<ThemeContext>
<LazyApp />
<ToastContainer newestOnTop />
</ThemeContext>
</Suspense>
</Provider>,
document.getElementById('root')
)
serviceWorker.unregister()
I got this error when i run the exp start command. How can I solve this error?
This is my login.js file code.
I am new to React native, using js to run a native app using expo, so I am stuck. I don't know why it gives me this error and how to handle it.
import React, { Component } from 'react';
import {
Alert,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
Image,
AsyncStorage,
KeyboardAvoidingView,
Dimensions,
ActivityIndicator,
NetInfo,
BackHandler,
DeviceEventEmitter
} from 'react-native';
import * as firebase from 'firebase';
import firebaseService from '../config/firebaseService';
import {Actions} from 'react-native-router-flux';
import Modal from "react-native-modal";
import { Dialog,ConfirmDialog } from 'react-native-simple-dialogs';
import Toast, {DURATION} from 'react-native-easy-toast';
import Expo from 'expo';
var height = Dimensions.get('window').height;
var width = Dimensions.get('window').width;
import styles from "../styles/loginStyle";
import {apiUrl,netErrorMsg,facebookId,androidGoogleClientId,iosGoogleClientId,firebaseConfig} from "../config/constant";
export default class Login extends Component<{}> {
constructor(props) {
super(props);
this.state = {
email:'',
password:'',
forgotEmail:'',
versionName:'',
loading:false,
isModalVisible: false,
netStatus:'none',
dialogVisible:false,
errorForgotEmail:""
}
}
Looks like you are trying to import firebase from your Login.js in some file. Remove that import and import firebase as you have imported it in your Login.js. This will resolve the problem.