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


Posted by urlun0404 on 2022-11-10

前幾天用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


#Webpack #note #problem #environment variable #environment #.env #env







Related Posts

React 中的性能優化

React 中的性能優化

[FE201] webpack 讓你把各種資源包在一起(繼續探索篇)

[FE201] webpack 讓你把各種資源包在一起(繼續探索篇)

Hoisting

Hoisting


Comments