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()
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'm getting the following error, a would love it if someone could point me in the right direction :)
Failed to compile ./src/App.js Attempted import error: 'UserProvider'
is not exported from './model/UserContext'.
UserContext.js
const UserProvider = ({ children, history}) => { ... })
export default withRouter(UserProvider);
app.js
import React from 'react';
import NavBar from './components/navBar';
import Login from './components/login';
import Session from './components/session';
import Dashboard from './components/dashboard';
import './App.css';
import Container from '#material-ui/core/Container';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import { UserProvider } from './model/UserContext'
function App() {
return (
<div>
<UserProvider>
<Session />
<NavBar />
<Container maxWidth="sm">
<Router>
<Route path='/Login' component={Login} />
<Route path='/Dashboard' component={Dashboard} />
</Router>
</Container>
</UserProvider>
</div>
);
}
export default App;
You are exporting UserProvider as default. So in App.js just import like below(Without curly braces).
import UserProvider from './model/UserContext'
import { UserProvider } from './model/UserContext'
You need to write like:
import UserProvider from './model/UserContext'
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 creating a forced graph in react using d3 for npm.
The graph is created using the follows:
https://medium.com/walmartlabs/d3v4-forcesimulation-with-react-8b1d84364721
I am trying to set up the testing environment as follows:
https://ericnish.io/blog/how-to-unit-test-react-components-with-enzyme/
the problem is when I run the test I keep on getting
Cannot read property 'matches' of undefined
at C:\workspace\project\node_modules\d3-selection\build\d3-selection.js:83:15
I have imported d3 in my graph component as follows:
import * as d3 from 'd3';
It seems like when I import my react component in my test file, it freaks out. This is my test file:
import React from 'react'
import {shallow, mount, render} from 'enzyme'
import {expect} from 'chai'
import * as d3 from 'd3';
import graph from '.../components/graph ';
describe('graph ', () => {
it('should have the main svg', (done) => {
const wrapper = shallow(<graph />);
expect(wrapper.find('svg')).to.have.length(1);
done()
})
})
How can I get rid of this error?
Create a file, e.g. polyfill.js:
global.document.documentElement = {matches: () => false};
And import it right before you import DS3 (or any other import that transitively imports D3):
import React from 'react'
import {shallow, mount, render} from 'enzyme'
import {expect} from 'chai'
import './polyfill';
import * as d3 from 'd3';