yarn cli build fails

[akre54]

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]

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.