Problems when trying to use react-flowplayer

lgsf commented 3 years ago

Hello, I am trying to embed flowplayer in my app. I am currently using NextJs and TypeScript. Since I need to control some aspects of the application based on player events I need to use the JavaScript-based initialization. What happens is in my project I can't even get it to load properly. This is the error I get when I try to output the component:

`C:\Users\DELL\Desktop\bfp-members\node_modules\@flowplayer\react-flowplayer\lib\index.js:1 import Flowplayer from "./flowplayer"; ^^^^^^

SyntaxError: Cannot use import statement outside a module at wrapSafe (internal/modules/cjs/loader.js:979:16) at Module._compile (internal/modules/cjs/loader.js:1027:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at Object.@flowplayer/react-flowplayer (C:\Users\DELL\Desktop\bfp-members.next\server\pages\index.js:266:18) at webpack_require (C:\Users\DELL\Desktop\bfp-members.next\server\pages\index.js:23:31) at Module../components/FlowPlayer.tsx (C:\Users\DELL\Desktop\bfp-members.next\server\pages\index.js:110:86) at webpack_require (C:\Users\DELL\Desktop\bfp-members.next\server\pages\index.js:23:31) at Module../pages/index.tsx (C:\Users\DELL\Desktop\bfp-members.next\server\pages\index.js:212:80) at __webpack_require__ (C:\Users\DELL\Desktop\bfp-members.next\server\pages\index.js:23:31) at C:\Users\DELL\Desktop\bfp-members.next\server\pages\index.js:91:18 at Object. (C:\Users\DELL\Desktop\bfp-members.next\server\pages\index.js:94:10) at Module._compile (internal/modules/cjs/loader.js:1063:30) )`

The code of the component: `import React, { useEffect } from "react"; import Flowplayer from "@flowplayer/react-flowplayer"; import OVPPlugin from "@flowplayer/player/plugins/ovp"; import HLSPlugin from "@flowplayer/player/plugins/hls"; import flowplayer from "@flowplayer/player"; import "@flowplayer/player/flowplayer.css";

flowplayer(HLSPlugin, OVPPlugin);

function stateHandler(ev) { if (ev.type === 'pause') { console.log('paused); } if (ev.type === 'playing') { console.log('playing'); } if (ev.type === 'timeupdate') { console.log(ev.target.currentTime)} if (ev.type === 'ended') { console.log('The end')} }

export default function App() { useEffect(() => { const instance = flowplayer.instances[0] instance.on('pause playing timeupdate ended', stateHandler) }, []) return (

); }`

My ts.config file: { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "types": ["cypress"], "skipLibCheck": true, "strict": false, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "baseUrl": "./", "paths": { "@components/*": ["components/*"], "@infra/*": ["infra/*"], "@styles/*": ["styles/*"] } }, "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx", "next.config.js", "**/*.js" ], "exclude": ["node_modules"] }

