search

remotion-dev / remotion

🎥 Make videos programmatically with React
https://remotion.dev
Other
20.78k stars 1.05k forks source link

Using remotion with nextjs 13 app directory is crashing because of multiple versions error #1546

Closed fnebenfuehr closed 1 year ago

fnebenfuehr commented 1 year ago

Bug Report 🐛

Nextjs keeps crashing because of multiple versions error thrown by remotion.

TypeError: 🚨 Multiple versions of Remotion detected: 3.3.7 and an older version. This will cause things to break in an unexpected way.
Check that all your Remotion packages are on the same version. If your dependencies depend on Remotion, make them peer dependencies. You can also run `npx remotion versions` from your terminal to see which versions are mismatching.
    at checkMultipleRemotionVersions (webpack-internal:///(sc_client)/./node_modules/remotion/dist/multiple-versions-warning.js:13:15)
    at eval (webpack-internal:///(sc_client)/./node_modules/remotion/dist/index.js:20:63)
    at Object.(sc_client)/./node_modules/remotion/dist/index.js (/Users/florian/code/nextjs13-meets-remotion/.next/server/app/page.js:1843:1)
    at __webpack_require__ (/Users/florian/code/nextjs13-meets-remotion/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_client)/./node_modules/@remotion/player/dist/use-playback.js:5:20)
    at Object.(sc_client)/./node_modules/@remotion/player/dist/use-playback.js (/Users/florian/code/nextjs13-meets-remotion/.next/server/app/page.js:363:1)
    at __webpack_require__ (/Users/florian/code/nextjs13-meets-remotion/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_client)/./node_modules/@remotion/player/dist/index.js:8:24)
    at Object.(sc_client)/./node_modules/@remotion/player/dist/index.js (/Users/florian/code/nextjs13-meets-remotion/.next/server/app/page.js:330:1)
    at __webpack_require__ (/Users/florian/code/nextjs13-meets-remotion/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_client)/./components/Player.tsx:7:74)
    at Module.(sc_client)/./components/Player.tsx (/Users/florian/code/nextjs13-meets-remotion/.next/server/app/page.js:831:1)
    at __webpack_require__ (/Users/florian/code/nextjs13-meets-remotion/.next/server/webpack-runtime.js:33:43)
    at requireModule (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:142:32)
    at initializeModuleChunk (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:427:19)
    at readChunk (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:252:7)
    at renderLazyComponent (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7968:19)
    at renderElement (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8080:11)
    at renderNodeDestructiveImpl (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8157:11)
    at renderNodeDestructive (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8129:14)
    at renderNode (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8313:12)
    at renderChildrenArray (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8265:7)
    at renderNodeDestructiveImpl (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8194:7)
    at renderNodeDestructive (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8129:14)
    at renderNode (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8313:12)
    at renderHostElement (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7665:3)
    at renderElement (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7996:5)
    at renderNodeDestructiveImpl (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8157:11)
    at renderNodeDestructive (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8129:14)
    at renderNode (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8313:12)
    at renderChildrenArray (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8265:7)
    at renderNodeDestructiveImpl (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8194:7)
    at renderNodeDestructive (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8129:14)
    at renderContextProvider (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7954:3)
    at renderElement (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8068:11)
    at renderNodeDestructiveImpl (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8157:11)
    at renderNodeDestructive (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8129:14)
    at renderNode (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8313:12)
    at renderHostElement (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7665:3)
    at renderElement (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7996:5)
    at renderNodeDestructiveImpl (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8157:11)
    at renderNodeDestructive (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8129:14)
    at renderIndeterminateComponent (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7809:7)
    at renderElement (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7990:7)
    at renderNodeDestructiveImpl (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8157:11)
    at renderNodeDestructive (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8129:14)
    at finishClassComponent (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7711:3)
    at renderClassComponent (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7719:3)
    at renderElement (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7987:7)
    at renderNodeDestructiveImpl (/Users/florian/code/nextjs13-meets-remotion/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8157:11)

Reproduction steps

I created a simple nextjs 13 project using yarn create next-app --experimental-app and made changes according to https://www.remotion.dev/docs/player/integration.

  1. Run project 
    git clone git@github.com:fnebenfuehr/nextjs13-meets-remotion.git
yarn
yarn dev
  2. Update title in page.tsx (hot reload)
  3. Versioning error occurs.

Checking version with npx remotion versions:

Node.JS = v16.16.0, OS = darwin

On version: 3.3.7
- @remotion/bundler
- @remotion/cli
- @remotion/renderer
- @remotion/media-utils
- @remotion/player
- remotion

✅ Great! All packages have the same version.

Git repo: https://github.com/fnebenfuehr/nextjs13-meets-remotion

JonnyBurger commented 1 year ago

Great catch and bug report! Thank you so much! Fixing for the next version. For now you have to put up with the error message, it should not cause any actual breakage.