Hamburger Toggle, Scroll to Top, Dropdowns

Question

Hamburger Toggle, Scroll to Top, Dropdowns

Chelsea-Crank opened this issue 3 years ago · comments

#679 (comment)
I'm having these exact issues, but the issue has been closed

Is this a BUG REPORT or FEATURE REQUEST?:
bug

What happened:
Hamburger toggle doesn't open nav
ScrollToTop Button not working
Dropdowns aren't expanding, arrow appears but doesn't work

In the demo the bugs are also present.

What you expected to happen:
The menu should open and the button should scroll me to the top of the page.

How to reproduce it (as minimally and precisely as possible):
I tried starting with stater-syna, also cloning theme into new hugo site build

Anything else we need to know?:
No.

Environment:

Syna Theme version: Latest commit [fdf58d9]

Hugo version: v0.81.0-59D15C97+extended windows

Others: -

Michael Grosser · Answer 1 · Sat Mar 06 2021 04:41:38 GMT+0800 (China Standard Time)

I can't seem to reproduce this in the demo as well as any other production site I am running.

Do you have a link to a project that has this issue?
Is JavaScript enabled in the browser or any blocker extensions that could interfere?
What specific version are you running?

Chelsea-Crank · Answer 2 · Sun Mar 07 2021 00:03:31 GMT+0800 (China Standard Time)

https://github.com/Chelsea-Crank/prln
https://chelsea-crank.github.io/

JS is enabled, no blockers.

The latest version for Syna.

Chelsea-Crank · Answer 3 · Sun Mar 07 2021 07:03:56 GMT+0800 (China Standard Time)

version = "0.17.3" (from config.toml)

Chelsea-Crank · Answer 4 · Sun Mar 07 2021 23:26:12 GMT+0800 (China Standard Time)

The installation using the starter git clone --recurse-submodules https://git.okkur.org/syna-start
produces the same results of the scroll to top not working and hamburger not working.

Also throws same errors in chrome inspection (not sure if the errors are related to my particular problem just thought I would mention it)
Uncaught ReferenceError: webpack_require is not defined
at eval (index.js:1)
at Object../assets/js/index.js (syna-main.min.0fee75bda576b036c6916366c93862bee0f9e51fac1be5360918faac938026cb.js:1)
at a (syna-main.min.0fee75bda576b036c6916366c93862bee0f9e51fac1be5360918faac938026cb.js:1)
at syna-main.min.0fee75bda576b036c6916366c93862bee0f9e51fac1be5360918faac938026cb.js:1
at syna-main.min.0fee75bda576b036c6916366c93862bee0f9e51fac1be5360918faac938026cb.js:1
hero.js:1 Uncaught ReferenceError: webpack_require is not defined
at eval (hero.js:1)
at Object../assets/js/hero.js (syna-hero.min.85d9e7e9b58c4a3f62475a9264233e5ec9b087d771e22ec4b6ed5abda77e3bae.js:1)
at a (syna-hero.min.85d9e7e9b58c4a3f62475a9264233e5ec9b087d771e22ec4b6ed5abda77e3bae.js:1)
at syna-hero.min.85d9e7e9b58c4a3f62475a9264233e5ec9b087d771e22ec4b6ed5abda77e3bae.js:1
at syna-hero.min.85d9e7e9b58c4a3f62475a9264233e5ec9b087d771e22ec4b6ed5abda77e3bae.js:1
contact.js:1 Uncaught ReferenceError: webpack_require is not defined
at eval (contact.js:1)
at Object../assets/js/contact.js (syna-contact.min.25978065e5e56c1e570de0c4989574b57b3391494d02e678b275ba5b27931224.js:1)
at a (syna-contact.min.25978065e5e56c1e570de0c4989574b57b3391494d02e678b275ba5b27931224.js:1)
at syna-contact.min.25978065e5e56c1e570de0c4989574b57b3391494d02e678b275ba5b27931224.js:1
at syna-contact.min.25978065e5e56c1e570de0c4989574b57b3391494d02e678b275ba5b27931224.js:1

