Error thrown when using a module loader

[kiogo]

Hello, I'm getting an error when clicking a link with data-scroll applied:
Uncaught TypeError: Cannot read property 'hostname' of undefined

Installed via Bower.

Link HTML looks like:
Clients

Init looks like:
smoothScroll.init({
selector: 'a[href^="#"]'
});

Any ideas?

[cferdinandi]

Link to working site please.

[kiogo]

Unfortunately in local dev at this point.

[cferdinandi]

Only one place in the code references hostname, and Cannot read property 'hostname' of undefined implies that the element in question doesn't exist. However, before checking for the hostname, there's a check to make sure the element itself is found, so this error simply shouldn't exist.

Unfortunately, without a working site for me to look at, there's not much I can do. Closing this until such a time that you can provide a reduced test case to look at.

[adamgrossman]

Hi @cferdinandi I'm getting the same issue as above. You can go to https://farewell.io/why_it_works and click on one of the superscript numbers in the section "We Know". If you open the console you will see Cannot read property 'hostname' of undefined and smooth-scroll not working as intended. The line number that is failing is 446 in smooth-scroll.js, where root.location seems to be undefined.

Smooth scroll works locally, however on the production site it does not. The reason is, we are using uglifier (https://github.com/lautis/uglifier) in order to compress all of our javascript. I'm able to reproduce this locally by switching between compressing and not compressing, so I believe this is the issue.

Have you come across this issue? Do you have any ideas? Thanks!

[cferdinandi]

The minified version of Smooth Scroll included in dist is minified with UglifyJS (same as what you're using). Furthermore, I've bundled the script with other files and run it through the same process without issue.

I'm not sure what about your configuration or settings is causing the issue.

Smooth Scroll uses valid JS, and this strikes me as an issue with the minifier. As a result, I can't offer support here. Sorry.

[jochensengier]

We've had the same issue and fixed it by copying the source file from node_modules\smooth-scroll\src\js\smooth-scroll.js to our local resources/js folder and changing the require code in our app.js file. Allowing our own Gulp task to minify and uglify the source file.

Change:

require( 'smooth-scroll' ).init();

To:

require( './path/to/smooth-scroll.js' ).init();

Beats the purpose of NPM offcourse, but allows you to continue to use smooth-scroll instead of switching to a non-vanilla alternative which requires more setup.

[cferdinandi]

@celcius-jochen This script is not hosted on NPM, so there's a chance the version you're referring to/using is something different.

[jochensengier]

My mistake, I should have written 'using a package manager like NPM' instead of just 'NPM'.
We've always used the version located at github:cferdinandi/smooth-scroll

[cferdinandi]

All good. I'm still confused about why this is happening, though.

[stevegraham]

I'm getting this error in production too. root is the number 0 for me in prod. Using Brunch.

[stevegraham]

I can trigger this locally by doing brunch build --production

[cferdinandi]

root should be window Hmm... can anyone share a link I can access to see this in action?

[cferdinandi]

Alright so here's the deal: I need a reduced test case for this. If someone can provide me with a site that includes only the bare minimum needed to make this failure occur, I can take a look.

The only link provided above contains an insane amount of code, which makes it near impossible to do any proper debugging.

Furthermore, the included minified version of this package uses JSHint, so I'm not sure why minification would be the problem unless your minifiers are stripping out the UMD wrapped neccessary for loading with modules.

[cferdinandi]

Question: Are you guys all minifying before or after you combine/concatenate your files? Looks like minifying first can cause some issues: kof/node-ams#3

[cferdinandi]

In absence of a reduced test case, and due to my inability to replicate, I'm closing this issue.

I've successfully used this with a minifier without issue, which leads me to believe it's a third-party implementation issue.

If anyone can produce a reduced test case I can look at, I'm happy to reopen.

[hakib]

I have the same problem:

bundle.min.js:1 Uncaught TypeError: Cannot read property 'hostname' of undefined
    at HTMLDocument.x (bundle.min.js:1)
 I tried creating a reduced test case but I was unable to reproduce on a clean project.

I've setup a repo using rollup and uglifyjs with my attempt at reproducing the problem.

I was unable to reproduce the problem in a clean project, so if anyone thinks he can feel free to use what I started.

[lonelyalien]

This is a weird issue, and I'm also experiencing it. For some reason, a combination of using the already minified version together with an Uglify.js workflow generates wrong variables names. Anyway, a quick fix is to just integrate the non-minified version and let your own workflow do it's thing.

[ipmb]

FWIW, I saw this issue with uglifyjs v1, but not after I upgraded to uglifyjs v3

[jochensengier]

I can confirm @ipmb comment about uglifyjs v3

[cferdinandi]

Again: reduced test case I'm an idiot who can't read properly

[jochensengier]

@cferdinandi my apologies if I've hit a nerve with my comment, but I was just confirming that it works with uglifyjs v3, so it was probably never an issue with Smooth-Scroll in the first place...

[cferdinandi]

@celcius-jochen No, I'm sorry! I'm an idiot, read your message wrong, and acted like an asshole. Thanks for confirming that the issue has been resolved in v3!

Note to self: don't open source before having my morning coffee!