[Note] webpack5 problem: Environment Variable (.env)

前幾天用webpack(version: 5.74.0)載入 .env 檔案一直出現「"process is not defined" error」的錯誤，也是先速速記錄一下解決辦法。

先說結論 官方文件用的 Dotenv Plugin 方法 救了我：

1. npm i -D dotenv-webpack (version: 8.0.1)

2. .env 和 webpack.config.js 檔案：

    // .env
    REACT_APP_THIRD_PARTY_KEY = '...'
   
    // webpack.config.js
    module.exports = {
        plugins = [
            new Dotenv({
                path: './.env',
                safe: true,
            }),
        ]
    }
   

   
   
   

然後以下官方和stackoverflow討論很熱烈的方法全都不適用我的情況orz

1. Environment Plugin
2. Define Plugin

3. Process：要先安裝 process npm i -D process

    // webpack.config.js
    const webpack = require('webpack');
   
    module.exports = {
        // ...
        plugins: [
            // ...
            new webpack.ProvidePlugin({
                process: 'process/browser',
            }),
        ],
        // ...
   
        // 另一位網友說要再加入alias
        resolve: {
            alias: {
                process: "process/browser"
            }
        },
    }
   

4. 第三方套件 - Dot Env 的另一種引入方式：

    // webpack.config.js
    const webpack = require('webpack')
    const dotenv = require('dotenv')
   
    dotenv.config();
   
    module.exports = {
        // ...
        plugins: [
            // ...
            new webpack.DefinePlugin({
               'process.env': JSON.stringify(process.env)
            })
        ],
    }
   

這些解法的來源出處都放在References，若需要試其他方法可以看看。

此外，若有動到 webapck.config.js 檔案，最好都要關閉webpack dev server再重新開啟看問題是否解決。

References
EnvironmentPlugin @webpack
DefinePlugin @webpack
Webpack: Bundle.js - Uncaught ReferenceError: process is not defined
Webpack 5 - Uncaught ReferenceError: process is not defined