🙄

'html-webpack-plugin'を使用時の'Uncaught SyntaxError: Unexpected token <'

2022/12/21に公開

エラー内容

Uncaught SyntaxError: Unexpected token '<'
javascriptのエラーで意味としては「予期しないトークン」になる。
変な箇所に「<」があるよ！という意味になるのですが、コードを見てもどこにも<を使用していない。
もちろんHTMLファイルには使っていますが、そこにエラーはない状態。

事象

webpackを使用し、html-webpack-pluginを採用した。
htmlファイルを出力するようにすると、リロード時問題なく表示されるページとそうでないページのパターンが起こっていた。
devTool上に表示されているのは上記のエラーで、エラー箇所もindex.htmlの一行目

<!DOCTYPE html>

の行がって言われている状態でした。
そして、特定のページだけdevToolのソースにあるバンドルされたはずのcss、jsファイルの中身がindex.htmlと同じになっていた。

対応

最初に疑った記述の問題

まずはなんでもないページと問題の事象が起きるページが存在するのか調べた。
上記のエラー内容のように記述で見逃している部分があるかもしれないと思い、該当するコンポーネントやjsファイルに抜けがないか見てみた。
もちろんそのような怪しい箇所はなかった。

次に疑ったjsファイルへのパス

調べると出てきた記事でjsファイルのパスが間違えている可能性がある。ようなので、可能性が薄いが一応確認してみた。もちろんこれは以前のブランチから変更していない箇所なので問題なかった。

次に疑ったどのブランチで起きている事象なのか

以前、コンポーネントを大きく触るブランチがあったためにそこで起きていたのかと思い過去のブランチに切り替えてみた。
もちろんそこは確認しているので問題なかった。
そしていくつか試した後にたどり着いたのはwebpackでバンドルされたファイルにバージョンを一括管理したくて上記にある「html-webpack-plugin」を採用したブランチで起きていたところに行きついた。

原因

原因としては、採用したプラグインのバグのようでhtmlレンダリングの問題なようでした。

参考にしたページ

githubのissuesに該当するものが見つかった

結構な人が同じような問題にぶつかっていたみたい。

対策

上記URLにも記載されていますが

Try to add this <base href="/" /> to <head> of index.html.
Solution got from here
This is because of HTML rendering.
<base> is to set something like a root node.

「<base href=“/“ />」をindex.htmlに追加してみて！これはHTMLレンダリングが原因です。<base>はルートノードのようなものを設定することです。
とのことです。
コメントにもあったように、index.htmlのhead部分に「<base href=“/“ />」を追加してみました。
そうするとどのページでもリロードがエラーなく正常に表示されるようになりました。

まとめ

エラーの通りにカッコの開閉は問題なくjsファイルへのパスも問題なく、そんな中で解決にたどり着けたのは良かったです。
英語の記事で少し敬遠していた部分はありましたが、一通り調べても見当たらない場合はissuesを見ると解決まで一気に近づくなと改めて実感しました。
今後も今回のように記事が少なく困った事象をまとめていこうと思います。