[create-react-app] timeago.jsを使用すると”Failed to parse source map”の警告が出力される

2022 9/07

2022年9月7日 2022年9月7日

指定した日時が今からどれくらい前かを簡単に出力できる「timeago.js」をReactで使用したところ、サーバーを立ち上げたときに以下のような警告が出力されました。

Failed to parse source map from ‘/xxx/node_modules/timeago.js/src/format.ts’ file: Error: ENOENT: no such file or directory, open ‘/xxx/node_modules/timeago.js/src/format.ts’

WARNING in ./node_modules/timeago.js/esm/format.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from ‘/xxx/node_modules/timeago.js/src/format.ts’ file: Error: ENOENT: no such file or directory, open ‘/xxx/node_modules/timeago.js/src/format.ts’

この警告について記録したいと思います。

環境は以下の通りです。（なに記載するのが良いのか分からないので、とりあえず3つだけ記載します）

react: 18.2.0
react-scripts: 5.0.1
timeago.js: 4.0.2

警告の内容：ソースマップの作成に必要なファイルが見つからない

create-react-appで構築した環境では、デフォルトでビルド時にソースマップを作成します。

この警告は、ソースマップを作成するときに必要なファイルが見つからないという内容になります。

ソースマップ作成についての警告なので、アプリの動作自体に支障はなさそうです。

対処方法：警告無視 or ソースマップ作成を無効化 or webpack.config.jsで回避

警告を無視する

アプリの動作自体には支障は出ないものと思われるため、最も簡単な対処は「警告を無視する」になります。

ソースマップの作成を無効にする

ソースマップの作成時に警告が出力されるので、ソースマップの作成を無効化すれば警告は出力されなくなります。

SourceMapの作成を無効にするには、プロジェクトのpackage.jsonと同じフォルダに「.env」ファイルを作成して、以下の1行を記述します。（既に.envファイルが存在する場合は追記してください。）

GENERATE_SOURCEMAP=false

ソースマップが無くても困らない方、そもそもソースマップを作成したくない方は、こちらの対処が良いと思います。

webpack.config.jsで警告の出力を回避

webpack.config.jsが設定できる環境では、以下の設定をすると警告の出力を回避できるようです。
（私の環境ではwebpack.config.jsを設定できないので試していません。）

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: "pre",
        use: ["source-map-loader"],
      },
    ],
  },
  ignoreWarnings: [/Failed to parse source map/],
};

詳しい内容は以下のページをご確認ください。

https://webpack.js.org/loaders/source-map-loader/#ignoring-warnings