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

指定した日時が今からどれくらい前かを簡単に出力できる「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

参考:githubイシューとプルリク

この警告については、githubでイシューが立てられています。

https://github.com/hustcc/timeago.js/issues/240

プルリクも出されているので、早く解決するといいですね。

https://github.com/hustcc/timeago.js/pull/256

現在、Webサイト改善のために、Google Analyticsによるアクセス分析を勉強しています!

以下のボタンが押された回数を計測中なので、良ければポチっと押していただけると嬉しいです!

\ ポチッと応援ありがとうございます!/

 

みんなにシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次