Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

web-bundle: a root-relative import from a remote plugin fails in the browser

クローズ 初心者向け
#94 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
70/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
javascript
領域
frontend

調査の方向性

apps/web-bundle/src/loader.js から始めてください。ここでは loadRemoteModule が ./ や ../ 以外のすべての specifier をスキップします(isRelative のチェック)。apps/cli/remote-loader.js にある Node のフックと比較してください。こちらはルート相対の specifier をプラグインの origin に対して解決しています。ブラウザで読み込まれたプラグイン内の /lib/x.js のようなルート相対 import が、モジュールのソース URL に対して解決され、loadRemoteModule を通じて読み込まれること、そして https: の絶対 specifier は変更されないこと、さらに両方のホストで結果が一致することが完了の条件です。

索引モデルが issue の本文から書いたものです。

説明

bug

What happens

A remote plugin loaded in the browser whose own source imports a root-relative specifier (import x from '/lib/x.js') fails to load. The same plugin loads on Node.

Why

loadRemoteModule in apps/web-bundle/src/loader.js rewrites only ./ and ../ specifiers to their children's blob URLs; anything else is left for the browser (if (!isRelative(spec)) return null). The module itself runs from a blob: URL, and a blob: base cannot resolve any relative reference:

new URL('/x.js', 'blob:http://localhost:8080/0b6e-uuid')  // throws ERR_INVALID_URL

Node's hook (apps/cli/remote-loader.js) resolves a root-relative specifier against the plugin's origin, so the two hosts disagree.

Notes toward a fix

Treat a specifier starting with / (but not //) like a relative one: new URL(spec, url) against the module's source URL, then load it through loadRemoteModule. An absolute https: specifier must stay untouched, as now; that is what gives a CDN module its real URL as identity.

Found while reviewing #93.

主要言語
TypeScript
スター
5
フォーク
2
平均マージ
1日 2時間
マージ済み PR(30日)
12

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

MatAtBread/matbot のほかの issue

MatAtBread/matbot の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。