My package.json: { "name": "bfp-members", "version": "0.0.1", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint . --ext .js,.jsx,.ts,.tsx --fix", "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook", "cypress:open": "cypress open", "cypress:run": "cypress run" }, "dependencies": { "@flowplayer/player": "^2.9.3", "@flowplayer/react-flowplayer": "^0.1.0", "@types/axios": "^0.14.0", "@types/next-auth": "^3.7.1", "@types/react-burger-menu": "^2.6.2", "@types/react-transition-group": "^4.4.1", "axios": "^0.21.1", "cypress-social-logins": "^1.11.2", "next": "10.0.7", "next-auth": "^3.11.2", "next-seo": "^4.20.0", "react": "17.0.1", "react-burger-menu": "^3.0.6", "react-device-detect": "^1.17.0", "react-dom": "17.0.1", "react-transition-group": "^4.4.1", "sass": "^1.32.8" }, "devDependencies": { "@babel/core": "^7.13.10", "@storybook/addon-actions": "^6.1.21", "@storybook/addon-essentials": "^6.1.21", "@storybook/addon-links": "^6.1.21", "@storybook/react": "^6.1.21", "@types/node": "^14.14.31", "@types/react": "^17.0.2", "@typescript-eslint/eslint-plugin": "4.4.1", "@typescript-eslint/parser": "^4.15.2", "babel-loader": "^8.2.2", "cypress": "^6.8.0", "eslint": "^7.20.0", "eslint-config-airbnb-typescript": "^12.3.1", "eslint-plugin-cypress": "^2.11.2", "eslint-plugin-import": "^2.22.1", "eslint-plugin-jsx-a11y": "6.3.1", "eslint-plugin-react": "7.20.3", "eslint-plugin-react-hooks": "4.0.8", "typescript": "^4.1.5" } }

I've managed to get the above code to work in a regular, vanilla ReactApp. What is presented in the documentation for using the hook to gain access to the Player API does not work even in this setup though. When I try to run the code provided in the documentation ('https://flowplayer.com/developers/player/react'), even in this vanilla react app this is what I get:

react-dom.development.js:23275 Uncaught TypeError: Cannot destructure property 'Flowplayer' of 'Object(...)(...)' as it is null. at App (App.js:11) at renderWithHooks (react-dom.development.js:14985) at mountIndeterminateComponent (react-dom.development.js:17811) at beginWork (react-dom.development.js:19049) at HTMLUnknownElement.callCallback (react-dom.development.js:3945) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994) at invokeGuardedCallback (react-dom.development.js:4056) at beginWork$1 (react-dom.development.js:23964) at performUnitOfWork (react-dom.development.js:22776) at workLoopSync (react-dom.development.js:22707) at renderRootSync (react-dom.development.js:22670) at performSyncWorkOnRoot (react-dom.development.js:22293) at scheduleUpdateOnFiber (react-dom.development.js:21881) at updateContainer (react-dom.development.js:25482) at react-dom.development.js:26021 at unbatchedUpdates (react-dom.development.js:22431) at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020) at Object.render (react-dom.development.js:26103) at Module.<anonymous> (index.js:7) at Module../src/index.js (index.js:16) at __webpack_require__ (bootstrap:856) at fn (bootstrap:150) at Object.1 (reportWebVitals.js:14) at __webpack_require__ (bootstrap:856) at checkDeferredModules (bootstrap:45) at Array.webpackJsonpCallback [as push] (bootstrap:32) at main.chunk.js:1

And the code:

`import React, { useEffect, useState } from "react" import { useFlowplayer } from "@flowplayer/react-flowplayer" import { PAUSE, PLAYING } from "@flowplayer/player/core/events"

import "@flowplayer/player/flowplayer.css"

const SOURCES = ["b8302bc5-0f5f-4de6-a56e-6c05a9cd6025", "03513ba8-ea10-4c41-8f0b-82ab134b995c"]

const App = () => { // Get API handle in an asynchronous manner const { Flowplayer, api: playerApi } = useFlowplayer({ token: process.env.TOKEN })

const [demoPlaybackState, setDemoPlaybackState] = useState("paused")

const [demoSrc, setDemoSrc] = useState(SOURCES[0])

const togglePlay = () => {
    if (!playerApi) return // No API available
    playerApi.togglePlay()
}

const toggleSrc = () => {
    const nextIndex = SOURCES.indexOf(demoSrc) + 1
    setDemoSrc(SOURCES[nextIndex] || SOURCES[0])
}

// Listen to player events for the demo
useEffect(() => {
    if (!playerApi) return // No API yet available
    function stateHandler(ev) {
        if (ev.type === PAUSE)
            setDemoPlaybackState("paused")
        if (ev.type === PLAYING)
            setDemoPlaybackState("playing")
    }

    playerApi.on([PAUSE, PLAYING], stateHandler)

    return () => { // Cleanup on unmount
        if (!playerApi) return
        playerApi.off(PAUSE, stateHandler)
        playerApi.off(PLAYING, stateHandler)
    }
}, [playerApi])

return (
    <div className="container">
        <h1>Flowplayer React Demo</h1>
        <div className="row">
            <div className="column">
                <Flowplayer src={demoSrc} />
            </div>
        </div>
        <div className="row">
            <div className="column">
                Playback state is: { demoPlaybackState }
            </div>
        </div>
        <div className="row">
            <div className="column">
                <h2>API handles</h2>
                <button onClick={togglePlay}>Play / pause</button>
            </div>
            <div className="column">
                <h2>Configuration changes</h2>
                <button onClick={toggleSrc}>Toggle source</button>
            </div>
        </div>
    </div>
)

}

export default App;`

