Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot Find Module /react-dom/server #717

Closed
Eltik opened this issue Jan 18, 2023 · 9 comments
Closed

Cannot Find Module /react-dom/server #717

Eltik opened this issue Jan 18, 2023 · 9 comments
Labels
player react

Comments

@Eltik
Copy link

Eltik commented Jan 18, 2023 •
edited
Loading

Describe the bug
Importing the new version of Vidstack results in an error being thrown.

To Reproduce
Steps to reproduce the behavior:

  1. Install react@17.0.0 and react-dom@17.0.0 or later with NextJS (and likely React).
  2. Run npm i vidstack @vidstack/react.
  3. Import vidstack/styles/base.css and @vidstack/react:
import 'vidstack/styles/base.css';
import { Media, Video } from '@vidstack/react';
  1. Compile

Expected behavior

Screenshots
image
Complete error in console:

error - Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/eltik/Documents/Coding/a/node_modules/react-dom/server' imported from /Users/eltik/Documents/Coding/a/node_modules/maverick.js/dist/server/react.js
Did you mean to import react-dom/server.js?
    at new NodeError (node:internal/errors:393:5)
    at finalizeResolution (node:internal/modules/esm/resolve:260:11)
    at moduleResolve (node:internal/modules/esm/resolve:879:10)
    at defaultResolve (node:internal/modules/esm/resolve:1087:11)
    at nextResolve (node:internal/modules/esm/loader:161:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:831:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:413:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36) {
  code: 'ERR_MODULE_NOT_FOUND',
  page: '/watch/[id]/[provider]/[watchId]'
}

Desktop (please complete the following information):

  • OS: MacOS Ventura 13.0
  • Browser: Google Chrome
  • Version: Vidstack v0.0.2 ran with create-t3-app

Additional context
Code used:

import 'vidstack/styles/base.css';
import { Media, Video } from '@vidstack/react';

export default function Watch(props: any) {

    return (
    <>
        <Head>
       </Head>
       <main className={styles.main}>
                        <Media className={styles.videoplayer}>
                <AspectRatio ratio="16/9">
                    <HLSVideo poster={props.info.anilist.bannerImage ? props.info.anilist.bannerImage : props.info.anilist.coverImage.extraLarge}>
                        <video className={styles.main_video} preload="none" src={props.sources?.sources[props.sources.sources.length - 1].url ? props.sources?.sources[props.sources.sources.length - 1].url : "https://media-files.vidstack.io/720p.mp4"} controls></video>
                        {props.sources?.subtitles?.map((subtitle: any) => {
                            return <track kind="subtitles" src={subtitle.url} label={subtitle.language} default={subtitle.default} />
                        })}
                    </HLSVideo>
                </AspectRatio>
            </Media>
        </main>
    </>
   );
}

And the full file: https://sourceb.in/cjrSbZrR5V

package.json:

{
  "dependencies": {
    "@vidstack/react": "^0.0.2",
    "animejs": "^3.2.1",
    "crypto-js": "^4.1.1",
    "node-html-parser": "^6.1.4",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-icons": "^4.7.1",
    "vidstack": "^0.0.2"
  }
}

I've tried running it with later versions of react (latest, v18.0.2, etc.) and encounter the same issue. I've also tried using vidstack version 0.0.1.
@Eltik
Copy link
Author

Eltik commented Jan 18, 2023

I just tried modifying the react.js file in /node_modules/maverick.js/dist/server/react.js. This import works:

import { renderToStaticMarkup } from 'react-dom/server.js';

However I now get the error window is not defined.
image
File is in /node_modules/vidstack/dist/server/chunks/chunk-KI5KSLHN.js. Line:

/(iPhone|iPod)/gi.test((_a = window.navigator) == null ? void 0 : _a.platform);

@TDanks2000
Copy link

I just tried modifying the react.js file in /node_modules/maverick.js/dist/server/react.js. This import works:

import { renderToStaticMarkup } from 'react-dom/server.js';

However I now get the error window is not defined. image File is in /node_modules/vidstack/dist/server/chunks/chunk-KI5KSLHN.js. Line:

/(iPhone|iPod)/gi.test((_a = window.navigator) == null ? void 0 : _a.platform);

same problem using nextjs

@mihar-22
Copy link
Member

Thanks for reporting! I'll be looking into this today.

@mihar-22
Copy link
Member

mihar-22 commented Jan 20, 2023 •
edited
Loading

I found a few issues including incorrect Node exports (resulting in browser bundle being imported server-side), attempting to access window, and also React 18 is working towards preserving state whilst re-mounting so I had to make sure we don't destroy at the wrong time.

It's all fixed (successfully dev/build in Next). I'll be releasing it tomorrow including few other changes.

@TDanks2000
Copy link

I found a few issues including incorrect Node exports (resulting in browser bundle being imported server-side), attempting to access window, and also React 18 is working towards preserving state whilst re-mounting so I had to make sure we don't destroy at the wrong time.

It's all fixed (successfully dev/build in Next). I'll be releasing it tomorrow including few other changes.

hey was just wondering, when will there be an update to vidstack. no rush was just wondering?

@mihar-22
Copy link
Member

mihar-22 commented Jan 22, 2023 •
edited
Loading

Massive React updates dropping tomorrow - including out of the box Next.js support (SSR + React 18)

@TDanks2000
Copy link

Massive React updates dropping tomorrow - including out of the box Next.js support (SSR + React 18)

When's the new update dropping for vidstack?

@mihar-22
Copy link
Member

mihar-22 commented Jan 24, 2023 •
edited
Loading

Happy to report all issues have been resolved in our latest release!

Release notes: #722

@TomFCarrion
Copy link

@Eltik has this issue been resolved for you? I'm experiencing the same issue with the last version

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
player react
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@mihar-22 @TomFCarrion @TDanks2000 @Eltik