#StackBounty: #javascript #typescript #webpack Webpack 4.44.2 loads modules statically instead of requested dynamic loading

Bounty: 50

Project

enter image description here

FrontendLogicPreProcessingTesting.ts

(function executeApplication(): void {
  const loadDataButton: HTMLElement | null = document.getElementById("LoadDataButton");
  if (loadDataButton !== null) {
    loadDataButton.addEventListener("click", async () => {
      const loadedValue: string = await loadDataOnDemand();
      console.log(loadedValue);
    });
  }
})();


async function loadDataOnDemand(): Promise<string> {

  const MODULE: { default: string; DYNAMICALLY_LOADED_CONST_FROM_TS_MODULE: string; } =
      await import("./DynamicLoadingTesting/TypeScriptModuleForDynamicLoading");
  return MODULE.DYNAMICALLY_LOADED_CONST_FROM_TS_MODULE;
}

TypeScriptModuleForDynamicLoading.ts

const DYNAMICALLY_LOADED_CONST_FROM_TS_MODULE_BY_DEFAULT: string =
    'I was dynamically loaded from TS module by default!';
export default DYNAMICALLY_LOADED_CONST_FROM_TS_MODULE_BY_DEFAULT;

export const DYNAMICALLY_LOADED_CONST_FROM_TS_MODULE: string =
    'I was dynamically loaded from TS module!';

It seems like button’s click event handler works correclty:

enter image description here

But the module TypeScriptModuleForDynamicLoading.ts has not been loaded dynamically. It has been bundled to FrontendLogicPreProcessingTesting.js:

enter image description here

My Webpack config:

{

  name: 'FrontendLogicPreProcessingTesting',
  context: 'D:\XXXXX\00-Source\FrontendLogicPreProcessingTesting',
  target: 'web',

  entry: {
    FrontendLogicPreProcessingTesting: 'D:/IntelliJ IDEA/InHouseDevelopment/Hikari-Monorepo/ProjectsForFunctionalTesting/ProjectBuildingCommonTest/00-Source/FrontendLogicPreProcessingTesting/FrontendLogicPreProcessingTesting.ts'
  },

  output: {
    path: 'D:\XXXXX\01-DevelopmentBuild\FrontendLogicPreProcessingTesting',
    publicPath: './',
    filename: '[name].js',
    chunkFilename: 'load_on_demand/partial__[id].js'
  },

  mode: 'development',
  watch: true,
  devtool: 'eval',
  module: {
    rules: [/* ... */]
  },
  resolve: {
    extensions: [ '.mjs', '.js', '.ts' ],
    alias: { vue: 'vue/dist/vue.common.js' }
  },
  optimization: { minimize: false, noEmitOnErrors: false }
}

My public path is './' because I need the dynamical loading works without development server, just by opening the HTML file. I used relative public path before, but now there is the another error somewhere.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.