Compile error on 3-line Ink cli program

sroussey commented 1 year ago

What version of Bun is running?

0.5.6

What platform is your computer?

Darwin 22.3.0 arm64 arm

What steps can reproduce the bug?

bun init (when asked, have the file be cli.tsx)

bun install bun-types @types/react react@17 ink

Then the cli.tsx file has this:

import React from "react"
import { render, Text } from "ink"
render(<Text >Welcome to Country CLI App </Text>)

bun run cli.tsx

1141 |       } else {
1142 |         func.arity = arity;obj[name] = func;
1143 |       }
1144 |     }_nbind.addMethod = addMethod;function throwError(message) {
1145 |       throw new Error(message);
1146 |     }_nbind.throwError = throwError;_nbind.bigEndian = false;_a = _typeModule(_typeModule), _nbind.Type = _a.Type, _nbind.makeType = _a.makeType, _nbind.getComplexType = _a.getComplexType, _nbind.structureList = _a.structureList;var BindType = function (_super) {
                                                                ^
ReferenceError: Can't find variable: _a
      at /Users/steve/Code/test-bun/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:1146:61
      at /Users/steve/Code/test-bun/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:1589:28
      at /Users/steve/Code/test-bun/node_modules/yoga-layout-prebuilt/yoga-layout/dist/entry-browser.js:21:0
      at /Users/steve/Code/test-bun/node_modules/ink/build/reconciler.js:8:31
      at /Users/steve/Code/test-bun/node_modules/ink/build/ink.js:31:21
      at /Users/steve/Code/test-bun/node_modules/ink/build/render.js:6:14
      at /Users/steve/Code/test-bun/node_modules/ink/build/index.js:3:4
      at /Users/steve/Code/test-bun/cli.tsx:2:0

What is the expected behavior?

No error, just output example text

What do you see instead?

bun run cli.tsx

1141 |       } else {
1142 |         func.arity = arity;obj[name] = func;
1143 |       }
1144 |     }_nbind.addMethod = addMethod;function throwError(message) {
1145 |       throw new Error(message);
1146 |     }_nbind.throwError = throwError;_nbind.bigEndian = false;_a = _typeModule(_typeModule), _nbind.Type = _a.Type, _nbind.makeType = _a.makeType, _nbind.getComplexType = _a.getComplexType, _nbind.structureList = _a.structureList;var BindType = function (_super) {
                                                                ^
ReferenceError: Can't find variable: _a
      at /Users/steve/Code/test-bun/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:1146:61
      at /Users/steve/Code/test-bun/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:1589:28
      at /Users/steve/Code/test-bun/node_modules/yoga-layout-prebuilt/yoga-layout/dist/entry-browser.js:21:0
      at /Users/steve/Code/test-bun/node_modules/ink/build/reconciler.js:8:31
      at /Users/steve/Code/test-bun/node_modules/ink/build/ink.js:31:21
      at /Users/steve/Code/test-bun/node_modules/ink/build/render.js:6:14
      at /Users/steve/Code/test-bun/node_modules/ink/build/index.js:3:4
      at /Users/steve/Code/test-bun/cli.tsx:2:0

Additional information

No response

gtrabanco commented 1 year ago

Currently with bun 0.6.6 the error is while importing yoga.wasm. I tried from cleanup project created with simple bun init in an empty folder and using ink generator and trying to execute the typescript and builded code with same results. I did not receive any fail with node.

ISSUE

The current exprimented error:

1 | export { A as ALIGN_AUTO, e as ALIGN_BASELINE, b as ALIGN_CENTER, c as ALIGN_FLEX_END, a as ALIGN_FLEX_START, g as ALIGN_SPACE_AROUND, f as ALIGN_SPACE_BETWEEN, d as ALIGN_STRETCH, h as DIMENSION_HEIGHT, D as DIMENSION_WIDTH, i as DIRECTION_INHERIT, j as DIRECTION_LTR, k as DIRECTION_RTL, l as DISPLAY_FLEX, m as DISPLAY_NONE, u as EDGE_ALL, p as EDGE_BOTTOM, r as EDGE_END, s as EDGE_HORIZONTAL, E as EDGE_LEFT, o as EDGE_RIGHT, q as EDGE_START, n as EDGE_TOP, t as EDGE_VERTICAL, x as EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, y as EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, v as EXPERIMENTAL_FEATURE_WEB_FLEX_BASIS, F as FLEX_DIRECTION_COLUMN, z as FLEX_DIRECTION_COLUMN_REVERSE, B as FLEX_DIRECTION_ROW, C as FLEX_DIRECTION_ROW_REVERSE, I as GUTTER_ALL, G as GUTTER_COLUMN, H as GUTTER_ROW, K as JUSTIFY_CENTER, L as JUSTIFY_FLEX_END, J as JUSTIFY_FLEX_START, N as JUSTIFY_SPACE_AROUND, M as JUSTIFY_SPACE_BETWEEN, O as JUSTIFY_SPACE_EVENLY, S as LOG_LEVEL_DEBUG, P as LOG_LEVEL_ERROR, U as LOG_LEVEL_FATAL, R as LOG_LEVEL_INFO, T as LOG_LEVEL_VERBOSE, Q as LOG_LEVEL_WARN, X as MEASURE_MODE_AT_MOST, W as MEASURE_MODE_EXACTLY, V as MEASURE_MODE_UNDEFINED, Y as NODE_TYPE_DEFAULT, Z as NODE_TYPE_TEXT, $ as OVERFLOW_HIDDEN, a0 as OVERFLOW_SCROLL, _ as OVERFLOW_VISIBLE, a3 as POSITION_TYPE_ABSOLUTE, a2 as POSITION_TYPE_RELATIVE, a1 as POSITION_TYPE_STATIC, a6 as PRINT_OPTIONS_CHILDREN, a4 as PRINT_OPTIONS_LAYOUT, a5 as PRINT_OPTIONS_STYLE, aa as UNIT_AUTO, a9 as UNIT_PERCENT, a8 as UNIT_POINT, a7 as UNIT_UNDEFINED, ab as WRAP_NO_WRAP, ac as WRAP_WRAP, ad as WRAP_WRAP_REVERSE } from "${HOME}/MyProjects/bun-ink-test/node_modules/yoga-wasm-web/dist/wrapAsm-f766f97f.js";
2 | 
3 | let Yoga = await E(await fetch(new URL("./yoga.wasm", import.meta.url)).then((E) => E.arrayBuffer()));
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  ^
TypeError: protocol must be http: or https:
 code: "ERR_INVALID_ARG_VALUE"

      at ${HOME}/MyProjects/bun-ink-test/node_modules/yoga-wasm-web/dist/browser.js:1:1631

Env

Bun

$ bun --version
0.6.6

os

Intel MacOS Ventura 13.4

$ uname -a
Darwin Ala.local 22.5.0 Darwin Kernel Version 22.5.0: Mon Apr 24 20:51:50 PDT 2023; root:xnu-8796.121.2~5/RELEASE_X86_64 x86_64 i386 Darwin

Jarred-Sumner commented 1 year ago

We need to add support for fetch()’ing file://

gtrabanco commented 1 year ago

With todays release fetch file:// was added. I upgraded to canary.

Currently the problem is other different to support this library.

Bun version: 0.7.2

The problem:

$ bun run index.jsx
27 |         callback('stdout', data);
28 |     };
29 |     stderr.write = (data) => {
30 |         callback('stderr', data);
31 |     };
32 |     const internalConsole = new console.Console(stdout, stderr);
                                ^
