search

theatre-js / theatre

Motion design editor for the web
https://www.theatrejs.com
Apache License 2.0
10.82k stars 337 forks source link

`yarn cli build` fails #470

Open akre54 opened 5 months ago

akre54 commented 5 months ago

Hi all - I'm trying to build Theatre from scratch for local use. Following the instructions in CONTRIBUTING.md, I tried to run yarn cli build but seeing an error:

> theatre main ✗ yarn cli build
$ yarn run build:ts
$ yarn workspace $'@theatre/saaz' run build
$ yarn workspace theatre run build
$ yarn workspace $'@theatre/dataverse' run build
$ yarn workspace $'@theatre/react' run build
$ yarn workspace $'@theatre/browser-bundles' run build
$ yarn workspace $'@theatre/r3f' run build
$ yarn workspace theatric run build
 > ../../theatre/studio/src/uiComponents/chordial/chordialInternals.ts:3:24: error: Expected "}" but found "ElementType"
    3 │ import {useEffect, type ElementType, type MutableRefObject} from 'react'
      ╵                         ~~~~~~~~~~~

~/Projects/theatre/packages/browser-bundles/node_modules/esbuild/lib/main.js:1449
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 1 error:
../../theatre/studio/src/uiComponents/chordial/chordialInternals.ts:3:24: error: Expected "}" but found "ElementType"
    at failureErrorWithLog (~/Projects/theatre/packages/browser-bundles/node_modules/esbuild/lib/main.js:1449:15)
    at ~/Projects/theatre/packages/browser-bundles/node_modules/esbuild/lib/main.js:1131:28
    at runOnEndCallbacks (~/Projects/theatre/packages/browser-bundles/node_modules/esbuild/lib/main.js:1049:65)
    at buildResponseToResult (~/Projects/theatre/packages/browser-bundles/node_modules/esbuild/lib/main.js:1129:7)
    at ~/Projects/theatre/packages/browser-bundles/node_modules/esbuild/lib/main.js:1236:14
    at ~/Projects/theatre/packages/browser-bundles/node_modules/esbuild/lib/main.js:609:9
    at handleIncomingPacket (~/Projects/theatre/packages/browser-bundles/node_modules/esbuild/lib/main.js:706:9)
    at Socket.readFromStdout (~/Projects/theatre/packages/browser-bundles/node_modules/esbuild/lib/main.js:576:7)
    at Socket.emit (node:events:514:28)
    at addChunk (node:internal/streams/readable:376:12) {
  errors: [
    {
      detail: undefined,
      location: {
        column: 24,
        file: '../../theatre/studio/src/uiComponents/chordial/chordialInternals.ts',
        length: 11,
        line: 3,
        lineText: "import {useEffect, type ElementType, type MutableRefObject} from 'react'",
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Expected "}" but found "ElementType"'
    }
  ],
  warnings: []
}

Node.js v20.9.0
~/Projects/theatre/node_modules/@cspotcode/zx/src/index.mjs:105
      let output = new ProcessOutput({
                   ^

ProcessOutput [Error]:  > ../../theatre/studio/src/uiComponents/chordial/chordialInternals.ts:3:24: error: Expected "}" but found "ElementType"
    3 │ import {useEffect, type ElementType, type MutableRefObject} from 'react'
      ╵                         ~~~~~~~~~~~

~/Projects/theatre/packages/browser-bundles/node_modules/esbuild/lib/main.js:1449
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 1 error:
../../theatre/studio/src/uiComponents/chordial/chordialInternals.ts:3:24: error: Expected "}" but found "ElementType"
    at failureErrorWithLog (~/Projects/theatre/packages/browser-bundles/node_modules/esbuild/lib/main.js:1449:15)
    at ~/Projects/theatre/packages/browser-bundles/node_modules/esbuild/lib/main.js:1131:28
    at runOnEndCallbacks (~/Projects/theatre/packages/browser-bundles/node_modules/esbuild/lib/main.js:1049:65)
    at buildResponseToResult (~/Projects/theatre/packages/browser-bundles/node_modules/esbuild/lib/main.js:1129:7)
    at ~/Projects/theatre/packages/browser-bundles/node_modules/esbuild/lib/main.js:1236:14
    at ~/Projects/theatre/packages/browser-bundles/node_modules/esbuild/lib/main.js:609:9
    at handleIncomingPacket (~/Projects/theatre/packages/browser-bundles/node_modules/esbuild/lib/main.js:706:9)
    at Socket.readFromStdout (~/Projects/theatre/packages/browser-bundles/node_modules/esbuild/lib/main.js:576:7)
    at Socket.emit (node:events:514:28)
    at addChunk (node:internal/streams/readable:376:12) {
  errors: [
    {
      detail: undefined,
      location: {
        column: 24,
        file: '../../theatre/studio/src/uiComponents/chordial/chordialInternals.ts',
        length: 11,
        line: 3,
        lineText: "import {useEffect, type ElementType, type MutableRefObject} from 'react'",
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Expected "}" but found "ElementType"'
    }
  ],
  warnings: []
}

Node.js v20.9.0
    at <anonymous> (~/Projects/theatre/devEnv/cli.ts:65:24)
    exit code: 1
    at ChildProcess.<anonymous> (~/Projects/theatre/node_modules/@cspotcode/zx/src/index.mjs:105:20)
    at ChildProcess.emit (node:events:514:28)
    at maybeClose (node:internal/child_process:1105:16)
    at ChildProcess._handle.onexit (node:internal/child_process:305:5)

This to me implies that it's parsing the file as js and not typescript, because the parser seems to be failing on the type line.

Going one-by-one, I'm getting a few warnings from the various packages, but this error seems to be coming from the browser-bundles package.

Additionally, I'm getting an error in theatre/theatre: 

> theatre/theatre main ✗ yarn build

~/Projects/theatre/theatre/.temp/declarations/studio/src/index.d.ts → studio/dist...
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
@theatre/utils/types (imported by .temp/declarations/studio/src/TheatreStudio.d.ts, .temp/declarations/studio/src/StudioStore/StudioStore.d.ts, .temp/declarations/studio/src/PaneManager.d.ts, .temp/declarations/core/src/privateAPIs.d.ts)
@theatre/sync-server/state/types (imported by .temp/declarations/studio/src/TheatreStudio.d.ts, .temp/declarations/studio/src/StudioStore/StudioStore.d.ts, .temp/declarations/studio/src/PaneManager.d.ts)
@theatre/sync-server/state/types/studio (imported by .temp/declarations/studio/src/Studio.d.ts)
@theatre/sync-server/state/types/core (imported by .temp/declarations/studio/src/Studio.d.ts, .temp/declarations/studio/src/StudioStore/StudioStore.d.ts)
@theatre/sync-server/state/schema (imported by .temp/declarations/studio/src/StudioStore/StudioStore.d.ts)
@theatre/sync-server/trpc/routes (imported by .temp/declarations/studio/src/SyncStore/SyncServerLink.d.ts)
[!] (plugin dts) Error: namespace child (hoisting) not supported yet

And a few warnings around

Analysis will use the bundled TypeScript version 4.4.3 *** The target project appears to use TypeScript 5.1.6 which is newer than the bundled compiler engine; consider upgrading API Extractor.

Do I have something misconfigured? Thanks!

akre54 commented 5 months ago

Okay couple fixes:

  1. The 'Expected "}" but found "ElementType"' error goes away if we move the imports to their own line. I guess esbuild doesn't like mixed inline type imports.
  2. The warnings for API Extractor don't go away if we upgrade all modules to 7.38.5, the latest, but their version is now 5.0.4 instead of 4.4.3.
  3. yarn cli build is still failing on [!] (plugin dts) Error: namespace child (hoisting) not supported yet. I replaced rollup-plugin-dts (which is in maintenance mode) with rollup-plugin-flat-dts but getting issues building typescript.