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';
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
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
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';
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.
I am having an error like this:
XMLHttpRequest cannot load file:///Users/mshin/workspace/spirent/trinity/trinity-link/public/node_modules/can/view/stache/system.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
home.js:
import can from 'can';
import template from './home.stache!';
export default can.Component.extend({
tag: 'home',
template: template
});
The build config in Gruntfile:
"steal-build": {
default: {
options: {
system: {
config: "package.json!npm",
bundlesPath: "production"
},
buildOptions: {
minify: true,
sourceMaps: true
}
}
}
}
I don't know why I am getting this error message in production mode. In development environment, it works fine. Also, it is fine on test environment. I am running QUnit test with testee.
home_test.js:
import QUnit from 'steal-qunit';
import ViewModel from 'components/home/home';
import can from 'can';
import stache from 'can/view/stache/';
import $ from 'jquery';
var template = can.stache('<home></home>'),
$component;
QUnit.module('home component', {
setup: function() {
$('#trinity-js-tests').html(template());
$component = $('#trinity-js-tests').find('home');
}
});
QUnit.test('title tag', function() {
QUnit.ok($component.find('h1'), 'Page shows title with <h1> tag');
});
QUnit.test('title content', function() {
QUnit.strictEqual($component.find('h1').text(), 'This is homepage.', 'Title is "This is homepage."');
});
However, if I change the home.js to like this:
import can from 'can';
export default can.Component.extend({
tag: 'home',
template: can.view('components/home/home.stache)
});
It works fine in production and development environment, but in test the last test case fails.
1) QUnit "public/tests/test.html" on PhantomJS 1.9.8 / Mac OS X 0.0.0: home component title content Title is "This is homepage.":
Error: Expected This is homepage. but was
at http://localhost:3996/public/tests/test.html?__token=k8l88m:1340
at http://localhost:3996/public/tests/test.html?__token=k8l88m:1907
at :33
at http://localhost:3996/public/tests/test.html?__token=k8l88m:895
at http://localhost:3996/public/tests/test.html?__token=k8l88m:1024
at process (http://localhost:3996/public/tests/test.html?__token=k8l88m:583)
at begin (http://localhost:3996/public/tests/test.html?__token=k8l88m:628)
at http://localhost:3996/public/tests/test.html?__token=k8l88m:644
It looks like you are loading it from the file:// protocol, is that correct? If so that's likely your problem.
I found what I missed in the code.
main.js
import $ from 'jquery';
import _ from 'lodash';
import stache from 'can/view/stache/';
import can from 'can';
import 'components/route/';
import 'less/trinity.less!';
I didn't import can/view/stache/system in it.
To use system plugin in can.stache, I need to import the specific file to main javascript file.
So, the file should be
import $ from 'jquery';
import _ from 'lodash';
import stache from 'can/view/stache/';
import 'can/view/stache/system'; // this is the added line
import can from 'can';
import 'components/route/';
import 'less/trinity.less!';