TypeError: undefined is not a constructor (evaluating 'new console.Console(stdout, stderr)')
      at patchConsole (/Users/gtrabanco/MyProjects/bun-ink/node_modules/patch-console/dist/index.js:32:28)
      at patchConsole (/Users/gtrabanco/MyProjects/bun-ink/node_modules/ink/build/ink.js:311:30)
      at new Ink (/Users/gtrabanco/MyProjects/bun-ink/node_modules/ink/build/ink.js:215:12)
      at /Users/gtrabanco/MyProjects/bun-ink/node_modules/ink/build/render.js:18:77
      at getInstance (/Users/gtrabanco/MyProjects/bun-ink/node_modules/ink/build/render.js:43:19)
      at render (/Users/gtrabanco/MyProjects/bun-ink/node_modules/ink/build/render.js:18:21)
      at /Users/gtrabanco/MyProjects/bun-ink/index.jsx:20:0

console.Console does not exists yet.

Related issues: #3625

dnlsandiego commented 1 year ago

With todays release fetch file:// was added. I upgraded to canary.

Currently the problem is other different to support this library.

Bun version: 0.7.2

The problem:

$ bun run index.jsx
27 |         callback('stdout', data);
28 |     };
29 |     stderr.write = (data) => {
30 |         callback('stderr', data);
31 |     };
32 |     const internalConsole = new console.Console(stdout, stderr);
                                ^
