Mixing
Nuxt.js app doesn't load charts or maps when copying and pasting a link into a new browser tab, otherwise...
I have a Vue.js / Nuxt.js app running at https://sqwyre.com.
For a given user workflow:
- Search for something, e.g. Birmingham
- Click 'search' and get a list of results
- Click on anything, e.g. First entry, for University of Birmingham
- See the displayed report, which includes all charts:
- Alternatively, view the map:
That all works exactly as expected. However, if you were instead to copy and paste (or follow) the below urls you would not see the charts or the maps:
- Copying and pasting / clicking the report link in a new browser tab: https://sqwyre.com/location/E08000025/kVZIXpjqmJrfmLHdIG7FFS7C/
- The same happens with the link to the map view: https://sqwyre.com/map/E08000025/kVZIXpjqmJrfmLHdIG7FFS7C/
This behaviour is irrespective of browser (tested the above on Chrome, Edge and Firefox). The page, apart from displaying the loaded text, is entirely non-functional (links don't work, interactive behaviours do nothing).
Note, though, if you use the search url (https://sqwyre.com/search/?search=Birmingham) and click on the subsequent search result links, then reports display as expected.
The unexpected behaviour does not occur on test, only on build, and the only - rather obscure - error message I get is as follows:
> TypeError: "t is undefined" [nuxt] Error while initializing app
> DOMException: "Node cannot be inserted at the specified point in the
> hierarchy"
I don't have any 't' variables, so I'm assuming this has something to do with the way Nuxt loads its own javascript, but beyond that I'm at a complete loss as to where to start or how to describe the issue beyond this workflow.
I'm happy to provide additional info, code snippets, whatever, and would appreciate guidance on how to fix this.
javascript vue.js nuxt.js
asked Jan 2 at 17:17
TurukawaTurukawa
12719
add a comment |
I have a Vue.js / Nuxt.js app running at https://sqwyre.com.
For a given user workflow:
- Search for something, e.g. Birmingham
- Click 'search' and get a list of results
- Click on anything, e.g. First entry, for University of Birmingham
- See the displayed report, which includes all charts:
- Alternatively, view the map:
That all works exactly as expected. However, if you were instead to copy and paste (or follow) the below urls you would not see the charts or the maps:
- Copying and pasting / clicking the report link in a new browser tab: https://sqwyre.com/location/E08000025/kVZIXpjqmJrfmLHdIG7FFS7C/
- The same happens with the link to the map view: https://sqwyre.com/map/E08000025/kVZIXpjqmJrfmLHdIG7FFS7C/
This behaviour is irrespective of browser (tested the above on Chrome, Edge and Firefox). The page, apart from displaying the loaded text, is entirely non-functional (links don't work, interactive behaviours do nothing).
Note, though, if you use the search url (https://sqwyre.com/search/?search=Birmingham) and click on the subsequent search result links, then reports display as expected.
The unexpected behaviour does not occur on test, only on build, and the only - rather obscure - error message I get is as follows:
> TypeError: "t is undefined" [nuxt] Error while initializing app
> DOMException: "Node cannot be inserted at the specified point in the
> hierarchy"
I don't have any 't' variables, so I'm assuming this has something to do with the way Nuxt loads its own javascript, but beyond that I'm at a complete loss as to where to start or how to describe the issue beyond this workflow.
I'm happy to provide additional info, code snippets, whatever, and would appreciate guidance on how to fix this.
javascript vue.js nuxt.js
asked Jan 2 at 17:17
TurukawaTurukawa
12719
It seems like your data differs on server vs client. They should be same otherwise errors will happen.
– Aldarund
Jan 2 at 21:30
No, identical data, all accessed via the same API, so no variation. As mentioned, this isn't about pages not loading, it is about pages not loading if I gave you a link to follow.
– Turukawa
Jan 2 at 21:38
I am talking about data hydration. Vue hydrate data from server state to client state. And it should match. When it dont mathc such errors as on your page will be thrown
– Aldarund
Jan 2 at 21:47
OK, worth exploring, but how do I diagnose that with the error message I'm getting? And the map is really only a snippet of code to put a single coordinate on an OpenStreetMap view. Plus, why does it work one way, but not another? The context of the link is different, but it's still just a link.
– Turukawa
Jan 3 at 7:13
When you open link directly it do ssr rehydration, when u go via link this dont happen because server dont get hit. You can go to nuxt discord to discuss it
– Aldarund
Jan 3 at 9:51
add a comment |
I have a Vue.js / Nuxt.js app running at https://sqwyre.com.
For a given user workflow:
- Search for something, e.g. Birmingham
- Click 'search' and get a list of results
- Click on anything, e.g. First entry, for University of Birmingham
- See the displayed report, which includes all charts:
- Alternatively, view the map:
That all works exactly as expected. However, if you were instead to copy and paste (or follow) the below urls you would not see the charts or the maps:
- Copying and pasting / clicking the report link in a new browser tab: https://sqwyre.com/location/E08000025/kVZIXpjqmJrfmLHdIG7FFS7C/
- The same happens with the link to the map view: https://sqwyre.com/map/E08000025/kVZIXpjqmJrfmLHdIG7FFS7C/
This behaviour is irrespective of browser (tested the above on Chrome, Edge and Firefox). The page, apart from displaying the loaded text, is entirely non-functional (links don't work, interactive behaviours do nothing).
Note, though, if you use the search url (https://sqwyre.com/search/?search=Birmingham) and click on the subsequent search result links, then reports display as expected.
The unexpected behaviour does not occur on test, only on build, and the only - rather obscure - error message I get is as follows:
> TypeError: "t is undefined" [nuxt] Error while initializing app
> DOMException: "Node cannot be inserted at the specified point in the
> hierarchy"
I don't have any 't' variables, so I'm assuming this has something to do with the way Nuxt loads its own javascript, but beyond that I'm at a complete loss as to where to start or how to describe the issue beyond this workflow.
I'm happy to provide additional info, code snippets, whatever, and would appreciate guidance on how to fix this.
javascript vue.js nuxt.js
asked Jan 2 at 17:17
TurukawaTurukawa
12719
I have a Vue.js / Nuxt.js app running at https://sqwyre.com.
For a given user workflow:
- Search for something, e.g. Birmingham
- Click 'search' and get a list of results
- Click on anything, e.g. First entry, for University of Birmingham
- See the displayed report, which includes all charts:
- Alternatively, view the map:
That all works exactly as expected. However, if you were instead to copy and paste (or follow) the below urls you would not see the charts or the maps:
- Copying and pasting / clicking the report link in a new browser tab: https://sqwyre.com/location/E08000025/kVZIXpjqmJrfmLHdIG7FFS7C/
- The same happens with the link to the map view: https://sqwyre.com/map/E08000025/kVZIXpjqmJrfmLHdIG7FFS7C/
This behaviour is irrespective of browser (tested the above on Chrome, Edge and Firefox). The page, apart from displaying the loaded text, is entirely non-functional (links don't work, interactive behaviours do nothing).
Note, though, if you use the search url (https://sqwyre.com/search/?search=Birmingham) and click on the subsequent search result links, then reports display as expected.
The unexpected behaviour does not occur on test, only on build, and the only - rather obscure - error message I get is as follows:
> TypeError: "t is undefined" [nuxt] Error while initializing app
> DOMException: "Node cannot be inserted at the specified point in the
> hierarchy"
I don't have any 't' variables, so I'm assuming this has something to do with the way Nuxt loads its own javascript, but beyond that I'm at a complete loss as to where to start or how to describe the issue beyond this workflow.
I'm happy to provide additional info, code snippets, whatever, and would appreciate guidance on how to fix this.
javascript vue.js nuxt.js
javascript vue.js nuxt.js
asked Jan 2 at 17:17
TurukawaTurukawa
12719
asked Jan 2 at 17:17
TurukawaTurukawa
12719
asked Jan 2 at 17:17
TurukawaTurukawa
12719
asked Jan 2 at 17:17
TurukawaTurukawa
12719
asked Jan 2 at 17:17
TurukawaTurukawa
12719
12719
It seems like your data differs on server vs client. They should be same otherwise errors will happen.
– Aldarund
Jan 2 at 21:30
No, identical data, all accessed via the same API, so no variation. As mentioned, this isn't about pages not loading, it is about pages not loading if I gave you a link to follow.
– Turukawa
Jan 2 at 21:38
I am talking about data hydration. Vue hydrate data from server state to client state. And it should match. When it dont mathc such errors as on your page will be thrown
– Aldarund
Jan 2 at 21:47
OK, worth exploring, but how do I diagnose that with the error message I'm getting? And the map is really only a snippet of code to put a single coordinate on an OpenStreetMap view. Plus, why does it work one way, but not another? The context of the link is different, but it's still just a link.
– Turukawa
Jan 3 at 7:13
When you open link directly it do ssr rehydration, when u go via link this dont happen because server dont get hit. You can go to nuxt discord to discuss it
– Aldarund
Jan 3 at 9:51
add a comment |
It seems like your data differs on server vs client. They should be same otherwise errors will happen.
– Aldarund
Jan 2 at 21:30
No, identical data, all accessed via the same API, so no variation. As mentioned, this isn't about pages not loading, it is about pages not loading if I gave you a link to follow.
– Turukawa
Jan 2 at 21:38
I am talking about data hydration. Vue hydrate data from server state to client state. And it should match. When it dont mathc such errors as on your page will be thrown
– Aldarund
Jan 2 at 21:47
OK, worth exploring, but how do I diagnose that with the error message I'm getting? And the map is really only a snippet of code to put a single coordinate on an OpenStreetMap view. Plus, why does it work one way, but not another? The context of the link is different, but it's still just a link.
– Turukawa
Jan 3 at 7:13
When you open link directly it do ssr rehydration, when u go via link this dont happen because server dont get hit. You can go to nuxt discord to discuss it
– Aldarund
Jan 3 at 9:51
It seems like your data differs on server vs client. They should be same otherwise errors will happen.
– Aldarund
Jan 2 at 21:30
It seems like your data differs on server vs client. They should be same otherwise errors will happen.
– Aldarund
Jan 2 at 21:30
No, identical data, all accessed via the same API, so no variation. As mentioned, this isn't about pages not loading, it is about pages not loading if I gave you a link to follow.
– Turukawa
Jan 2 at 21:38
No, identical data, all accessed via the same API, so no variation. As mentioned, this isn't about pages not loading, it is about pages not loading if I gave you a link to follow.
– Turukawa
Jan 2 at 21:38
I am talking about data hydration. Vue hydrate data from server state to client state. And it should match. When it dont mathc such errors as on your page will be thrown
– Aldarund
Jan 2 at 21:47
I am talking about data hydration. Vue hydrate data from server state to client state. And it should match. When it dont mathc such errors as on your page will be thrown
– Aldarund
Jan 2 at 21:47
OK, worth exploring, but how do I diagnose that with the error message I'm getting? And the map is really only a snippet of code to put a single coordinate on an OpenStreetMap view. Plus, why does it work one way, but not another? The context of the link is different, but it's still just a link.
– Turukawa
Jan 3 at 7:13
OK, worth exploring, but how do I diagnose that with the error message I'm getting? And the map is really only a snippet of code to put a single coordinate on an OpenStreetMap view. Plus, why does it work one way, but not another? The context of the link is different, but it's still just a link.
– Turukawa
Jan 3 at 7:13
When you open link directly it do ssr rehydration, when u go via link this dont happen because server dont get hit. You can go to nuxt discord to discuss it
– Aldarund
Jan 3 at 9:51
When you open link directly it do ssr rehydration, when u go via link this dont happen because server dont get hit. You can go to nuxt discord to discuss it
– Aldarund
Jan 3 at 9:51
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54010529%2fnuxt-js-app-doesnt-load-charts-or-maps-when-copying-and-pasting-a-link-into-a-n%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54010529%2fnuxt-js-app-doesnt-load-charts-or-maps-when-copying-and-pasting-a-link-into-a-n%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
It seems like your data differs on server vs client. They should be same otherwise errors will happen.
– Aldarund
Jan 2 at 21:30
No, identical data, all accessed via the same API, so no variation. As mentioned, this isn't about pages not loading, it is about pages not loading if I gave you a link to follow.
– Turukawa
Jan 2 at 21:38
I am talking about data hydration. Vue hydrate data from server state to client state. And it should match. When it dont mathc such errors as on your page will be thrown
– Aldarund
Jan 2 at 21:47
OK, worth exploring, but how do I diagnose that with the error message I'm getting? And the map is really only a snippet of code to put a single coordinate on an OpenStreetMap view. Plus, why does it work one way, but not another? The context of the link is different, but it's still just a link.
– Turukawa
Jan 3 at 7:13
When you open link directly it do ssr rehydration, when u go via link this dont happen because server dont get hit. You can go to nuxt discord to discuss it
– Aldarund
Jan 3 at 9:51