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

Unable to parse webpack source URLs, how to work around around?

オープン
#500 コメント 3 件 リアクション 0 件 担当者 0 名 GitHub で見る

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

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
25/100
issue の種類
バグ
明瞭さ
説明が足りない
活発さ
停滞
技術スタック
javascript, typescript
領域
tooling

調査の方向性

lib/util.js の 181 行目付近にある失敗するパスから始め、次に source-map-consumer.js の 206-207 行目付近にあるその呼び出し元と、提供された webpack source-map の例を追ってください。提供された TypeScript コードで URL の解析エラーを再現し、解析されたソースがどのように computeSourceURL に渡されるかを調べてください。webpack の source URLs が報告された decode エラーを引き起こさなくなれば完了です。

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

説明

It looks like it's failing right here:

https://github.com/mozilla/source-map/blob/60adcb064bf033702d954d6d3f9bc3635dcb744b/lib/util.js#L181

I have this code for parsing the string sourcemap from a JS file, but it's not working:


const CACHE: Record<string, SourceMapConsumer> = {}

async function loadFile(
  line: string,
): Promise<SourceMapConsumer | void> {
  const link = CACHE[`${line}`]
  if (link) {
    return link
  }

  const res = await fetch(line)
  const text = await res.text()
  const last = text.trim().split('\n').pop() ?? ''
  console.log(text)
  console.log(last)
  if (
    last.match(
      /(\/\/# sourceMappingURL=data:application\/json;charset=utf-8;base64,)/,
    )
  ) {
    console.log(last.slice(RegExp.$1.length))
    const json = JSON.parse(
      atob(last.slice(RegExp.$1.length)),
    ) as RawSourceMap
    json.sources.forEach((source, i) => {
      json.sources[i] = source.replace(/^webpack:\/\//g, 'http://')
    })
    console.log(json)

    const sm = await new SourceMapConsumer(json)
    CACHE[`${line}`] = sm
    return sm
  }
}

async function readFileLocation(
  file: string,
  line: number,
  rise: number,
): Promise<[string, number | undefined, number | undefined]> {
  const link = await loadFile(file)

  const trace = {
    column: rise,
    filename: file,
    line: line,
  }

  if (link) {
    const token = link.originalPositionFor(trace)
    if (token.source) {
      return [
        token.source,
        token.line == null ? undefined : token.line,
        token.column == null ? undefined : token.column,
      ]
    } else {
      return [file, line, rise]
    }
  } else {
    return [file, line, rise]
  }
}

export async function testSourceMaps(error: Error): Promise<string> {
  const stack = getFileLineColumn(error.stack?.split('\n') ?? [])
  const list: Array<string> = []

  for (const data of stack) {
    const [file, line, column] = await readFileLocation(
      data.file,
      data.line ?? 0,
      data.column ?? 0,
    )

    console.log(file, line, column)
  }
}

As you can see in the example, I tried to replace webpack:// with http:// but it didn't seem to help:

json.sources[i] = source.replace(/^webpack:\/\//g, 'http://')

How do I get this working, any suggestions? The error I'm getting is:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'decode')
    at new URLStateMachine (url-state-machine.js:546:1)
    at module.exports.basicURLParse (url-state-machine.js:1264:1)
    at new URLImpl (URL-impl.js:13:1)
    at Object.setup (URL.js:317:1)
    at new URL (URL.js:26:1)
    at util.js:179:1
    at Object.computeSourceURL (util.js:431:1)
    at source-map-consumer.js:207:1
    at Array.map (<anonymous>)
    at source-map-consumer.js:206:1

The JSON looks liek this when I parse the sourcemap in this fashion:

Screenshot 2024-02-20 at 11 58 14 AM

Any help would be greatly appreciated. Thank you.

主要言語
JavaScript
スター
3.7k
フォーク
370
PR マージ指標
30日以内にマージされた PR はありません

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

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

mozilla/source-map のほかの issue

mozilla/source-map の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

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

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