TypeError: undefined is not a constructor (evaluating 'new console.Console(stdout, stderr)')
      at patchConsole (/Users/gtrabanco/MyProjects/bun-ink/node_modules/patch-console/dist/index.js:32:28)
      at patchConsole (/Users/gtrabanco/MyProjects/bun-ink/node_modules/ink/build/ink.js:311:30)
      at new Ink (/Users/gtrabanco/MyProjects/bun-ink/node_modules/ink/build/ink.js:215:12)
      at /Users/gtrabanco/MyProjects/bun-ink/node_modules/ink/build/render.js:18:77
      at getInstance (/Users/gtrabanco/MyProjects/bun-ink/node_modules/ink/build/render.js:43:19)
      at render (/Users/gtrabanco/MyProjects/bun-ink/node_modules/ink/build/render.js:18:21)
      at /Users/gtrabanco/MyProjects/bun-ink/index.jsx:20:0

console.Console does not exists yet.

Related issues: #3625

ink has an option to disable it from patching the console, which fixes this error. patchConsole

// import { render } from 'ink'

render(<Component />, { patchConsole: false })

Though I think is workaround because ink is patching the console to prevent user land console calls clashing with its output.

dnlsandiego commented 1 year ago

We need to add support for fetch()’ing file://

It seems that compiling an executable that's fetching file:// still breaks with the same error protocol must be http: or https:. Even without including ink. But using ink works fine when just running a file like bun run index.tsx . This is trying out the latest 0.7.1

Here's a barebones setup to reproduce the issue. It just fetches a file. Also rendering a text through JSX using ink

https://github.com/dnlsandiego/ink-bun-executable-bug

Am I missing something when building an executable that's fetching a file?

gtrabanco commented 1 year ago

We need to add support for fetch()’ing file://

It seems that compiling an executable that's fetching file:// still breaks with the same error protocol must be http: or https:. Even without including ink. But using ink works fine when just running a file like bun run index.tsx . This is trying out the latest 0.7.1

Here's a barebones setup to reproduce the issue. It just fetches a file. Also rendering a text through JSX using ink

https://github.com/dnlsandiego/ink-bun-executable-bug

Am I missing something when building an executable that's fetching a file?

Tanks @dnlsandiego works great with that workaround. Makes sense ink patching console.

And yes, when compile with latest canary build still receives same issue or similar than previous version.

$ bun build --compile index.jsx              
  [68ms]  bundle  114 modules
 [556ms] compile  index
$ ./index 
33684 |   };
33685 | })();
33686 | 
33687 | // node_modules/yoga-wasm-web/dist/browser.js
33688 | 
33689 | var Yoga = await initYoga(await fetch(new URL("./yoga.wasm", import.meta.url)).then((E) => E.arrayBuffer()));
                                   ^
TypeError: protocol must be http: or https:
 code: "ERR_INVALID_ARG_VALUE"

      at compiled://root/index:33689:32

akoenig commented 1 year ago

I can confirm that the console.Console error has been resolved as per issue #5448. This was tested on the latest canary release (1.0.3). However, I encountered an issue where yoga.wasm is not bundled when executing the bun build --compile ./src/index.ts --outfile my-app command. The build process completes successfully, but when I attempt to run the application using ./my-app, it fails with the following error:

error: Cannot find module "./yoga.wasm" from "compiled://root/my-app"

To illustrate this issue (using pastel & ink, which uses yoga-wasm-web under the hood), I have created a repository demonstrating the case: https://github.com/akoenig/bun-wasm-bundling-bug.

Electroid commented 12 months ago

This issue has been fixed.

❯ bun cli.tsx 
Welcome to Country CLI App

In regards to the WASM errors being discussed, that is a result of another issue: #6567

oven-sh / bun