Error running example

[seriiix]

I created both index.js and MyVideo.js with the examples provided. however, when I run index.js I get this error:

ERROR in ./node_modules/@reactive-video/builder/previewEntry.js 38:4
Module parse failed: Unexpected token (38:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|   return (
>     <>
|       <input type="range" min={0} max={durationFrames - 1} onChange={(e) => handleCurrentFrameChange(parseInt(e.target.value, 10))} value={currentFrame} style={{ width: '100%', margin: '10px 0' }} />
|

webpack 5.72.0 compiled with 1 error in 1580 ms

[mifi]

Hi. That's odd. I just tried the same thing and it works for me. Did you do the other required steps like npm i --save @reactive-video/builder first?

[seriiix]

I'm using yarn as my package manager and yes I did install it with yarn add @reactive-video/builder on Windows 10.

[mifi]

which exact command are you running? I did like this and it works:

mkdir awesome-reactive-video
cd awesome-reactive-video
yarn init
yarn add @reactive-video/builder

create MyVideo.js

import React from 'react';
import { Image, Segment, Video, useVideo } from 'reactive-video';

export default () => {
  const { currentFrame, currentTime, durationFrames, durationTime } = useVideo();

  return (
    <>
      {/* This segment lasts for 30 frames. Print out the current frame number */}
      <Segment duration={30}>
        <div
          style={{ width: '100%', height: '100%', backgroundColor: `hsl(${(currentFrame * 10) % 360}deg 78% 37%)`, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', fontSize: 100 }}
        >
          Current frame {currentFrame}
        </div>
      </Segment>

      {/* This segment starts from 60 frames. Shows an image with a Ken Burns zoom effect */}
      <Segment
        start={30}
        duration={30}
        render={(segment) => (
          <Image src="https://static.mifi.no/losslesscut/47320816_571610306620180_5860442193520120371_n.jpg" style={{ width: '100%', transform: `scale(${1 + (segment.currentFrame / segment.durationFrames) * 0.1})` }} />
        )}
      />

      {/* This segment starts from 60 frames. Starts 100 frames into the source video (seek to) */}
      <Segment start={60}>
        <Segment start={-100}>
          <Video src="https://static.mifi.no/Zv5RvLhCz4M-small.mp4" style={{ width: '100%' }} />
        </Segment>
      </Segment>
    </>
  );
};

create index.js

const Editor = require('@reactive-video/builder');

(async () => {
  const editor = Editor({
    ffmpegPath: 'ffmpeg',
    ffprobePath: 'ffprobe',
    devMode: true,
  });

  const width = 1280;
  const height = 720;
  const fps = 25;
  const durationFrames = 90;
  const reactVideo = 'MyVideo.js';
  const userData = { some: 'value' };

  // Build the video
  await editor.edit({
    reactVideo,
    width,
    height,
    durationFrames,
    userData,

    output: 'my-video.mov',
    concurrency: 3,
    // headless: false,
    // extraPuppeteerArgs: ['--no-sandbox', '--disable-setuid-sandbox']

    // Optionally set rawOutput to false if you want to encode output to h264 (if not it will create MJPEG)
    // rawOutput: false,
  });

  // Or start a live preview:
  await editor.preview({
    reactVideo,
    width,
    height,
    fps,
    durationFrames,
    userData,
  });
})().catch(console.error);

node index.js

what about the cli, does that also not work?

[seriiix]

I did the exact same commands and it is still throwing me errors (with both yarn and npm).
Here is the complete log of my terminal:

PS D:\node> mkdir awesome-reactive-video
PS D:\node> cd .\awesome-reactive-video\
PS D:\node\awesome-reactive-video> yarn init
yarn init v1.22.18
question name (awesome-reactive-video):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:
success Saved package.json
Done in 4.10s.
PS D:\node\awesome-reactive-video> yarn add @reactive-video/builder
yarn add v1.22.18
info No lockfile found.
[1/4] Resolving packages...
warning @reactive-video/builder > puppeteer@11.0.0: Version no longer supported. Upgrade to @latest
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 332 new dependencies.
info Direct dependencies
└─ @reactive-video/builder@1.14.1
info All dependencies
├─ @ampproject/remapping@2.2.0
├─ @babel/code-frame@7.16.7
├─ @babel/compat-data@7.17.10
├─ @babel/core@7.17.10
├─ @babel/helper-builder-binary-assignment-operator-visitor@7.16.7
├─ @babel/helper-compilation-targets@7.17.10
├─ @babel/helper-create-class-features-plugin@7.17.9
├─ @babel/helper-explode-assignable-expression@7.16.7
├─ @babel/helper-member-expression-to-functions@7.17.7
├─ @babel/helper-module-imports@7.16.7
├─ @babel/helper-plugin-utils@7.16.7
├─ @babel/helper-wrap-function@7.16.8
├─ @babel/helpers@7.17.9
├─ @babel/highlight@7.17.9
├─ @babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.16.7
├─ @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.16.7
├─ @babel/plugin-proposal-async-generator-functions@7.16.8
├─ @babel/plugin-proposal-class-properties@7.16.7
├─ @babel/plugin-proposal-class-static-block@7.17.6
├─ @babel/plugin-proposal-dynamic-import@7.16.7
├─ @babel/plugin-proposal-export-namespace-from@7.16.7
├─ @babel/plugin-proposal-json-strings@7.16.7
├─ @babel/plugin-proposal-logical-assignment-operators@7.16.7
├─ @babel/plugin-proposal-nullish-coalescing-operator@7.16.7
├─ @babel/plugin-proposal-numeric-separator@7.16.7
├─ @babel/plugin-proposal-object-rest-spread@7.17.3
├─ @babel/plugin-proposal-optional-catch-binding@7.16.7
├─ @babel/plugin-proposal-private-methods@7.16.11
├─ @babel/plugin-proposal-private-property-in-object@7.16.7
├─ @babel/plugin-proposal-unicode-property-regex@7.16.7
├─ @babel/plugin-syntax-class-properties@7.12.13
├─ @babel/plugin-syntax-jsx@7.16.7
├─ @babel/plugin-syntax-top-level-await@7.14.5
├─ @babel/plugin-transform-arrow-functions@7.16.7
├─ @babel/plugin-transform-async-to-generator@7.16.8
├─ @babel/plugin-transform-block-scoped-functions@7.16.7
├─ @babel/plugin-transform-block-scoping@7.16.7
├─ @babel/plugin-transform-classes@7.16.7
├─ @babel/plugin-transform-computed-properties@7.16.7
├─ @babel/plugin-transform-destructuring@7.17.7
├─ @babel/plugin-transform-dotall-regex@7.16.7
├─ @babel/plugin-transform-duplicate-keys@7.16.7
├─ @babel/plugin-transform-exponentiation-operator@7.16.7
├─ @babel/plugin-transform-for-of@7.16.7
├─ @babel/plugin-transform-function-name@7.16.7
├─ @babel/plugin-transform-literals@7.16.7
├─ @babel/plugin-transform-member-expression-literals@7.16.7
├─ @babel/plugin-transform-modules-amd@7.16.7
├─ @babel/plugin-transform-modules-commonjs@7.17.9
├─ @babel/plugin-transform-modules-systemjs@7.17.8
├─ @babel/plugin-transform-modules-umd@7.16.7
├─ @babel/plugin-transform-named-capturing-groups-regex@7.17.10
├─ @babel/plugin-transform-new-target@7.16.7
├─ @babel/plugin-transform-object-super@7.16.7
├─ @babel/plugin-transform-property-literals@7.16.7
├─ @babel/plugin-transform-react-display-name@7.16.7
├─ @babel/plugin-transform-react-jsx-development@7.16.7
├─ @babel/plugin-transform-react-pure-annotations@7.16.7
├─ @babel/plugin-transform-regenerator@7.17.9
├─ @babel/plugin-transform-reserved-words@7.16.7
├─ @babel/plugin-transform-shorthand-properties@7.16.7
├─ @babel/plugin-transform-spread@7.16.7
├─ @babel/plugin-transform-sticky-regex@7.16.7
├─ @babel/plugin-transform-template-literals@7.16.7
├─ @babel/plugin-transform-typeof-symbol@7.16.7
├─ @babel/plugin-transform-unicode-escapes@7.16.7
├─ @babel/plugin-transform-unicode-regex@7.16.7
├─ @babel/preset-env@7.17.10
├─ @babel/preset-modules@0.1.5
├─ @babel/preset-react@7.16.7
├─ @babel/runtime@7.17.9
├─ @babel/traverse@7.17.10
├─ @jridgewell/resolve-uri@3.0.7
├─ @jridgewell/set-array@1.1.1
├─ @jridgewell/trace-mapping@0.3.10
├─ @reactive-video/builder@1.14.1
├─ @types/eslint-scope@3.7.3
├─ @types/eslint@8.4.2
├─ @types/json-schema@7.0.11
├─ @types/minimist@1.2.2
├─ @types/node@17.0.31
├─ @types/normalize-package-data@2.4.1
├─ @types/yauzl@2.10.0
├─ @webassemblyjs/floating-point-hex-parser@1.11.1
├─ @webassemblyjs/helper-numbers@1.11.1
├─ @webassemblyjs/helper-wasm-section@1.11.1
├─ @webassemblyjs/wasm-edit@1.11.1
├─ @webassemblyjs/wasm-opt@1.11.1
├─ @webassemblyjs/wast-printer@1.11.1
├─ @xtuc/ieee754@1.2.0
├─ accepts@1.3.8
├─ acorn-import-assertions@1.8.0
├─ acorn@8.7.1
├─ agent-base@6.0.2
├─ aggregate-error@3.1.0
├─ ajv@6.12.6
├─ ansi-styles@3.2.1
├─ array-flatten@1.1.1
├─ arrify@1.0.1
├─ babel-loader@8.2.5
├─ babel-plugin-polyfill-corejs2@0.3.1
├─ babel-plugin-polyfill-corejs3@0.5.2
├─ babel-plugin-polyfill-regenerator@0.3.1
├─ balanced-match@1.0.2
├─ base64-js@1.5.1
├─ basic-auth@2.0.1
├─ big.js@5.2.2
├─ binary-split@1.0.5
├─ bl@1.2.3
├─ body-parser@1.20.0
├─ brace-expansion@1.1.11
├─ browserslist@4.20.3
├─ buffer-crc32@0.2.13
├─ buffer-equal@1.0.0
├─ buffer-from@1.1.2
├─ buffer@5.7.1
├─ camelcase-keys@6.2.2
├─ camelcase@5.3.1
├─ caniuse-lite@1.0.30001339
├─ chalk@2.4.2
├─ chownr@1.1.4
├─ chrome-trace-event@1.0.3
├─ clean-stack@2.2.0
├─ color-convert@1.9.3
├─ color-name@1.1.3
├─ commander@2.20.3
├─ commondir@1.0.1
├─ concat-map@0.0.1
├─ content-disposition@0.5.4
├─ convert-source-map@1.8.0
├─ cookie-parser@1.4.6
├─ cookie@0.4.1
├─ core-js-compat@3.22.5
├─ core-util-is@1.0.3
├─ cross-spawn@7.0.3
├─ css-loader@5.2.7
├─ cssesc@3.0.0
├─ decamelize-keys@1.1.0
├─ decamelize@1.2.0
├─ define-properties@1.1.4
├─ devtools-protocol@0.0.901419
├─ ee-first@1.1.1
├─ electron-to-chromium@1.4.137
├─ emojis-list@3.0.0
├─ end-of-stream@1.4.4
├─ enhanced-resolve@5.9.3
├─ error-ex@1.3.2
├─ es-module-lexer@0.9.3
├─ escalade@3.1.1
├─ escape-string-regexp@1.0.5
├─ eslint-scope@5.1.1
├─ esrecurse@4.3.0
├─ estraverse@4.3.0
├─ esutils@2.0.3
├─ events@3.3.0
├─ execa@5.1.1
├─ express-async-handler@1.2.0
├─ express-basic-auth@1.2.1
├─ express@4.18.1
├─ extract-zip@2.0.1
├─ fast-deep-equal@3.1.3
├─ fast-json-stable-stringify@2.1.0
├─ fd-slicer@1.1.0
├─ file-uri-to-path@2.0.0
├─ file-url@3.0.0
├─ finalhandler@1.2.0
├─ find-cache-dir@3.3.2
├─ find-up@4.1.0
├─ forwarded@0.2.0
├─ fs-constants@1.0.0
├─ fs-extra@10.1.0
├─ fs.realpath@1.0.0
├─ gensync@1.0.0-beta.2
├─ get-intrinsic@1.1.1
├─ get-port@5.1.1
├─ get-stream@6.0.1
├─ glob@7.2.0
├─ graceful-fs@4.2.10
├─ hard-rejection@2.1.0
├─ has-flag@4.0.0
├─ has-property-descriptors@1.0.0
├─ hosted-git-info@4.1.0
├─ https-proxy-agent@5.0.0
├─ human-signals@2.1.0
├─ ieee754@1.2.1
├─ inflight@1.0.6
├─ ipaddr.js@1.9.1
├─ is-arrayish@0.2.1
├─ is-core-module@2.9.0
├─ is-plain-obj@1.1.0
├─ is-stream@2.0.1
├─ isarray@1.0.0
├─ isexe@2.0.0
├─ jest-worker@27.5.1
├─ js-tokens@4.0.0
├─ jsesc@2.5.2
├─ json-parse-even-better-errors@2.3.1
├─ json-schema-traverse@0.4.1
├─ json-stable-stringify@1.0.1
├─ json5@2.2.1
├─ jsonfile@6.1.0
├─ jsonify@0.0.0
├─ kind-of@6.0.3
├─ lines-and-columns@1.2.4
├─ loader-runner@4.3.0
├─ locate-path@5.0.0
├─ lodash.debounce@4.0.8
├─ lodash.sortby@4.7.0
├─ lodash@4.17.21
├─ make-dir@3.1.0
├─ map-obj@1.0.1
├─ media-typer@0.3.0
├─ meow@9.0.0
├─ merge-descriptors@1.0.1
├─ methods@1.1.2
├─ mime-db@1.52.0
├─ mime-types@2.1.35
├─ mime@1.6.0
├─ mimic-fn@2.1.0
├─ min-indent@1.0.1
├─ minimatch@3.1.2
├─ minimist-options@4.1.0
├─ mkdirp-classic@0.5.3
├─ nanoid@3.3.4
├─ negotiator@0.6.3
├─ neo-async@2.6.2
├─ node-fetch@2.6.5
├─ node-releases@2.0.4
├─ normalize-package-data@3.0.3
├─ npm-run-path@4.0.1
├─ object-inspect@1.12.0
├─ object.assign@4.1.2
├─ onetime@5.1.2
├─ p-limit@2.3.0
├─ p-locate@4.1.0
├─ p-map@4.0.0
├─ p-timeout@4.1.0
├─ p-try@2.2.0
├─ parse-json@5.2.0
├─ path-exists@4.0.0
├─ path-is-absolute@1.0.1
├─ path-key@3.1.1
├─ path-parse@1.0.7
├─ path-to-regexp@0.1.7
├─ pend@1.2.0
├─ pkg-dir@4.2.0
├─ png-split-stream@1.0.1
├─ postcss-modules-extract-imports@3.0.0
├─ postcss-modules-local-by-default@4.0.0
├─ postcss-modules-scope@3.0.0
├─ postcss-modules-values@4.0.0
├─ postcss-selector-parser@6.0.10
├─ postcss@8.4.13
├─ process-nextick-args@2.0.1
├─ progress@2.0.3
├─ proxy-addr@2.0.7
├─ proxy-from-env@1.1.0
├─ puppeteer@11.0.0
├─ quick-lru@4.0.1
├─ randombytes@2.1.0
├─ raw-body@2.5.1
├─ react-dom@17.0.2
├─ react@17.0.2
├─ reactive-video@2.6.1
├─ read-pkg-up@7.0.1
├─ read-pkg@5.2.0
├─ readable-stream@2.3.7
├─ redent@3.0.0
├─ regenerate-unicode-properties@10.0.1
├─ regenerator-runtime@0.13.9
├─ regenerator-transform@0.15.0
├─ regexpu-core@5.0.1
├─ regjsgen@0.6.0
├─ regjsparser@0.8.4
├─ resolve@1.22.0
├─ rimraf@3.0.2
├─ safe-buffer@5.2.1
├─ safer-buffer@2.1.2
├─ scheduler@0.20.2
├─ schema-utils@3.1.1
├─ semver@6.3.0
├─ serialize-javascript@6.0.0
├─ serve-static@1.15.0
├─ shebang-command@2.0.0
├─ shebang-regex@3.0.0
├─ side-channel@1.0.4
├─ signal-exit@3.0.7
├─ source-map-js@1.0.2
├─ source-map-support@0.5.21
├─ source-map@0.6.1
├─ spdx-correct@3.1.1
├─ spdx-exceptions@2.3.0
├─ string_decoder@1.1.1
├─ strip-final-newline@2.0.0
├─ strip-indent@3.0.0
├─ style-loader@2.0.0
├─ supports-color@8.1.1
├─ supports-preserve-symlinks-flag@1.0.0
├─ tapable@2.2.1
├─ tar-fs@2.1.1
├─ tar-stream@2.2.0
├─ terser-webpack-plugin@5.3.1
├─ terser@5.13.1
├─ through@2.3.8
├─ toidentifier@1.0.1
├─ tr46@0.0.3
├─ trim-newlines@3.0.1
├─ type-fest@0.18.1
├─ unbzip2-stream@1.4.3
├─ unicode-canonical-property-names-ecmascript@2.0.0
├─ unicode-match-property-ecmascript@2.0.0
├─ unicode-match-property-value-ecmascript@2.0.0
├─ unicode-property-aliases-ecmascript@2.0.0
├─ unpipe@1.0.0
├─ uri-js@4.4.1
├─ util-deprecate@1.0.2
├─ utils-merge@1.0.1
├─ vary@1.1.2
├─ watchpack@2.3.1
├─ webidl-conversions@3.0.1
├─ webpack-sources@3.2.3
├─ webpack@5.72.1
├─ whatwg-url@5.0.0
├─ which@2.0.2
├─ workerpool@6.2.1
├─ ws@8.2.3
├─ xtend@4.0.2
├─ yallist@4.0.0
├─ yargs-parser@20.2.9
└─ yauzl@2.10.0
Done in 98.25s.
PS D:\node\awesome-reactive-video> code .

< Created both MyVideo.js and index.js here >

PS D:\node\awesome-reactive-video> node .\index.js
Compiling Reactive Video Javascript
Starting server
Launching puppeteer, concurrency: 3
Error: Bundle failed: asset index.js 119 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
modules by path ./node_modules/reactive-video/dist/ 20.1 KiB
  modules by path ./node_modules/reactive-video/dist/components/*.js 14.5 KiB
    ./node_modules/reactive-video/dist/components/FFmpegVideo.js 5.51 KiB [built] [code generated]
    + 6 modules
  modules by path ./node_modules/reactive-video/dist/*.js 5.59 KiB
    ./node_modules/reactive-video/dist/index.js 562 bytes [built] [code generated]
    ./node_modules/reactive-video/dist/contexts.js 1.75 KiB [built] [code generated]
    + 2 modules
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/@reactive-video/builder/src/puppeteerEntry.js 4.37 KiB [built] [code generated] [1 error]
./MyVideo.js 1.35 KiB [built] [code generated]
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]

ERROR in ./node_modules/@reactive-video/builder/src/puppeteerEntry.js 87:4
Module parse failed: Unexpected token (87:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   // <div key={currentFrame} id={getId(currentFrame)}>
|   return (
>     <div id={getId(currentFrame)} style={frameCanvasStyle}>
|       <VideoContextProvider
|         currentFrame={currentFrame}

webpack 5.72.1 compiled with 1 error in 3114 ms
    at Watching.handler (D:\node\awesome-reactive-video\node_modules\@reactive-video\builder\src\bundler.js:88:16)
    at D:\node\awesome-reactive-video\node_modules\webpack\lib\Watching.js:290:9
    at Hook.eval [as callAsync] (eval at create (D:\node\awesome-reactive-video\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:\node\awesome-reactive-video\node_modules\tapable\lib\Hook.js:18:14)
    at Watching._done (D:\node\awesome-reactive-video\node_modules\webpack\lib\Watching.js:287:28)
    at D:\node\awesome-reactive-video\node_modules\webpack\lib\Watching.js:209:21
    at Compiler.emitRecords (D:\node\awesome-reactive-video\node_modules\webpack\lib\Compiler.js:919:5)
    at D:\node\awesome-reactive-video\node_modules\webpack\lib\Watching.js:187:22
    at D:\node\awesome-reactive-video\node_modules\webpack\lib\Compiler.js:885:14
    at Hook.eval [as callAsync] (eval at create (D:\node\awesome-reactive-video\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)

cli also throws the same error:

reactive-video --duration-frames 90 MyVideo.js
Compiling Reactive Video Javascript
Starting server
Launching puppeteer, concurrency: 4
Error: Bundle failed: assets by status 34.6 KiB [cached] 1 asset
orphan modules 20.1 KiB [orphan] 11 modules
cacheable modules 33 KiB
  modules by path ../../../../AppData/Roaming/npm/node_modules/@reactive-video/builder/node_modules/ 8.54 KiB
    ../../../../AppData/Roaming/npm/node_modules/@reactive-video/builder/node_modules/react/index.js 190 bytes [built] [code generated]
    ../../../../AppData/Roaming/npm/node_modules/@reactive-video/builder/node_modules/react/cjs/react.production.min.js 6.3 KiB [built] [code generated]
    ../../../../AppData/Roaming/npm/node_modules/@reactive-video/builder/node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
  ../../../../AppData/Roaming/npm/node_modules/@reactive-video/builder/src/puppeteerEntry.js 4.37 KiB [built] [code generated] [1 error]
  ./MyVideo.js + 10 modules 20.1 KiB [built] [code generated]

ERROR in ../../../../AppData/Roaming/npm/node_modules/@reactive-video/builder/src/puppeteerEntry.js 87:4
Module parse failed: Unexpected token (87:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   // <div key={currentFrame} id={getId(currentFrame)}>
|   return (
>     <div id={getId(currentFrame)} style={frameCanvasStyle}>
|       <VideoContextProvider
|         currentFrame={currentFrame}

webpack 5.72.1 compiled with 1 error in 1825 ms

I tried it on WSL and it works fine.

[preetparm]

@seriiix i am also getting same error , could you please guide me,how you solved error?

[mifi]

@preetparm are you also on Windows? I haven't tested on windows so there could be some bugs there

[preetparm]

Yes windows 10 system

[DhavalW]

Got the same error on an ubuntu system (glitch.com)