webpack5 issue: Environment Variable (.env)
前幾天用webpack(version: 5.74.0)載入 .env
檔案一直出現「"process is not defined" error」的錯誤,也是先速速記錄一下解決辦法。
先說結論 官方文件用的 Dotenv Plugin 方法 救了我:
npm i -D dotenv-webpack
(version: 8.0.1).env 和 webpack.config.js 檔案:
// .env REACT_APP_THIRD_PARTY_KEY = '...' // webpack.config.js module.exports = { plugins = [ new Dotenv({ path: './.env', safe: true, }), ] }
然後以下官方和stackoverflow討論很熱烈的方法全都不適用我的情況orz
- Environment Plugin
- Define Plugin
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" } }, }
第三方套件 - 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