I've also tried dowloading the newest version: 0.2.0 and running locally but I get these errors:

`C:\Users\DELL\Downloads\react-flowplayer-0.2.0\react-flowplayer-0.2.0>yarn demo yarn run v1.22.10 $ webpack -c demo/webpack.config.js [webpack-cli] Compilation finished asset app.js 1.03 MiB [compared for emit] (name: app) runtime modules 668 bytes 3 modules modules by path ./node_modules/ 979 KiB modules by path ./node_modules/scheduler/ 31.8 KiB 4 modules modules by path ./node_modules/react-dom/ 875 KiB ./node_modules/react-dom/index.js 1.33 KiB [built] [code generated] ./node_modules/react-dom/cjs/react-dom.development.js 874 KiB [built] [code generated] modules by path ./node_modules/react/ 70.6 KiB ./node_modules/react/index.js 190 bytes [built] [code generated] ./node_modules/react/cjs/react.development.js 70.5 KiB [built] [code generated] ./node_modules/object-assign/index.js 2.06 KiB [built] [code generated] modules with errors 6.59 KiB [errors] ./demo/demo.tsx 2.97 KiB [built] [code generated] [1 error] ./src/flowplayer.tsx 1.77 KiB [built] [code generated] [1 error] ./src/hooks.tsx 1.85 KiB [built] [code generated] [1 error] ./src/index.ts 137 bytes [built] [code generated]

ERROR in ./demo/demo.tsx 4:0-64 Module not found: Error: Can't resolve '@flowplayer/player/core/events' in 'C:\Users\DELL\Downloads\react-flowplayer-0.2.0\react-flowplayer-0.2.0\demo'

ERROR in ./demo/demo.tsx 5:0-43 Module not found: Error: Can't resolve '@flowplayer/player/flowplayer.css' in 'C:\Users\DELL\Downloads\react-flowplayer-0.2.0\react-flowplayer-0.2.0\demo'

ERROR in ./src/flowplayer.tsx 13:0-44 Module not found: Error: Can't resolve '@flowplayer/player' in 'C:\Users\DELL\Downloads\react-flowplayer-0.2.0\react-flowplayer-0.2.0\src' @ ./src/index.ts 1:0-38 3:15-25 @ ./demo/demo.tsx 3:0-39 10:43-56

ERROR in ./src/hooks.tsx 2:0-44 Module not found: Error: Can't resolve '@flowplayer/player' in 'C:\Users\DELL\Downloads\react-flowplayer-0.2.0\react-flowplayer-0.2.0\src' @ ./src/index.ts 2:0-40 4:0-25 @ ./demo/demo.tsx 3:0-39 10:43-56

ERROR in C:\Users\DELL\Downloads\react-flowplayer-0.2.0\react-flowplayer-0.2.0\src\flowplayer.tsx ./src/flowplayer.tsx [tsl] ERROR in C:\Users\DELL\Downloads\react-flowplayer-0.2.0\react-flowplayer-0.2.0\src\flowplayer.tsx(2,40) TS2307: Cannot find module '@flowplayer/player' or its corresponding type declarations. @ ./src/index.ts 1:0-38 3:15-25 @ ./demo/demo.tsx 3:0-39 10:43-56

ERROR in C:\Users\DELL\Downloads\react-flowplayer-0.2.0\react-flowplayer-0.2.0\src\hooks.tsx ./src/hooks.tsx [tsl] ERROR in C:\Users\DELL\Downloads\react-flowplayer-0.2.0\react-flowplayer-0.2.0\src\hooks.tsx(2,36) TS2307: Cannot find module '@flowplayer/player' or its corresponding type declarations. @ ./src/index.ts 2:0-40 4:0-25 @ ./demo/demo.tsx 3:0-39 10:43-56

ERROR in C:\Users\DELL\Downloads\react-flowplayer-0.2.0\react-flowplayer-0.2.0\demo\demo.tsx ./demo/demo.tsx [tsl] ERROR in C:\Users\DELL\Downloads\react-flowplayer-0.2.0\react-flowplayer-0.2.0\demo\demo.tsx(4,32) TS2307: Cannot find module '@flowplayer/player/core/events' or its corresponding type declarations.

webpack 5.4.0 compiled with 7 errors in 2971 ms error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.`

