bfanger / tvkit

Proxy to run a modern dev server in old browsers
MIT License
22 stars 5 forks source link

Build breaks while processing tvkit-polyfills.js (?) #9

Closed chipndahla closed 1 year ago

chipndahla commented 1 year ago

First, thanks again for this great project.

I'm trying to use it to build a compatible version for older Tizen TVs. For this I use the Static adapter and then try to run tvkit to transpile it. This worked in earlier versions of this project but seems to have broken now (log below). Seems to be while processing the tvkit-polyfills.js? Also notice the two "babelTranform failed" among my project files. Any ideas why this happens?

Log: npx tvkit@latest build . --out c:\temp\legacy --browser "Tizen 5" --force
Need to install the following packages: tvkit@0.9.1 Ok to proceed? (y) [tvkit] { input: 'C:\Users\andreas\OneDrive - Anno Domini\Own Projects\vyou.art\mvp\vyou-app\build', output: 'c:\temp\legacy', browsers: [ 'chrome 63' ], css: true, minify: true, force: true } ⏩ \favicon.png ⏩ \apple-120.png ⏩ \apple-180.png ⏩ \icon-192.png ⏩ \manifest.json ⏩ \icon-512.png ⏩ \mac-512.png ⏩ \Pairyourscreen.png ✅ \index.html ⏩ \art\approach-to-venice.jpeg ⏩ \art\bananas.jpeg ⏩ \art\dali.jpeg ⏩ \art\banksy-boat.jpeg ⏩ \art\door-84.jpeg ⏩ \art\baptism.jpeg ⏩ \art\dusk.jpeg ⏩ \art\christina-sayers.webp ⏩ \art\fish.jpeg ⏩ \art\pandemic.jpeg ⏩ \art\ship.jpeg ⏩ \art\rylovaa.jpeg ⏩ \art\paper.png ⏩ \art\gogh-shoes.jpeg ⏩ \pics\arturo.jpeg ⏩ \art\starry-night.jpeg ⏩ \art\yayoi-fruit.jpeg ⏩ \pics\dardel-ap.jpeg ⏩ \pics\grantwood.jpeg ⏩ \pics\basqu.png ⏩ \pics\hokusai.jpeg ⏩ \pics\icon-192.png ⏩ \pics\icon-512.png ⏩ \pics\linn-f.jpeg ⏩ \pics\sqicon-192.png ⏩ \pics\monet-sp.jpeg ⏩ \pics\sqicon-512.png ⏩ \pics\trfavicon.png ⏩ \pics\yayoi-art.jpeg ⏩ \pics\yayoi-l.jpeg ⏩ \icons\feather.eot ⏩ \icons\feather.ttf ⏩ \icons\feather.svg ⏩ \pics\yayoi.jpeg ⏩ \art\vattenfallet-dardel.jpeg ⏩ \icons\feather.woff ⏩ _app\version.json ⏩ \icons\samsungTheFrameIcon.png ⏩ \js\webOSTVjs-1.2.4\LICENSE-2.0.txt ✅ \js\webOSTVjs-1.2.4\webOSTV.js ✅ _app\immutable\start-0acbbdc0.js ✅ _app\immutable\assets\ArtworkPreview-23193fec.css ✅ _app\immutable\assets\Artist-595e4495.css ✅ _app\immutable\assets\Check-5eea8f0d.css ✅ _app\immutable\assets\ArtistPreview-38f47b6e.css ✅ _app\immutable\assets\BookMark-a1fb157e.css ✅ _app\immutable\assets\CheckSingle-2623dcd9.css ✅ _app\immutable\assets\HeartMark-84c5ce16.css ✅ _app\immutable\assets\Artwork-b2fbae35.css ✅ _app\immutable\assets\ExhibitionRow-f1875406.css ✅ _app\immutable\assets\Horizon-a05d358b.css ✅ _app\immutable\assets\Field-7bd846c7.css ✅ _app\immutable\assets\PopUp-8aa555b8.css ✅ _app\immutable\assets\Icon-34f4c87a.css ✅ _app\immutable\assets\serializers-28423f49.css ✅ _app\immutable\assets\ExhibitionCard-3bf5f27b.css ✅ _app\immutable\assets\Tabs-25dd319f.css ✅ _app\immutable\assets\TapLove-925424a8.css ✅ _app\immutable\assets\TopCircle-09b85e16.css ✅ _app\immutable\assets_layout-341fe5bb.css ✅ _app\immutable\assets_layout-b212931c.css ✅ _app\immutable\assets_page-0734702a.css ✅ _app\immutable\assets_page-140a3389.css ✅ _app\immutable\assets_layout-1eb3de86.css ✅ _app\immutable\assets_page-5840b663.css ✅ _app\immutable\assets_page-341ba734.css ✅ _app\immutable\assets_page-3ae6120d.css ✅ _app\immutable\assets_page-76259b67.css ✅ _app\immutable\assets_page-4cfd98db.css ✅ _app\immutable\assets_page-73b4c261.css ✅ _app\immutable\assets_page-36e2e0b3.css ✅ _app\immutable\assets_page-9b0c4de7.css ✅ _app\immutable\assets_page-ab42dbec.css ✅ _app\immutable\assets_page-7d8d2358.css ✅ _app\immutable\assets_page-c208de9a.css ✅ _app\immutable\assets_page-a1deac3a.css ✅ _app\immutable\assets_page-e20f3305.css ✅ _app\immutable\assets_page-c515eea4.css ✅ _app\immutable\assets_page-e25b47c3.css ✅ _app\immutable\assets_page-f025e7e4.css ✅ _app\immutable\assets_page-e91fd3cd.css ✅ _app\immutable\assets_page-fa413f84.css ✅ _app\immutable\chunks\11-bd92dcf3.js ✅ _app\immutable\chunks\1-9ba40f14.js ✅ _app\immutable\chunks\0-d48985f2.js ✅ _app\immutable\chunks\12-421a6674.js ✅ _app\immutable\chunks\10-09d2eda9.js ✅ _app\immutable\chunks\13-f3642e57.js ✅ _app\immutable\chunks\14-015f9a4d.js ✅ _app\immutable\chunks\15-cd7e8dfd.js ✅ _app\immutable\chunks\16-2ed98764.js ✅ _app\immutable\chunks\19-3b153ba1.js ✅ _app\immutable\chunks\18-2dfd8c6e.js ✅ _app\immutable\chunks\17-1ccb09b6.js ✅ _app\immutable\chunks\20-3c2b0a9c.js ✅ _app\immutable\chunks\22-1623eb33.js ✅ _app\immutable\chunks\21-c848aa32.js ✅ _app\immutable\chunks\23-1770c5e7.js ✅ _app\immutable\chunks\2-ba357d44.js ✅ _app\immutable\chunks\24-070ebef0.js ✅ _app\immutable\chunks\26-d1368363.js ✅ _app\immutable\chunks\25-9e5af90d.js ✅ _app\immutable\chunks\27-702453a0.js ✅ _app\immutable\chunks\3-463e53e6.js ✅ _app\immutable\chunks\4-b15e8108.js ✅ _app\immutable\chunks\7-b6a8accd.js ✅ _app\immutable\chunks\5-084884e4.js ✅ _app\immutable\chunks\8-3b620e18.js ✅ _app\immutable\chunks\6-e6e475da.js ✅ _app\immutable\chunks\Artist-75e0f8c8.js ✅ _app\immutable\chunks\9-6ea9415f.js ✅ _app\immutable\chunks\ArtistPreview-7483f49c.js ✅ _app\immutable\chunks\application-d8b90453.js ✅ _app\immutable\chunks\Artwork-60584201.js ✅ _app\immutable\chunks\ArtworkPreview-820ee976.js ✅ _app\immutable\chunks\BookMark-7f2fbf90.js ✅ _app\immutable\chunks\Artwork.svelte_svelte_type_style_lang-0b56d38f.js ✅ _app\immutable\chunks\ArtworkPreview.svelte_svelte_type_stylelang-9aa1fbfb.js ✅ _app\immutable\chunks\brand-316a989a.js ✅ _app\immutable\chunks\Check-84b2fdde.js ✅ _app\immutable\chunks\CheckSingle-2484641b.js ✅ _app\immutable\chunks\ExhibitionRow-aa973df0.js ✅ _app\immutable\chunks\ExhibitionCard-119bbe76.js ✅ _app\immutable\chunks\Horizon-39dacf0b.js ✅ _app\immutable\chunks\control-e7f5239e.js ✅ _app\immutable\chunks\HeartMark-08fd234d.js ✅ _app\immutable\chunks\Field-b55f8c2e.js ✅ _app\immutable\chunks\Icon-7d9b43b5.js ✅ _app\immutable\chunks\index-26a0b8b8.js ✅ _app\immutable\chunks\index-6b9d5925.js ✅ _app\immutable\chunks\index-74c984b3.js ✅ _app\immutable\chunks\index-79982749.js ✅ _app\immutable\chunks\index-58e2a4cc.js ✅ _app\immutable\chunks\definitions-96abd937.js ✅ _app\immutable\chunks\index-65998c76.js ✅ _app\immutable\chunks\index-4d8f42c1.js ✅ _app\immutable\chunks\index-afab83ca.js ✅ _app\immutable\chunks\index-c7750564.js ✅ _app\immutable\chunks\index-b630591c.js ✅ _app\immutable\chunks\navigation-d6348a9c.js ✅ _app\immutable\chunks\index-d4a64a72.js ✅ _app\immutable\chunks\Meta-40e40c43.js ✅ _app\immutable\chunks\PopUp-ef34ff38.js ✅ _app\immutable\chunks\preferences-2816d6a5.js ✅ _app\immutable\chunks\preload-helper-41c905a7.js ✅ _app\immutable\chunks\helpers-5cec0cea.js ✅ _app\immutable\chunks\singletons-d3f6afaa.js ✅ _app\immutable\chunks\sanity-f130011d.js ✅ _app\immutable\chunks\state-02c12b9e.js ✅ _app\immutable\chunks\serializers-d7a76b96.js ✅ _app\immutable\chunks\stores-a9639e30.js ✅ _app\immutable\chunks\Tabs-b6747283.js ✅ _app\immutable\chunks\TapLove-e4dad78e.js ✅ _app\immutable\chunks\TopCircle-4c9a9392.js ✅ _app\immutable\chunks\tslib.es6-1cf46236.js ✅ _app\immutable\chunks\web-05bd910e.js ✅ _app\immutable\chunks\web-7a8eb21b.js ✅ _app\immutable\chunks\web-3fa65eaf.js ✅ _app\immutable\chunks\web-3219e23d.js ✅ _app\immutable\chunks_commonjsHelpers-042e6b4d.js ✅ _app\immutable\chunks_layout-6cf2d15a.js ✅ _app\immutable\chunks_page-165749da.js ✅ _app\immutable\chunks_page-4d77f0c7.js ✅ _app\immutable\chunks_page-6caeb968.js ✅ _app\immutable\chunks_page-ed77219c.js ✅ _app\immutable\chunks\transform-0935fd62.js ✅ _app\immutable\chunks_page-6daa8bbf.js ✅ _app\immutable\chunks_page-da0d156f.js ✅ _app\immutable\chunks_page-beedfcca.js ✅ _app\immutable\chunks\screenManagement-16a898fd.js ✅ _app\immutable\chunks\vyouser-a56f405c.js ✅ _app\immutable\components\pages_error.svelte-de8009ea.js ✅ _app\immutable\components\pages_layout.svelte-728a44c5.js ✅ _app\immutable\modules\pages(standard)_page.ts-cb8f0447.js ✅ _app\immutable\modules\pages(standard)_layout.ts-4916468a.js babelTranform failed babelTranform failed ✅ _app\immutable\components\pages(naked)_layout.svelte-2bba7eca.js ✅ _app\immutable\components\pages(standard)_layout.svelte-4bc673b9.js ✅ _app\immutable\modules\pages(standard)\brand_page.ts-4ed993c7.js ✅ _app\immutable\components\pages(standard)_page.svelte-d1f7183e.js ✅ _app\immutable\modules\pages(standard)\get_page.ts-4ed993c7.js ✅ _app\immutable\modules\pages(standard)_discover_page.ts-d4c10ffe.js ✅ _app\immutable\modules\pages(standard)\exhibition_slug_page.ts-940052f7.js ✅ _app\immutable\modules\pages(standard)\artist_slug_page.ts-71d0eb87.js ✅ _app\immutable\modules\pages(standard)\artwork_slug_page.ts-65e2df8b.js ✅ _app\immutable\components\pages(standard)\brand_page.svelte-ce989b9c.js ✅ _app\immutable\components\pages(naked)\receiver_page.svelte-6efd1f52.js ✅ _app\immutable\components\pages(standard)\account_page.svelte-4b7a395b.js ✅ _app\immutable\components\pages(standard)\em_page.svelte-f48e1bdc.js ✅ _app\immutable\components\pages(standard)\collection_page.svelte-31bc693a.js ✅ _app\immutable\components\pages(standard)\frame_layout.svelte-ae2d38f4.js ✅ _app\immutable\components\pages(standard)\ad_page.svelte-a72dff2d.js ✅ _app\immutable\components\pages(standard)\explore_page.svelte-4a362d19.js ✅ _app\immutable\components\pages(standard)\frame_page.svelte-d0008a12.js ✅ _app\immutable\components\pages(standard)\find_page.svelte-8f88264e.js ✅ _app\immutable\components\pages(standard)\get_page.svelte-edf4317e.js ✅ _app\immutable\components\pages(standard)_discover_page.svelte-a0e9a626.js ✅ _app\immutable\components\pages(standard)\screens_page.svelte-fef7c347.js ✅ _app\immutable\components\pages(standard)\keys_page.svelte-590da2c1.js ✅ _app\immutable\components\pages(standard)\search_page.svelte-2b54bbfe.js ✅ _app\immutable\components\pages(naked)\art\dardel_page.svelte-0f57197e.js ✅ _app\immutable\components\pages(naked)\art\fish_page.svelte-596e508b.js ✅ _app\immutable\components\pages(naked)\art\vattenfall_page.svelte-dd31ebdb.js ✅ _app\immutable\components\pages(standard)\artist_slug_page.svelte-b7b85c8e.js ✅ _app\immutable\components\pages(standard)\artwork_slug_page.svelte-89cf7f1a.js ✅ _app\immutable\components\pages(standard)\exhibition_slug_page.svelte-346a9c1a.js ✅ _app\immutable\components\pages(standard)\category_slug_page.svelte-9761f594.js ✅ _app\immutable\components\pages(standard)\em\fav_page.svelte-0d908a44.js ✅ /tvkit-polyfills.js node:internal/errors:484 ErrorCaptureStackTrace(err); ^

