🐡

importmapのオブジェクト定義に末尾カンマを使うとエラーが発生する

2024/03/25に公開

JavaScript

esm

importmap

tech

ブラウザ上で外部のESMをインポートする時にimportmapを定義することで、エイリアスを指定することができます。

例えば、次のように書くことでCDNからの読み込みのURLをエイリアスとして定義できます。

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js"
    }
  }
</script>
<script type="module">
  import { LitElement } from "lit";
</script>

末尾カンマを使うとエラーになる

末尾カンマを使うと、Uncaught SyntaxError: Failed to parse import map: invalid JSONのエラーが発生します。

エラー内容でも書いてありますが、importmapの定義はオブジェクトリテラルではなくJSONのため末尾カンマを使うことができませんでした。

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js",
    }
  }
</script>
<script type="module">
  import { LitElement } from "lit";
</script>

末尾カンマを使うとエラーになる

Discussion