0

I'm having some trouble working with the Bigcommerce stencil framework locally. I can get everything running properly, but when the page loads I get the following error:

Uncaught TypeError: url.indexOf is not a function
    at jQuery.fn.init.jQuery.fn.load (eval at <anonymous> (bundle.js:1835), <anonymous>:9793:13)
    at Object.init (eval at <anonymous> (bundle.js:1907), <anonymous>:345:17)
    at HTMLDocument.eval (eval at <anonymous> (bundle.js:1907), <anonymous>:727:23)
    at Function.each (eval at <anonymous> (bundle.js:1835), <anonymous>:368:19)
    at jQuery.fn.init.each (eval at <anonymous> (bundle.js:1835), <anonymous>:157:17)
    at jQuery.fn.init.$.fn.foundation (eval at <anonymous> (bundle.js:1907), <anonymous>:726:17)
    at exports.default (eval at <anonymous> (bundle.js:2063), <anonymous>:6:14)
    at Global.loaded (eval at <anonymous> (bundle.js:2249), <anonymous>:99:34)
    at eval (eval at <anonymous> (bundle.js:1841), <anonymous>:718:13)
    at iterate (eval at <anonymous> (bundle.js:1841), <anonymous>:262:13)

I used this post jquery 3.0 url.indexOf error to change the $(window).load(function... to $(window).on('load', function... like it said and that seemed to fix the problem.

However, the bundle.js file get recreated everytime you load the page and it automatically generates $(window).load(function which is what is causing the problem.

Does anyone know where I can find where this is getting generated so i can make sure it loads the proper $(window).on('load', function... INSTEAD of the $(window).load(function...

Let me know if you need anything else.

Thank you.

**** Below was added 01-09-2017 ****

I had someone install stencil locally and download the theme onto their computer and they didn't get any errors, and the page was working perfectly fine. I had him upload the file in the bigcommerce backend and apply it to the store since it was now working. I then downloaded the theme that was now working, and ran it locally on my computer and am getting the error again. Since I'm getting the error with this theme and the other person isn't, I assume that one of libraries i'm using are old and need to be updated. What do you think?

Community
  • 1
  • 1
Jonathan
  • 141
  • 5
  • is using jQuery 3.0 required? –  Dec 30 '16 at 17:37
  • Seems like source maps are not working for you. Can you try changing `eval-cheap-module-source-map` to `source-map` in `webpack.conf.js` file? and re-run `stencil start` – Mario Campa Jan 06 '17 at 20:31
  • RootBearFloat, with stencil, you need to install a jquery library from github, so i downloaded the same one bigcommerce tells you to download. "https://stencil.bigcommerce.com/docs/customizing-javascript#InstallLibs" Hey Mario. Thanks for the suggestion. I went into the stencil folder, opened the webpack.con.js file, changed the value of "devtool" from "eval-cheap-module-source-map" to "source-map", re-ran stencil start, but am still getting that same error. Thank you guys for trying to help though. i greatly appreciate it. – Jonathan Jan 09 '17 at 17:13
  • Can you explain what you are trying to do in greater detail? That might help come to a different solution – Alyss Jan 09 '17 at 17:53
  • Hey Alyss, I'm developing a site locally and came across this error a few days before i posted this question. Before, it was running perfectly fine and then I started getting that error every time the page loads. When i open `bundle.js` and do a search for `$(window).load` there is one result. I change that to `$(window).on('load',` and refresh the page, then I no longer get the error. However each time the theme is bundle or i run `$ stencil start` it the bundle.js file gets rebuilt. – Jonathan Jan 09 '17 at 18:11
  • You don't suppose to edit the bundle file directly. That is generated by webpack (do a little read on how webpack works https://webpack.github.io/docs/what-is-webpack.html). You should also enable source maps in your browser so you can see where the error is triggered in your source files (not the `bundle.js`). If you just trying to add a small script that will be loaded on every page, add it to `assets/js/app.js` and webpack will bundle it in to the `bundle.js` file – Mario Campa Jan 09 '17 at 18:35

1 Answers1

0

Thank you everyone for your help. Since I was getting the error and the person who freshly installed stencil offline today wasn't, I assumed it had something to do with my dependencies being out of date. I did the following and it solved the problem:

  1. open git bash in the stencil directory
  2. run npm install && jspm install
  3. run stencil init
  4. after stencil init runs, navigate to /assets/js and delete the bundle.js file.
  5. rerun stencil init
  6. run stencil start
Jonathan
  • 141
  • 5