Much help is appreciated. .

lgsf commented 3 years ago

I managed to download demo version 0.2.0 and run it. When is it going to become an npm module? I tried to include both the files for the component and custom hook directly and managed to run but get this error: ReferenceError: Element is not defined at C:\Users\DELL\Desktop\bfp-members\node_modules\@flowplayer\player\default.js:15:25429 at C:\Users\DELL\Desktop\bfp-members\node_modules\@flowplayer\player\default.js:1:84 at Object.<anonymous> (C:\Users\DELL\Desktop\bfp-members\node_modules\@flowplayer\player\default.js:1:163) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at Object.@flowplayer/player (C:\Users\DELL\Desktop\bfp-members\.next\server\pages\index.js:487:18) at __webpack_require__ (C:\Users\DELL\Desktop\bfp-members\.next\server\pages\index.js:23:31) at Module../components/customHooks/useFlowplayer.tsx (C:\Users\DELL\Desktop\bfp-members\.next\server\pages\index.js:292:76) at __webpack_require__ (C:\Users\DELL\Desktop\bfp-members\.next\server\pages\index.js:23:31) at Module../components/FlowPlayerWrapper.tsx (C:\Users\DELL\Desktop\bfp-members\.next\server\pages\index.js:111:95) at __webpack_require__ (C:\Users\DELL\Desktop\bfp-members\.next\server\pages\index.js:23:31) at Module../pages/index.tsx (C:\Users\DELL\Desktop\bfp-members\.next\server\pages\index.js:466:87) Any chance on how to solve it?

nnarhinen commented 3 years ago

I just published 0.2 to NPM. Thanks for the report. If it won't work with that either feel free to re-open this.

lgsf commented 3 years ago

I've updated the package but still couldn't get it to load on my NextJS app. This is the error that keeps happening:

`C:\Users\DELL\Desktop\bfp-members\node_modules\@flowplayer\react-flowplayer\lib\index.js:1 import Flowplayer from "./flowplayer"; ^^^^^^

SyntaxError: Cannot use import statement outside a module at wrapSafe (internal/modules/cjs/loader.js:979:16) at Module._compile (internal/modules/cjs/loader.js:1027:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at Object.@flowplayer/react-flowplayer/ (C:\Users\DELL\Desktop\bfp-members.next\server\pages\index.js:436:18) at webpack_require (C:\Users\DELL\Desktop\bfp-members.next\server\pages\index.js:23:31) at Module../components/FlowPlayerWrapper.tsx (C:\Users\DELL\Desktop\bfp-members.next\server\pages\index.js:111:87) at webpack_require (C:\Users\DELL\Desktop\bfp-members.next\server\pages\index.js:23:31) at Module../pages/index.tsx (C:\Users\DELL\Desktop\bfp-members.next\server\pages\index.js:404:87) at __webpack_require__ (C:\Users\DELL\Desktop\bfp-members.next\server\pages\index.js:23:31) at C:\Users\DELL\Desktop\bfp-members.next\server\pages\index.js:91:18 at Object. (C:\Users\DELL\Desktop\bfp-members.next\server\pages\index.js:94:10) at Module._compile (internal/modules/cjs/loader.js:1063:30)`

Is there support in which I could get in touch? Thanks in advance!

flowplayer / react-flowplayer

Problems when trying to use react-flowplayer #5