| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>animateMotion</title> | |
| </head> | |
| <body> | |
| <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> | |
| <path fill="none" stroke="gray" d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" /> |
If you're upgrading to React 18 and have run into the following error.
Text content does not match server-rendered HTMLThis post should help explain what causes the error, and a couple of solutions.
I recently ran into this issue myself when building this demo for the following blog post:
| 12:58:34 PM: | |
| From https://github.com/PaulieScanlon/paulie-dev-2019 | |
| * branch main -> FETCH_HEAD | |
| 12:58:34 PM: | |
| Your branch is up to date with 'origin/main'. | |
| 12:58:34 PM: | |
| HEAD is now at ebcdf21 chore: upgrade to Gatsby 5 (#81) |
| 10:47:26 AM: | |
| Cloning into '/usr/src/app/www'... | |
| 10:47:27 AM: | |
| Using default node version: 14 | |
| 10:47:31 AM: | |
| yarn install v1.22.19 | |
| 10:47:31 AM: |
| ... | |
| export default async function handler(req, res) { | |
| ... | |
| try { | |
| ... | |
| ... | |
| export default async function handler(req, res) { | |
| ... | |
| try { | |
| ... | |
| const { GoogleSpreadsheet } = require('google-spreadsheet'); | |
| const doc = new GoogleSpreadsheet(process.env.GOOGLE_SHEET_ID); | |
| export default async function handler(req, res) { | |
| const { | |
| query: { id } | |
| } = req; | |
| try { |
| npm install google-spreadsheet |
| import React, { Fragment, useState } from 'react'; | |
| ... | |
| const Page = () => { | |
| ... | |
| - return | |
| + return ( |
| import React, { useState } from 'react'; | |
| ... | |
| const Page = () => { | |
| ... | |
| + const handleClick = async (id) => { | |
| + setIsSubmitting(true); |