warning: DevTools failed to load SourceMap の対処

React + TypeSctipt + Webpackの環境構築を試しており、webpack-dev-serverを導入した際に、 DevTools failed to load SourceMapのWarningが出てきたので、動作的には問題ないですけど気になるので、その対処方法をメモしておきます。

解決のきっかけはここの issue のコメントにありました。「webpack.config.jsのdevtoolにinline-source-mapを入れればいけるよ」と。

確かにソースマップが見つからないと言われているので、devtoolに何かしらの値をセットし、ソースマップファイルを生成すればよかったですね。 今回はissueのコメント通りに、devtoolにinline-source-mapを指定しました。これでwarningが消えました。

module.exports = {
  // 省略
  devServer: {
    contentBase: `${__dirname}/dist`,
    port: 8080,
    open: true
  },
  devtool: 'inline-source-map',

};

devtoolにfalseやnoneを設定すると、ソースマップファイルは生成されないので、再びwarningが出ます。
ここに devtoolに設定できる値の一覧が掲載されています。環境に応じて、ソースマップの生成方法を選べるみたいです。
またこちらの記事ではもう少し詳しくdevtoolの設定内容について説明してくれています。