javascript.netbundle

.Net 9 mvc production environment file not found in javascript bundle


In a .Net 9 MVC applcation, I use <environment> to include unbundled javascript files in the development environment, and a bundled of the minified version of the same files in the production environment. The unbundled files import several other javascript files. The application runs fine in the development environment, but the imported files are not found in the production environment. After bundling the additional imported files in the bundleconfig.json for the production environement, the app gets several "Identifier 'xxx' has already been declared" errors. How do I do import and bundle javascript files correctly to avoid identifier been redeclared errors?

<environment include="Production">

    @* production environment minified css*@
    @section MyStyles_prod {
        <link rel="stylesheet" href="~/css/snowAnimation.min.css" />
    }

    @* production environment bundled minified js*@
    @section MyScripts_block1_prod {
        <script type="module" src="~/js/questionBundle.min.js" asp-append-version="true" async></script>
    }
</environment>

<environment include="Development">
    @* development environment unminified css *@
    @section MyStyles_dev {
        <link rel="stylesheet" href="~/css/snowAnimation.css" />
    }

    @section MyScripts_block1_dev {
        <script type="module" src="~/js/app/commandBtns.js" asp-append-version="true" async></script>
        <script type="module" src="~/js/app/branching.js" asp-append-version="true" async></script>
        <script type="module" src="~/js/app/form.js" asp-append-version="true" async></script>
    }
</environment>

The bundleconfig.js has the main scripts in commandBtns.js, branching.js and form.js which import enums.js, userAnswer.js, utility.js, commonImport.js, and episodeScore.js. Some the common imports are declared in two of the main scripts.

[
  {
    "outputFileName": "wwwroot/js/questionBundle.min.js",
    "inputFiles": [
      "wwwroot/js/app/enums.js",
      "wwwroot/js/app/userAnswer.js",
      "wwwroot/js/app/utility.js",
      "wwwroot/js/app/commonImport.js",
      "wwwroot/js/app/episodeScore.js",
      "wwwroot/js/app/commandBtns.js",
      "wwwroot/js/app/branching.js",
      "wwwroot/js/app/form.js"
    ],
    "minify": {
      "enabled": false,
      "renameLocals": true,
      "sourceMap": true
    }
  }
]


Solution

  • After trying many bundling, I gave up using bundling and just use minify.

    <environment include="Production">
    
      @* additional production environment minified css*@
      @section MyStyles_prod {
      <link rel="stylesheet" href="~/css/snowAnimation.min.css" />
      }
    
      @* additional production environment javascript *@
      @section MyScripts_block1_prod {
      @* 
      <script type="module" src="~/js/questionBundle1.min.js" asp-append-version="true" async></script>
      <script type="module" src="~/js/questionBundle2.min.js" asp-append-version="true" async></script>
      *@
      <script type="module" src="~/js/app/commandBtns.min.js" asp-append-version="true" async></script>
      <script type="module" src="~/js/app/branching.min.js" asp-append-version="true" async></script>
      <script type="module" src="~/js/app/form.min.js" asp-append-version="true" async></script>
    
      <script type="text/JavaScript">
        window.onbeforeunload = function (e) { pageUnload(); };
            </script>
      }
    
    </environment>