CRA－解決 source map 載入問題的 Warning

只是順手記一下。

簡述

在使用 create-react-app 時有時候會碰到某些套件的 source map 無法載入，所以編譯完後就會出現底下的 Warning 訊息：

WARNING in ./node_modules/@firebase/auth/dist/auth.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map …

總之這個解法有兩個：

1. 到 react-script 中設定 webpack config：

附註：路徑為 packages/react-scripts/config/webpack.config.js

    // Turn off performance processing because we utilize
    // our own hints via the FileSizeReporter
    performance: false,
    // 加上下面這段
    ignoreWarnings: [
      // Ignore warnings raised by source-map-loader.
      // some third party packages may ship miss-configured sourcemaps, that interrupts the build
      // See: https://github.com/facebook/create-react-app/discussions/11278#discussioncomment-1780169
      { message: /source-map-loader/ },
    ],
  };
};

2. 在根目錄下建立 .env 檔案：

GENERATE_SOURCEMAP=false

參考資源

• fix: ignore webpack warnings by source-map-loader
• Failed to parse source map