dotenv inline comments are not supported

[Vyom-Yadav]

webpack.config.mjs:

import CopyWebpackPlugin from 'copy-webpack-plugin';
import webpack from 'webpack'
import Dotenv from 'dotenv-webpack';
import path from 'path';
import {fileURLToPath} from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const optionalPlugins = [];
if (process.platform !== "darwin") {
    optionalPlugins.push(new webpack.IgnorePlugin({resourceRegExp: /^fsevents$/}));
}

const serverConfig = {
    target: 'node',
    entry: './src/server.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.jsx'],
    },
    output: {
        filename: 'server.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, 'src/public'),
                    to: path.resolve(__dirname, 'dist/public'),
                    globOptions: {
                        ignore: ['**/*.ts', '**/*.js'],
                    },
                },
            ],
        }),
        new Dotenv({
            path: path.resolve(__dirname, '.env'),
            systemvars: true,
        }),
        ...optionalPlugins,
    ],
};

const clientConfig = {
    target: 'web',
    entry: './src/public/main.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.jsx'],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist/public'),
    },
};

export default [serverConfig, clientConfig];

.env

PORT=3000 # Optional: Defaults to 3000

$ npm start    

> [email protected] start
> node dist/server.js

{"level":"info","message":"File watcher started","timestamp":"2024-08-20T15:22:48.514Z"}
{"level":"info","message":"Server is running on port 3000 # Optional: Defaults to 3000","timestamp":"2024-08-20T15:22:48.517Z"}
{"level":"info","message":"Initial scan complete. Ready for changes","timestamp":"2024-08-20T15:22:48.524Z"}

$ ls -al                      
total 1400
srwxrwxr-x    1 vyom vyom       0 Aug 20 20:52 '3000 # Optional: Defaults to 3000'

Dependencies:

"dependencies": {                  
  "axios": "^1.7.4",               
  "chokidar": "^3.6.0",            
  "dotenv": "^16.4.5",             
  "express": "^4.19.2",            
  "fs-extra": "^11.2.0",           
  "got": "^14.4.2",                
  "lodash": "^4.17.21",            
  "multer": "^1.4.5-lts.1",        
  "nodemailer": "^6.9.14",         
  "p-retry": "^6.2.0",             
  "resumablejs": "^1.1.0",         
  "typescript": "^5.5.4",          
  "winston": "^3.14.2"             
},                                 
"devDependencies": {               
  "@types/express": "^4.17.21",    
  "@types/fs-extra": "^11.0.4",    
  "@types/got": "^9.6.12",         
  "@types/lodash": "^4.17.7",      
  "@types/multer": "^1.4.11",      
  "@types/node": "^22.3.0",        
  "@types/nodemailer": "^6.4.15",  
  "copy-webpack-plugin": "^12.0.2",
  "dotenv-webpack": "^8.1.0",      
  "nodemon": "^3.1.4",             
  "ts-loader": "^9.5.1",           
  "ts-node": "^10.9.2",            
  "webpack": "^5.93.0",            
  "webpack-cli": "^5.1.4"          
}                                  

---

It creates a file called 3000 # Optional: Defaults to 3000 and runs the server on that port. The dotenv version supports inline comments but this doesn't. Although this being a security risk is improbable but still, creating a file seems very risky.

cc @mrsteele