search

ederssouza / reactjs-vimeo-player

@vimeo/player wrapper for React.
MIT License
4 stars 0 forks source link

Seems to not work in Next.js #6

Closed grempe closed 1 year ago

grempe commented 2 years ago

See stackblitz running example:

https://stackblitz.com/edit/nextjs-vngw87?file=pages/index.js

Shows in dev preview page:

Server Error
ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/home/projects/nextjs-vngw87/node_modules/reactjs-vimeo-player/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
async ModuleJob.run
https://nextjs-vngw87.w.staticblitz.com/blitz.3c06ff333fff62d153837b0d0df85b8ed07b008f.js (6:987580)
async ESMLoader.import
https://nextjs-vngw87.w.staticblitz.com/blitz.3c06ff333fff62d153837b0d0df85b8ed07b008f.js (6:1209286)

and in dev console:

error - Error: exports is not defined
    at file:///home/projects/nextjs-vngw87/node_modules/reactjs-vimeo-player/dist/index.cjs.js
    at async ModuleJob.run (https://nextjs-vngw87.w.staticblitz.com/blitz.3c06ff333fff62d153837b0d0df85b8ed07b008f.js:6:987580)
    at async Promise.all (index 0)
    at async ESMLoader.import (https://nextjs-vngw87.w.staticblitz.com/blitz.3c06ff333fff62d153837b0d0df85b8ed07b008f.js:6:1209286) {
  page: '/'
}
ederssouza commented 2 years ago

Hello @grempe!

You need to bump the version of react and react-dom to version >= 18. I made a test and the video player render occurred with success.

Screen Shot 2022-10-19 at 08 10 50

I will work on adjusting to try retrocompatibility to both versions of React (17 and 18).

r-martins commented 1 year ago

Altough the player renders on the frontend, I got the same error with react-dom 18.2.0.

image

Server error

Attempted import error: 'VimeoPlayer' is not exported from 'reactjs-vimeo-player' (imported as 'VimeoPlayer').

Import trace for requested module: ./src/app/aula/Player.js Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at Player.js:7. at Component at Lazy at div at main at InnerLayoutRouter (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:226:11) at RedirectErrorBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9) at RedirectBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11) at NotFoundBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/not-found-boundary.js:59:11) at LoadingBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:330:11) at ErrorBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/error-boundary.js:105:11) at InnerScrollAndFocusHandler (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:139:9) at ScrollAndFocusHandler (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:213:11) at RenderFromTemplateContext (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44) at Lazy at OuterLayoutRouter (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:339:11) at Lazy at InnerLayoutRouter (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:226:11) at RedirectErrorBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9) at RedirectBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11) at NotFoundBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/not-found-boundary.js:59:11) at LoadingBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:330:11) at ErrorBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/error-boundary.js:105:11) at InnerScrollAndFocusHandler (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:139:9) at ScrollAndFocusHandler (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:213:11) at RenderFromTemplateContext (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44) at Lazy at OuterLayoutRouter (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:339:11) at Lazy at body at html at RedirectErrorBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9) at RedirectBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11) at NotFoundErrorBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/not-found-boundary.js:51:9) at NotFoundBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/not-found-boundary.js:59:11) at ReactDevOverlay (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9) at HotReload (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:277:11) at Router (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/app-router.js:86:11) at ErrorBoundaryHandler (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/error-boundary.js:80:9) at ErrorBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/error-boundary.js:105:11) at AppRouter (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/app-router.js:361:13) at Lazy at Lazy at ServerComponentWrapper (/Users/martins/www/cursonextjs.com/node_modules/next/dist/server/app-render/create-server-components-renderer.js:78:31) at ServerComponentWrapper (/Users/martins/www/cursonextjs.com/node_modules/next/dist/server/app-render/create-server-components-renderer.js:78:31) at InsertedHTML (/Users/martins/www/cursonextjs.com/node_modules/next/dist/server/app-render/app-render.js:836:33)

  • error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
  • warn ./src/app/aula/Player.js Attempted import error: 'VimeoPlayer' is not exported from 'reactjs-vimeo-player' (imported as 'VimeoPlayer').

Code

"use client";
import {VimeoPlayer} from "reactjs-vimeo-player";
import styles from 'reactjs-vimeo-player/dist/style.css';

export default function Component() {
    return (
        <VimeoPlayer id={822998068} autoplay={true} fullWidth={true}/>
    )
}
ederssouza commented 1 year ago

Altough the player renders on the frontend, I got the same error with react-dom 18.2.0.

image

Server error

Attempted import error: 'VimeoPlayer' is not exported from 'reactjs-vimeo-player' (imported as 'VimeoPlayer'). Import trace for requested module: ./src/app/aula/Player.js Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check your code at Player.js:7. at Component at Lazy at div at main at InnerLayoutRouter (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:226:11) at RedirectErrorBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9) at RedirectBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11) at NotFoundBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/not-found-boundary.js:59:11) at LoadingBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:330:11) at ErrorBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/error-boundary.js:105:11) at InnerScrollAndFocusHandler (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:139:9) at ScrollAndFocusHandler (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:213:11) at RenderFromTemplateContext (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44) at Lazy at OuterLayoutRouter (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:339:11) at Lazy at InnerLayoutRouter (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:226:11) at RedirectErrorBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9) at RedirectBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11) at NotFoundBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/not-found-boundary.js:59:11) at LoadingBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:330:11) at ErrorBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/error-boundary.js:105:11) at InnerScrollAndFocusHandler (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:139:9) at ScrollAndFocusHandler (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:213:11) at RenderFromTemplateContext (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44) at Lazy at OuterLayoutRouter (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:339:11) at Lazy at body at html at RedirectErrorBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9) at RedirectBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11) at NotFoundErrorBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/not-found-boundary.js:51:9) at NotFoundBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/not-found-boundary.js:59:11) at ReactDevOverlay (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9) at HotReload (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:277:11) at Router (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/app-router.js:86:11) at ErrorBoundaryHandler (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/error-boundary.js:80:9) at ErrorBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/error-boundary.js:105:11) at AppRouter (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/app-router.js:361:13) at Lazy at Lazy at ServerComponentWrapper (/Users/martins/www/cursonextjs.com/node_modules/next/dist/server/app-render/create-server-components-renderer.js:78:31) at ServerComponentWrapper (/Users/martins/www/cursonextjs.com/node_modules/next/dist/server/app-render/create-server-components-renderer.js:78:31) at InsertedHTML (/Users/martins/www/cursonextjs.com/node_modules/next/dist/server/app-render/app-render.js:836:33)

  • error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
  • warn ./src/app/aula/Player.js Attempted import error: 'VimeoPlayer' is not exported from 'reactjs-vimeo-player' (imported as 'VimeoPlayer').

Code

"use client";
import {VimeoPlayer} from "reactjs-vimeo-player";
import styles from 'reactjs-vimeo-player/dist/style.css';

export default function Component() {
    return (
        <VimeoPlayer id={822998068} autoplay={true} fullWidth={true}/>
    )
}

@r-martins can you upload your code in code sandbox (https://codesandbox.io) and shared it with me? I need only basic structure.

ederssouza commented 1 year ago

The problem was closed because there was no interaction.