Links with params not working + some other links not being followed (only localhost:3000)

sage
,
1

I have a weird issue, most likely connected to local dev environment, likely browser-sync, not sure if it’s connected to sage local dev, hopefully someone had a similar issue already. Using Sage 9 with yarn/webpack.

For example, when clicking certain url in main menu, the page just refreshes, instead of following the url (same local site, different page), but after, say, 10 clicks, it finally opens the clicked url within my page (random number of clicks).

If URL is opened in new tab, it usually opens immediately.

Also, when params are present in url, most of the time it wont follow, for example:

  1. Currently you are on https://localhost:3000/search/findthis?posttypes=post
  2. Clicked link is https://localhost:3000/search/findthis?posttypes=event,post
  3. What happens is it just refreshes link from point 1. If i open in new tab, it does open it, but the query seems to be too long and I get Bad Gateway.

Also submitting a search form: it just refreshes where it should go to search results page.

Any ideas what could be causing these issues? It’s very annoying and can’t seem to figure out the culprit.
It might be related to config and proxy? I noticed that I do not have this problem when visiting my local devUrl (from config.json). But when on https://localhost:3000 (proxyUrl) this is happening …

Edit:

I believe the problem is, that I’m loading scripts and styles separately for most views, because I do not want ALL scripts to be combined in one huge one: you may not need most of the functionality on certain subpages etc. - and have probably done something that wasn’t meant to be done like this.
And example in my config.json is:

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "front": [
      "./scripts/front.js",
      "./styles/front.scss"
    ],
    "some-template": [
      "./scripts/some-template.js",
      "./styles/some-template.scss"
    ],
    "some-template-2": [
      "./scripts/some-template-2.js",
      "./styles/some-template-2.scss"
    ],
    "another": [
      "./scripts/another.js",
      "./styles/another.scss"
    ],
    "posts": [
      "./scripts/posts.js",
      "./styles/posts.scss"
    ],
    "login": [
      "./scripts/login.js",
      "./styles/login.scss"
    ],
    "events": [
      "./scripts/events.js",
      "./styles/events.scss"
    ],
    "faq": [
      "./scripts/faq.js",
      "./styles/faq.scss"
    ],
    "ifu": [
      "./scripts/ifu.js",
      "./styles/ifu.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]

and for example I always have problems getting to my /events page. It just wont go, unless I open in new tab.

Is it a name mismatch that is the problem?

events.js looks like this:

// import external dependencies
import 'jquery';

// https://github.com/kumarharsh/custom-event-polyfill for 
import 'custom-event-polyfill';

// Import everything from autoload
import './autoload/**/*'

// import local dependencies
import Router from './util/Router';
import postTypeArchiveEvent from './routes/post-type-archive-event';
import common from './routes/common';

/** Populate Router instance with DOM routes */
const routes = new Router({
  common,
  postTypeArchiveEvent,
});

// Load Events
jQuery(document).ready(() => routes.loadEvents());

but it’s called post.-type-archive-event.js in routes since that was the body class on that page.

Again, when /events is opened in new tab, all the functionality of the page works. It’s just annoying because on development it doesn’t want to go there most of the time.

Any help appreciated.