Error: Package subpath './helpers/arrayLikeToArray.js' is not defined by "exports" in C:\Users\andreas\AppData\Local\npm-cache_npx\b69f79dce4f26bc3\node_modules\@babel\runtime\package.json at new NodeError (node:internal/errors:393:5) at throwExportsNotFound (node:internal/modules/esm/resolve:358:9) at packageExportsResolve (node:internal/modules/esm/resolve:668:3) at resolveExports (node:internal/modules/cjs/loader:529:36) at Module._findPath (node:internal/modules/cjs/loader:569:31) at Module._resolveFilename (node:internal/modules/cjs/loader:981:27) at Function.resolve (node:internal/modules/cjs/helpers:109:19) at babelRuntime (file:///C:/Users/andreas/AppData/Local/npm-cache/_npx/b69f79dce4f26bc3/node_modules/tvkit/src/babelRuntime.js:16:25) at file:///C:/Users/andreas/AppData/Local/npm-cache/_npx/b69f79dce4f26bc3/node_modules/tvkit/src/build.js:60:26 at Array.map () at build (file:///C:/Users/andreas/AppData/Local/npm-cache/_npx/b69f79dce4f26bc3/node_modules/tvkit/src/build.js:59:37) { code: 'ERR_PACKAGE_PATH_NOT_EXPORTED' }

Node.js v18.12.1

bfanger commented 1 year ago

I think I fixed the ERR_PACKAGE_PATH_NOT_EXPORTED in 0.9.3 I'm not sure why the babelTransform failed, now it logs the filename that failed and empty files no longer count as failure.

chipndahla commented 1 year ago

I think I fixed the ERR_PACKAGE_PATH_NOT_EXPORTED in 0.9.3 I'm not sure why the babelTransform failed, now it logs the filename that failed and empty files no longer count as failure.

Yes, now the build works (and no more "babelTranform failed" either) . Great! But it seems the error now occurs during runtime? At least a very similar error. This is from the console log of a Tizen 6.5 TV (tell me if you need anything else):

_layout.svelte-728a44c5.js:371 Uncaught (in promise) TypeError: Cannot read property 'call' of undefined at n (_layout.svelte-728a44c5.js:371) at Object../packages/logrocket/src/module-npm.js (_layout.svelte-728a44c5.js:371) at n (_layout.svelte-728a44c5.js:371) at Object.0 (_layout.svelte-728a44c5.js:371) at n (_layout.svelte-728a44c5.js:371) at _r.exports../node_modules/../../../../tvkit-babel-runtime/helpers/arrayLikeToArray.js.js.js.js (_layout.svelte-728a44c5.js:371) at _layout.svelte-728a44c5.js:371

chipndahla commented 1 year ago

Also get the same error in a modern Chrome browser. You can check it out live at https://legacy.vyou.art/ if you prefer. I can however locally in the same modern Chrome, with the same build, use tvkit serve without any issues

chipndahla commented 1 year ago

Update: turned out this was related to the Logrocket package. Temporary removed it and now the app runs! Great. But I guess this still is a bug? And we do want to use Logrocket :-)

bfanger commented 1 year ago

arrayLikeToArray.js.js.js.js looks like the build step (which adds a .js) was applied multiple times.

Could you dive deeper into why logrocket isn't working? Cannot read property 'call' of undefined might be indicating logrocket is missing a polyfill (or some other code and logrocket is reporting that).

chipndahla commented 1 year ago

Could you dive deeper into why logrocket isn't working? Cannot read property 'call' of undefined might be indicating logrocket is missing a polyfill (or some other code and logrocket is reporting that).

That I don't know how to do that unfortunately but published the broken site at https://legacy.vyou.art/ so you can see and perhaps debug the issues. Tell me if I can assist in any way

bfanger commented 1 year ago

Found out what is happening, logrocket also includes @babel/runtime in the /dist/build.umd.js (prebundled by webpack)

Tvkit's naive string replacement is causing issues, i'll have to write something smarter.

chipndahla commented 1 year ago

Can confirm, now it works! Nice work. Will continue to test on old Samsung Tizen and WebOS TVs