I have in my project the following vanilla JS files:-

1. Main
2. Constants
3. Game

Constants JS has a group of exported variables one of which is set via an ENV var which is used by Game JS(not Main).

On compile( webpack/ babel) the code is split into Main and Game and Main JS lazy loads game on demand.

My problem is if there is a line in Constants JS export const URL = process.env.VAR

While I can see the variable set in Main JS( which doesn't use it), URL is undefined in Game JS( which does use it )

How is this possible and can you explain what is happening here?

My webpack config for this is

,
  entry: {
    main: "./src/main.js"
  },
  output: {
    filename: 'build/[name].js',
    path: path.resolve(__dirname),
    publicPath: 'auto',
    assetModuleFilename: 'assets/[name][ext][query]'
  }
,
  optimization: {
      runtimeChunk: 'multiple',
      minimizer: [
        '...',
        new CssMinimizerPlugin()
      ]
  }

in Main JS I do the following

 import(/* webpackChunkName: "game" */ /* webpackPreload: true */ './game').then(module => {
     const initGame = module.default, ...

Game JS has

import { URL } from '../constants'
...

const initGame = () => {
...
fetch(URL... 

export default initGame