0

I am using ASP.NET MVC and I have a javascript file in ~Scripts/bundle/build.js. The file is generated with webpack, which renders a bunch of ES6 javascript files in Scripts. I am loading bundle.js first and then calling the function in a different script like this:

// @Scripts.Render("~/bundles/Webpack")
<script src="~/Scripts/build/bundle.js"></script>
<script>
    connectToVnc();
</script>

(first line is commented, I have tried loading the script using bundles in BundleConfig.cs).

I get the error connectToVnc is not defined, even though it is defined in bundle.js.

What am I doing wrong?

A. Savva
  • 632
  • 10
  • 30
  • Is your `bundle.js` script successfully loaded in the browser? Check the browser's debugging tools to find out. – David Oct 27 '17 at 11:22
  • Does `connectToVnc` work in your console? – aaron Oct 27 '17 at 11:22
  • Webpack only loads the files as they are needed so although your function is in bundle.js, it may not have been loaded yet. You should be placing the function call in the correct script that is loaded by webpack – Pete Oct 27 '17 at 11:23
  • @David I can locate the script in "Sources" (Chrome). – A. Savva Oct 27 '17 at 11:29
  • @aaron no, that does not work either. – A. Savva Oct 27 '17 at 11:31
  • @Pete I need to call a method from the `.cshtml` file to pass a variable from the server. Is there no way to call the function in `bundle.js`? – A. Savva Oct 27 '17 at 11:31
  • Could you not load the variable into an element in the dom as a data-attribute? If not then the only way you could do it is to just put the function into a separate script and add it to the cshtml page manually – Pete Oct 27 '17 at 11:58
  • You can definitely call function from bundle.js. Check few things: 1) js path (scripts/build/bundle.js) is correct 2) check Network tab in chrome and if its loaded; check response tab to verify your function is in response; you have added function but browser renders old version from cache 3) As JS is case sensitive, verify the case of your function name. – Shah Oct 27 '17 at 12:57
  • @Shah all of that is correct. I see `bundle.js` both on the network and on the Sources in Chrome. The function is clearly and correctly defined in there. Are you sure about being able to call a function from `bundle.js`? – A. Savva Oct 27 '17 at 13:34
  • @Pete I will try sending the variable in data in html. – A. Savva Oct 27 '17 at 13:36
  • @A.Savva I'm just learning webpack myself so can't be more help but from what I have seen of it, I do a check for an element and if it exists, I require a script and that script usually does all the stuff I want for that element - for example, when I load an image carousel I'll do something like this: http://jsfiddle.net/uu1aga4t/ – Pete Oct 27 '17 at 13:44
  • already replied - check answer from @frxstrem [here](https://stackoverflow.com/questions/43285725/unable-to-access-function-bundled-by-webpack) – Shah Oct 28 '17 at 06:02
  • try to run code in $(document).ready() block. – MonkeyDLuffy Oct 30 '17 at 15:26

0 Answers0