I know there is a lot of documentation online, and several questions related with this, but nothing seems to work.
I have a simple vanilla JS project, bundled with webpack.
This is my webpack.dev.js file:
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'development',
devtool: 'eval-source-map',
output: {
path: path.resolve('public'),
filename: 'dist/bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},
{
test: /\.svg$/,
use: 'file-loader',
},
],
},
plugins: [
new webpack.EnvironmentPlugin(['CUSTOM_PATH']),
],
devServer: {
static: './public',
},
};
This is my .env file:
CUSTOM_PATH=https://test.s3.us-west-2.amazonaws.com/test/dev/
And finally this is the script on my package.json
"start": "export $(xargs < ../.env) && webpack serve --open --config webpack.dev.js",
When I start the project, I got an error, saying process is not defined, when trying to do a simple console.log(process.env.CUSTOM_PATH)
Uncaught (in promise) ReferenceError: process is not defined
This will run on the browser, not in a node server.
What's missing? How can I build with an environment variable?
Ended up updating my webpack.dev.js to
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'development',
devtool: 'eval-source-map',
output: {
path: path.resolve('public'),
filename: 'dist/bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},
{
test: /\.svg$/,
use: 'file-loader',
},
],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
CUSTOM_PATH: JSON.stringify(process.env.CUSTOM_PATH)
}
}),
],
devServer: {
static: './public',
},
};
Without the JSON.stringify does not work for some reason, even if it's already a string.