<GeistProvider /> tag cannot be used with react-redux <Provider> tag?

[schwarzsky]

This is the App.js i've been working.

import logo from './logo.svg';
import './App.css';

import {useSelector, useDispatch} from 'react-redux'
import {increment, decrement} from './store/actions/'
import { GeistProvider, CssBaseline } from '@geist-ui/react';

function App() {
  const count = useSelector((state) => state.counter)
  const dispatch = useDispatch()

  return (
    <GeistProvider>
      <CssBaseline/>
      <div className="App">
        <header className="App-header">
          <h1>Count is {count}</h1>
          <button onClick={() => dispatch(increment(3))}>+</button>
          <button onClick={() => dispatch(decrement())}>-</button>
        </header>
      </div>
    </GeistProvider>
  );
}

export default App;

This is the index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import {GeistProvider, CssBaseline} from '@geist-ui/react'

import {Provider} from 'react-redux'
import store from './store'

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
  document.getElementById('root')
);

I tried use it on outside of tag, inside of tag but nothing changes. I get an error like Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

[Deep-Codes]

Works for me though

@schwarzsky try this repo I just created.

https://github.com/Deep-Codes/react-redux-geist-starter

[schwarzsky]

browser one
My Error was this:
https://stackoverflow.com/questions/53514758/redux-typeerror-cannot-read-property-apply-of-undefined

i got same error when i uninstalled the extension. I installed it again and still getting the same Invalid Hook Call error. I am using brave browser like you, i tried to change this line:

const store = createStore(rootReducer, compose(applyMiddleware(...middlewares), window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f))

but still getting the same error. Redux Dev Tools extension looks like v2.17.0

[Deep-Codes]

The last thing I do in such a situation is to delete and reinstall node_modules 🤔

[schwarzsky]

Ahahah, i am now installing chrome. I will try to look in chrome, if not works. I will try your way too. Thanks for help <3

[schwarzsky]

Not worked but really thanks for your help. <3 Can you tell what application are you using for creating screenrecorded gifs? And VS Code theme? Looks very nice.

[Deep-Codes]

I tried on chrome it works

I use Screenflow to record the video it exports in .mp4

then I use FFmpeg script to convert to .gif

You can find the script on my site: FFmpeg Scripts

VsCode theme: Tokyo Night
Font: Dank Mono

[schwarzsky]

Problem was solved with using npm remove @geist-ui/react and installed with yarn add @geist-ui/react. Thanks all. <3

[Gounlaf]

Reported #519 cause using yarn and npm should works.