I am experiencing something in production which isn't reproducible locally.
The Link from nextjs (version 12.3.x) works well in development and when running the build in production mode locally, meaning that the navigation happens without a full page reload. But when deployed with terraform, all Link components are causing a full page reload. Everything else works as expected.
I have a mixture of Link children across the application, sometime it's a, but other times it's a button or simply a div or span. In every case, the full page refresh happens. That's why I suspect it must be something related with the configuration rather than the Link usage, however I am not sure where to start debugging and I am looking for a hint in the right direction.
Back with an answer to this. In my case, nothing was wrong with the Link components itself, nor with the build. The problem was with a path rewrite in our terraform configuration (it was rewriting everything in /_next/*).
It appears that getServerSideProps fetches JSON files which will be used to render the page Their paths were being re-written and causing a 403 error, which made the page reload instead of allowing me to navigate seamlessly as I am used to with next.
This problem was very specific to my configuration, but my general recommendation is to check whether you are rewriting any path of the json files created by next at navigation, in case you are experiencing the same problem only on staging/production.
Related
I've got a next.js (11) site that generates a bunch of SSG pages. Everything works great when I enter the site through the homepage, which is static and navigate to the SSG page.
BUT, if I go directly to the SSG page, nothing works. Javascript doesn't run. Events aren't attached. No errors. Just... dead except for the static content.
Am I missing something about how Next.js works here? Is there a way to force these pages to function when accessed directly?
The site is running on Netlify. All of this works locally but not in production.
The answer for posterity is that there's no reason it should act this way. It's a bug that results from minifying the Javascript on Netlify. Once I turned that off, everything behaved as expected.
Things I tried:
SSR instead of SSG... but that breaks Netlify redirects and is slower.
I also tried a trick I saw suggested to do a useEffect to set some unused key in state and force a rerender, but because Javascript was garfed, that didn't even fire.
Dynamic loading of modules. Also didn't work right with the minification in place.
Updates of all of my component modules-- including Next and the Netlify Next plugin.
Then, just by chance and desperation, I clicked off the post-processing minification button and everything started working again.
I have a nice html, css template (source code here).
I am going to use this template in my angular2 app (source code here).
I got the html template out of this repository (index.html).
My problem is in the angular2 source code
You need to clone the angular source.
Run npm install
Run ng serve
Unfortunatly, it seems that the <script src="assets/js/main.js"></script> in index.html is not added properly. Although, there is no error in the console, the left menu is broken. I know that this problem occurs when main.js is not fit.
Here is the correct html page:
Here is the angular page (broken header and menu):
The codes are identical, but I have decomposed the html template into 3 components (header, menu, and app (main content)).
Instead of trying to figure out what happened with your CSS, I took the original template, converted it to Angular 2 with the angular-cli, and fixed the CSS issues. It all works now, and the complete source is at https://github.com/Boyan-Kostadinov/angular2-miminium
When you broke apart index.html it's likely that you also altered some file paths.
The relative path would go from src="assets/js/main.js" to something like src="../assets/js/main.js".
Prepending ../ to the path will back out of the current directory to the next level up. As you have it now, the browser is looking for the assets directory in what I assume you have compartmentalized as an htmlComponents directory.
Consider using the absolute path to main.js, at least to diagnose the issue.
I ran into a similar issue with the same file. In my case, I have a complicated application that is developed in stages. I installed my Angular seed in a subdirectory. Because of my file structure, when I run npm start, the live server that is started has bad relative link locations. For example, in the screen shot below, you will see that the application is trying to find style.css at http://localhost:3000/medface/RecordWriter/styles.css; however, it should be looking at http://localhost:3000/styles.css, because the root of the web server that was created by npm start is at /medface/RecordWriter/.
With respect to your project. The key to finding the problem with your link is to open the developer panel and inspect the actual network request. If you share a screen shot, we may be able to help you inspect your instance with more insight.
What Worked for Me
In my case, I reconfigured my local web server to handle any unserved pages in the Angular2 folder and return the index instead. When I run npm start, I close the browser page that opens and use my regular web server. Instead of viewing my application on localhost:3000, I view my application at localhost/medface/RecordWriter/ (which is equivalent to localhost:80/medface/RecordWriter).
The down side to my makeshift approach is that the page must be refreshed before changes appear, but it loads all resources predictably and reliably, and allows my Angular2 code to run in conjunction with some of the older code base in other areas of the website that have not been converted to Angular2. Regardless, this may work for you also.
Perhaps someone can help me figure out what's going on.
I'm running VS 2013 and working on a Web Forms application (not an MVC app). I'm using the templates that came down, including all the cool FriendlyUrls functionality. I've been working on this website for several weeks without any problem.
Today, for no apparent reason, one of my pages stopped working. When I attempted to view it, I got an error message that the server was not configured to list directories. My web page does not attempt to list the contents of any directory. It just has some images and some relatively simple Javascript (which does not attempt to enumerate anything).
The error message suggested I run the following command in the IIS Express directory:
appcmd set config /section:system.webServer/directoryBrowse /enabled:true
Just for the sake of experimenting, I ran that command. Now when I attempt to view the page, I get something that looks like this (the page is named Menus.aspx)
localhost - /Menus/
[To Parent Directory]
Clicking on "To Parent Directory" takes me to the home page, as one might expect.
I created a new page, Menus2.aspx, and copied all of the code from Menus.aspx into Menus2.aspx, and Menus2 runs fine. In addition, when I upload the site to Azure, Menus works correctly (as does Menus2). So I think my code is innocent of any wrongdoing.
I then deleted Menus.aspx and renamed Menus2.aspx to Menus.aspx, and I'm back to the same problem.
I was working in a git branch, and reverted back to master to see if at least my original configuration would work, but now even in master I can't get the page to come up.
So it looks like the problem is that something got jacked up in my local configuration, but I can't for the life of me figure out what it is. I have exited VS and rebooted the machine in hopes that the problem will disappear as mysteriously as it started, but no luck.
Every other page in the site (6 so far) works fine. It's just this one, with this name.
So my options at this point are to simply not have a page named Menus.aspx in my project because the name has somehow become cursed, or do all of my testing by uploading to the server and seeing how it works up there, which is a pain and should not be necessary.
Can someone suggest how and where I should start looking for what happened here? This isn't the problem I expected to be working on today.
Thanks in advance.
-Rob
I'm currently viewing Codekit's preview link of my page in the browser. After saving changes to my CSS, Codekit will auto-refresh the browser and render the changes as expected - the first time only.
After saving another change to the CSS, Codekit fails to refresh the browser the second time. I suspect this has to do with the structure of my files in conjunction with my external server (MAMP).
Currently I've specified my the following as External Server Address http://localhost/
And have set the following as my Preview Subpath: /sw/?v=/car/create
Could it be, that only files in the document root auto-refresh every time changes are made but not those in the Preview Subpath?
Thanks in advance for any help!
I have weird CodeKit2 behavior too: any project autorefreshes fine when I put it to the ~/Desktop/myproject but fails to reload when I put it to the ~/Dropbox/oluckyman-air/Projects/Work/myproject folder.
Seems that length of the project path is affects the autoreload feature.
I had workaround this problem by moving my project to the ~/Projects/myproject folder.
Update:
As Bryan Jones says it’s actually a bug in OS X. See here for a list of ways to work around it: http://feedback.livereload.com/knowledgebase/articles/86239-os-x-fsevents-bug-may-prevent-monitoring-of-certai
I'm just starting to play with Durandal, using the starter kit. I've added a very simple new view/viewmodel combination (essentially a copy/paste of an existing one from the sample) and mapNav()'d the route.
The problem is happening when I try to refresh my browser...the new view simply does not appear. It's not in the nav bar, nor can I navigate directly to the view by typing in the address bar. I know the code is (or should be?!) correct because if I go to the page in a different browser, everything appears as it should.
Is there some browser caching that Durandal is doing somehow? Sometimes F5 or Ctrl+F5 works to refresh, sometimes it doesn't. I also can't deep-link to a specific 'page'. Ie:
http://localhost:52625/#/newpage just gives me a blank
What am I missing?
The option that I use in Chrome is to open developer tools and right-click on the refresh button. There is an option for 'Empty Cache and Hard Reload' which always fixes this issue for me. I don't know the equivalent in IE but try this and see if it fixes your issue.
Most browsers will cache modules returned via RequireJS, which is how Durandal obtains its modules and view models.
CTRL+F5 doesn't help because that just refreshes the initial page - all the modules are still requested using javascript (RequireJS), so they are usually pulled from cache first.
I've found it's best to disable caching in your browser's developer tools. Doing so will ensure that all network requests are loaded directly from the source and not from cache.
See this question for additional information: Debugging when using require.js cache
Another solution is configure RequireJS to set its urlArgs property: https://stackoverflow.com/a/8479953/91189
This solution works ok, but makes it harder to debug, at least in Chrome, because breakpoints are lost every time the module is loaded, since it's technically a different file being requested each time.