Could not find "store" in either the context or props

[rahulppatidar]

Hi,

I'm getting this error.

Could not find "store" in either the context or props of "Connect(withProps(withHandlers(withContext(lifecycle(JPlaylist)))))". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(withProps(withHandlers(withContext(lifecycle(JPlaylist)))))".

Please help me to resolve this error.

Thanks.

[MartinDawson]

Have you seen https://github.com/jplayer/react-jPlayer-examples?

[rahulppatidar]

@MartinDawson Yes I have seen this and implement it.

index.js
`import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { Router } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from './_helper/store';
import history from './_helper/history';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();`

store.js
`import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import RootReducer from '../_reducers/index'

const store = createStore(RootReducer, applyMiddleware(thunk));

export default store;`

rootReducer.js
`
import { combineReducers } from 'redux';
import { reducer as jPlayers } from 'react-jplayer';
import { reducer as jPlaylists } from 'react-jplaylist';
import {authentication} from './authenticationReducer';
import {alert} from './alertReducer';
import {audioReducer} from './audioReducer';
import {videoReducer} from './videoReducer';
import {userReducer} from './userReducer';
import {membershipReducer} from './membershipReducer';
import {searchReducer} from './searchReducer';

const RootReducer = combineReducers({
authentication,
alert,
audioReducer,
videoReducer,
userReducer,
membershipReducer,
searchReducer,
jPlayers,
jPlaylists

});

export default RootReducer;`

Player.js

`import React from 'react';
import JPlayer, {
Gui, SeekBar, BufferBar,
Poster, Audio, Title, FullScreen, Mute, Play, PlayBar,
VolumeBar, Duration, CurrentTime, Download, BrowserUnsupported,
} from 'react-jplayer';
import JPlaylist, {
initializeOptions, Playlist, Shuffle, Next, Previous, Repeat,
TogglePlaylist, Remove, MediaLink, Title as PlaylistTitle, actions
} from 'react-jplaylist';

const jPlayerOptions = {
id: 'FooterPlaylist',
verticalVolume: true,
};

const jPlaylistOptions = {
hidePlaylist: true,
playlist: [
{
id: 0,
title: 'Tempered Song',
artist: 'Miaow',
sources: {
flv: '/video/small.flv',
oga: 'http://techslides.com/demos/sample-videos/small.mp4',
},
},
{
id: 1,
title: 'Cro Magnon Man',
artist: 'The Stark Palace',
sources: {
mp3: 'http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3',
oga: 'http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg',
},
},
],
};

initializeOptions(jPlayerOptions, jPlaylistOptions);

const FooterPlaylist = () => (

  <Audio />
  <Gui>
    <div className="jp-controls jp-icon-controls">
      <Previous><i className="fa fa-step-backward" /></Previous>
      <Play><i className="fa"></i></Play>
      <Next><i className="fa fa-step-forward" /></Next>
      <Repeat>
        <i className="fa"></i>
        <i className="fa fa-repeat" />
      </Repeat>
      <Shuffle><i className="fa fa-random" /></Shuffle>
      <div className="jp-progress">
        <SeekBar>
          <BufferBar />
          <PlayBar />
          <CurrentTime />
          <Duration />
        </SeekBar>
      </div>
      <div className="jp-volume-container">
        <Mute>
          <i className="fa"></i>
        </Mute>
        <div className="jp-volume-slider">
          <div className="jp-volume-bar-container">
            <VolumeBar />
          </div>
        </div>
      </div>
      <div className="jp-playlist-container">
        <Playlist>
          <Remove />
          <MediaLink>
            <PlaylistTitle />
          </MediaLink>
        </Playlist>
        <TogglePlaylist><i className="fa fa-ellipsis-h" /></TogglePlaylist>
      </div>
      <FullScreen><i className="fa fa-expand" /></FullScreen>
      <Download><i className="fa fa-download" /></Download>
      <div className="jp-title-container">
        <Poster />
        <Title />
      </div>
    </div>
    <BrowserUnsupported />
  </Gui>
</JPlayer>

); export default FooterPlaylist; `

I have used it before in one of my project and it is working there but now it is giving me this above error.
I used same code but still not working.

[rahulppatidar]

I am using create-react-app and create a fresh project and then used the example given here still getting same error. Could you please try by create a fresh app and try the example.