Kevin Truong · Answer 5 · Mon Mar 08 2021 00:20:22 GMT+0800 (China Standard Time)

The same here. with syna theme 0.17.04

Kevin Truong · Answer 6 · Mon Mar 08 2021 01:14:25 GMT+0800 (China Standard Time)

@stp-ip @Chelsea-Crank
I trying to debug the issue.
But look like the issue is about hugo compatible rather than the syna issue itself.
@Chelsea-Crank please back to hugo version 0.76.5. you can see the issue is gone.
But with the latest hugo version 0.80 look like we will see the issue above.
Thanks

Michael Grosser · Answer 7 · Mon Mar 08 2021 01:19:32 GMT+0800 (China Standard Time)

Are you both using Hugo or Hugo extended?
In theory both should work, but the demo is using extended. So might be an angle to look into as well. 🤔

Kevin Truong · Answer 8 · Mon Mar 08 2021 01:25:03 GMT+0800 (China Standard Time)

hugo standalone.
Yes. I think we need to check the hugo extended also.

Chelsea-Crank · Answer 9 · Mon Mar 08 2021 02:46:55 GMT+0800 (China Standard Time)

Hooray! Thank you, gone back to 0.76.5.

Kevin Truong · Answer 10 · Mon Mar 08 2021 23:27:58 GMT+0800 (China Standard Time)

hi @stp-ip ,
Would you love to look into the contact form please ? I found that with the version 0.76.5
look like contact form can not work well
I already checked with hugo extended , the same issue with hugo standalone

DevTools failed to load SourceMap: Could not load content for webpack:///node_modules/form-validator-simple/dist/bundle.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Already check with 0.80 the contact form work well but fail in another module like report above

cc @Chelsea-Crank please help on double check on your contact form

Michael Grosser · Answer 11 · Mon Mar 08 2021 23:36:36 GMT+0800 (China Standard Time)

hi @stp-ip ,
Would you love to look into the contact form please ? I found that with the version 0.76.5
look like contact form can not work well
I already checked with hugo extended , the same issue with hugo standalone
DevTools failed to load SourceMap: Could not load content for webpack:///node_modules/form-validator-simple/dist/bundle.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
Already check with 0.80 the contact form work well but fail in another module like report above

cc @Chelsea-Crank please help on double check on your contact form

This is a separate issue so please open up a new issue.
Additionally a source map does not affect the contact form it is mainly there for easier debugging. Still something to fix, but not a production issue.

Kevin Truong · Answer 12 · Mon Mar 08 2021 23:41:17 GMT+0800 (China Standard Time)

@stp-ip not really. I can see here that my form can not be processed.
And how can you explain about the result is so different between 0.80 and 0.76 version.
In 0.80 version , the form can send out perfect. But not in 0.76. Please , it is true here.

Kevin Truong · Answer 13 · Mon Mar 08 2021 23:44:18 GMT+0800 (China Standard Time)

the error with hugo 0.76 here when i submit a form

DevTools failed to load SourceMap: Could not load content for webpack:///node_modules/form-validator-simple/dist/bundle.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for http://localhost:1313/style.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
VM56:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.xhr.onreadystatechange (VM41 jq-helpers.js:169)
xhr.onreadystatechange @ jq-helpers.js:169
XMLHttpRequest.send (async)
ajax @ jq-helpers.js:164
$.post @ jq-helpers.js:179
onSuccess @ contact.js:44
eval @ bundle.js:106

Michael Grosser · Answer 14 · Tue Mar 09 2021 00:12:42 GMT+0800 (China Standard Time)

The specific webpack isn't defined error is a webpack incompatible change and I'm looking into this.

Kevin Truong · Answer 15 · Tue Mar 09 2021 00:16:35 GMT+0800 (China Standard Time)

@stp-ip
More information here, The issue happened when the syna theme is master branch.
When I checked with the v0.17 tag. Then everything is fine.
Thanks for your hard working.

Chelsea-Crank · Answer 16 · Tue Mar 09 2021 01:02:12 GMT+0800 (China Standard Time)

My contact form is functional, I'm able to tie it google backend, and response goes through.