I am using remix and just created the most basic project by running npx create-remix#latest. Right out the gate, I get this in my console when running npm run dev.
Warning: Extra attributes from the server: class
It goes away after removing the <Scripts /> tag, but I think I need that?
That's a React error, it happens when you're hydration a server-side rendered HTML but the HTML doesn't match what React expected it to be when hydrating.
The most common reason for this to happen is when a browser extension is changing the HTML before React hydration process run.
Removing the Scripts components hide the error because you're not hydrating React client-side anymore.
Related
when I finished my vuepress blog and deploy to my website. chrome console always print out the following error message . it's doesn't seem to affect function. but I want to fix it . how can I do ?
console error
Do you trying remove a node of DOM manually?
i.e. document.getElementById("any-element").removeChild("other-element");
You shoudn't to do this, because the Vue is resposible for handling DOM.
But if you need do something like that, you must to verify if the window object exist. Because when you build the Vuepress site, Node.js do a prerender of all HTML files and in this context the window object doesn't exist.
I have a React/apollo client and an apollo/neo4j backend application based on GRANDStack.
My React app runs on localhost:3000 and my GraphQL on localhost:4001/graphql, and they communicate without fail. All is working well in the app (with CORS enabled), but I wanted to implement testing with Cypress.
Should I expect Cypress to be able to observe the flow between React and GraphQL without error? Or is this beyond its capability?
What I've tried:
I set up Cypress and ran the following test:
it("Opens myPlan.", function() {
cy.visit("localhost:3000/myPlan");
cy.wait(6000);
});
At first cypress setup, my site loaded. One of the first things that the app does is graphql query a few values, and create a dropdown box based on those values. While this and all other graphql requests work fine in the browser, I get "{"graphQLErrors":[],"networkError":{"name":"ServerParseError","response":{},"statusCode":404,"bodyText":""},"message":"Network error: Unexpected end of JSON input"}" errors in cypress for the same code.
Presumably, the problem was because there are 2 endpoints, and cy.visit only allows one. I tried disabled ChromeWebSecurity and tried an "Access-Control-Allow-Origin-master" plugin.
Edit: I found someone that knew Cypress, and they suggested adding:
"proxy": "http://localhost:4001/",
to my react client config. This avoids the multi-port issues, and Cypress works.
Edit: I found someone that knew Cypress, and they suggested adding:
"proxy": "http://localhost:4001/",
to my react client config. This avoids the multi-port issues, and Cypress works.
I'm using Laravel Nova v1.1.4 within docker container.
I created a new tool via nova:tool command. Everything seems to be ok but everytime I update my vue component (tool.vue) the application does not display the updated data.
I run "npm run dev" from within /nova-components/myComponent/ directory, compiling is working fine but the application does not get updated.
My webpack.mix.js is the following:
let mix = require('laravel-mix')
mix.setPublicPath('dist')
.js('resources/js/tool.js', 'js')
.sass('resources/sass/tool.scss', 'css')
I think is a "refresh" problem, in fact after "npm run dev" execution if I stop and restart the docker containres and refresh the web page then it displays the updated information I included in the vue componenet of the custom tool.
Do yuo have any idea to avoid containers stop/start?
Any help will be great.
Thanks,
MaxdB71
You need to either disabled your cache in Chrome(or your browser of choice):
Or you need to implement versioning:
https://laravel.com/docs/5.7/mix#versioning-and-cache-busting
If you have not done implemented one of these solutions you will simply get served the same file over and over until your cache expires.
fetch started throwing "only absolute urls are supported" whenever my redux app was rendered on the server, but worked perfectly fine client-side. It also used to work for relative URLs so I don't know what went wrong.
Help?
It turns out I was no longer importing fetch from domain-task - somehow I had lost the following line:
import { fetch } from 'domain-task';
Since fetch is also native, the compiler didn't complain, and it worked client-side. This line fixed it for the server-side render.
Can someone help real quick. I'm trying to test something with Vue instance in console, but in console when I write $vm0 or $vm0.$children
Uncaught ReferenceError: $vm0 is not definedat :1:1
This only works if you have vue dev tools installed. Make sure you select the component first. It should look something like this:
Then you can inspect it in the console tab of chrome dev tools.
The question was initially asked for Vue2 I suppose, where you could use
$vm0.$route.query
to get access to various objects on the $vm0 Vue instance, here: router queries.
In Vue3, that one has changed in favor of
$vm0.proxy.$route.query