I want to play audio and for that I used both audio as well as multiple example but getting same error.
Please help as soon as possible.

[digitalray]

I have tried implementing it into a symfony react and am getting the same error:

react-dom.development.js:16013

The above error occurred in the <Connect(withHandlers(lifecycle(JPlayer)))> component:
    in Connect(withHandlers(lifecycle(JPlayer)))
    in getContext(Connect(withHandlers(lifecycle(JPlayer))))
    in withContext(getContext(Connect(withHandlers(lifecycle(JPlayer))))) (created by LivePlayer)
    in LivePlayer
    in Provider

browser.js:38

Error: Could not find "store" in either the context or props of "Connect(withHandlers(lifecycle(JPlayer)))". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(withHandlers(lifecycle(JPlayer)))".

Other react components are working fine. I was stuck at this thinking that I was doing something wrong but seems like this may be a valid bug.

I am currently using: https://github.com/jplayer/react-jPlayer-examples/tree/master/jPlayers/LivePlayer

Any help would be highly appreciated.

[digitalray]

Here is the code

player.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { reducer as jPlayers } from 'react-jplayer';


// Styles the jPlayer to look nice
import 'react-jplayer/src/less/skins/sleek.less';
// Styles Play/Pause/Mute etc when icons (<i />) are used for them
import 'react-jplayer/src/less/controls/iconControls.less';

import LivePlayer from './livePlayer';

/* Pass the jPlayer reducer and it's initialStates to the store */
const store = createStore(combineReducers({ jPlayers }));

//const storeProp = Connect(withHandlers(lifecycle(JPlayer)));
/* Wrap our player in the Redux Provider and render the jPlayer.
The provider should go at the root of your App, just like Redux documentation recommends,
so that all components below the Provider have access to the jPlayers state
*/


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

livePlayer.jsx

import JPlayer, {
    initializeOptions, Gui,
    Audio, Title, FullScreen, Mute, Play,
    VolumeBar, CurrentTime, BrowserUnsupported,
} from 'react-jplayer';

const defaultOptions = {
    id: 'LivePlayer',
    keyEnabled: true,
    verticalVolume: true,
    media: {
        title: 'ABC Jazz',
        sources: {
            mp3: 'http://listen.radionomy.com/abc-jazz',
        },
    },
};

initializeOptions(defaultOptions);

const LivePlayer = () => (
    <JPlayer id={defaultOptions.id} className="jp-sleek">
        <Audio />
        <Gui>
            <div className="jp-controls jp-icon-controls">
                <Play><i className="fa">{/* Icon set in css */}</i></Play>
                <div className="jp-progress">
                    <CurrentTime />
                </div>
                <div className="jp-volume-container">
                    <Mute>
                        <i className="fa">{/* Icon set in css */}</i>
                    </Mute>
                    <div className="jp-volume-slider">
                        <div className="jp-volume-bar-container">
                            <VolumeBar />
                        </div>
                    </div>
                </div>
                <FullScreen><i className="fa fa-expand" /></FullScreen>
                <div className="jp-title-container">
                    <Title />
                </div>
            </div>
            <BrowserUnsupported />
        </Gui>
    </JPlayer>
);

export default LivePlayer;

Would love to make this work. Otherwise would be forced to use jquery version.

Thanks,
Sarkis

[singhjagmohan1000]

@rahulppatidar @digitalray @MartinDawson Please check version of react-redux. You should be getting these issues with react-redux version 6.0.1. I faced a similar issue but after switching back to 5.0.7 it works fine. Probably react-jPlayer library has to be updated according to latest react-redux version.

[digitalray]

@singhjagmohan1000 thanks a lot! This solved my issue. The version of react-redux that I had was 6.0.0 and downgrading to 5.0.7 did the trick.

[MartinDawson]

If anyone wants to submit pull requests for a fix up to 6.x and add a peer dependency I will accept. Or just add a peer dep to 5.x

…

On Fri, 1 Mar 2019 at 20:09, Sarkis ***@***.***> wrote: @singhjagmohan1000 <https://github.com/singhjagmohan1000> thanks a lot! This solved my issue. The version of react-redux that I had was 6.0.0 and downgrading to 5.0.7 did the trick. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#22 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AOVY27AAjM7jgN8lBw_CDSdMfwJHIyxRks5vSYkOgaJpZM4ZaLvT> .