deaconn-net / deaconn-2-12-24 Goto Github PK
View Code? Open in Web Editor NEWDeaconn's new website as of 2-12-24 using Create T3 App which includes TypeScript, Next, React, tRPC, Prisma, and Tailwind CSS.
Home Page: https://deaconn.net/
Deaconn's new website as of 2-12-24 using Create T3 App which includes TypeScript, Next, React, tRPC, Prisma, and Tailwind CSS.
Home Page: https://deaconn.net/
Documenting an issue related to client-side React errors when viewing blog article Setup Steam Link On Raspberry Pi 4.
Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Eg (framework-ca706bf673a13738.js:9:46547)
at x (framework-ca706bf673a13738.js:9:121312)
at Vk (framework-ca706bf673a13738.js:9:99132)
at framework-ca706bf673a13738.js:9:98999
at Jk (framework-ca706bf673a13738.js:9:99006)
at Hk (framework-ca706bf673a13738.js:9:94050)
at J (framework-ca706bf673a13738.js:33:1364)
at MessagePort.R (framework-ca706bf673a13738.js:33:1894)
Things to note.
useEffect()
block like they should. I've looked at a lot of code and mostly everything is rendered in useEffect()
besides this code in Meta.tsx
which is required since we don't want to use any JavaScript/re-renders with meta data since Google Bots don't support JavaScript. However, this only happening on a specific article probably indicates it is not related to this.There are two issues related to type safety when building Deaconn via next build
. While these errors can be safely ignored and the website will operate without any major issues because they only appear with stricter overrides to the compiler options, this solution isn't ideal because we shouldn't be using variables and objects of type any
anywhere with TypeScript. I will admit this is a bigger concern with another project of mine also utilizing the same frameworks used for Deaconn (Best Mods). The temporary solution involves commenting out the following configuration from the .eslintrc.cjs
file.
overrides: [
{
extends: [
"plugin:@typescript-eslint/recommended-requiring-type-checking"
],
files: ["*.ts", "*.tsx"],
parserOptions: {
project: "tsconfig.json"
}
}
]
any
TypeThe first issue relates to src/components/forms/main.tsx
.
import React from "react";
import { FormikProvider } from "formik";
const Main: React.FC<{
form: any,
children: React.ReactNode,
submitBtn: JSX.Element,
type?: string
}> = ({
form,
children,
submitBtn,
type="POST"
}) => {
return (
<FormikProvider value={form}>
<form method={type} onSubmit={form.handleSubmit}>
{children}
{submitBtn}
</form>
</FormikProvider>
);
}
export default Main;
Errors are as follows.
./src/components/forms/main.tsx
6:11 Warning: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any
17:32 Error: Unsafe assignment of an `any` value. @typescript-eslint/no-unsafe-assignment
18:43 Error: Unsafe assignment of an `any` value. @typescript-eslint/no-unsafe-assignment
18:43 Error: Unsafe member access .handleSubmit on an `any` value. @typescript-eslint/no-unsafe-member-access
We simply need to specify a valid type for the form
parameter. However, this is more complicated since this components acts as a wrapper for all of our forms meaning the form types are different each time (e.g. different initiated values).
JSON.parse()
When Passing As PropWhen passing a prop from Next's getServerSideProps()
async function, it requires being able to serialize the prop's values via JSON. For example, say we have the following code.
export async function getServerSideProps(ctx: GetServerSidePropsContext) {
let article: Article | null = null;
/* Retrieve article... */
return {
props: {
article: article
}
}
}
The Article
type includes a Date
object field (createdAt
) resulting in the above causing the following error.
Error: Error serializing `.article.createdAt` returned from `getServerSideProps` in "...".
Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types.
The solution I've always used was converting the object to a JSON string and then parsing the string as a JSON object. Typically, you'd use JavaScript's JSON.stringify()
and JSON.parse()
functions. However, JSON.parse()
returns any
which results in the following Next error when having the configuration mentioned at the beginning of the issue uncommented.
48:13 Error: Unsafe assignment of an `any` value. @typescript-eslint/no-unsafe-assignment
With that said, using JSON.parse()
results in the createdAt
field being set to a string
instead of a Date
object which is invalid type safety. There are a couple of things I've thought of doing before realizing this. I was initially trying to create a JSON validator that would validate JSON.parse()
against a passed type
and return the object as that specific type, but that was difficult (read below). However, as just stated, JSON.parse()
sets the Date
object to a string which renders the validator useless since we have another problem.
I believe I'm going to need to create new types for each object we pass via props that contains a string
field (e.g. createdAtStr
) that is set to the createdAt
field as a string from the Date
object. The components receiving the prop already parses the date as a string (e.g. const articleDate = new Date(article?.createdAtStr ?? Date.now())
), so this should be all we need to do.
JSON.parse()
(No Good)I've read Stack Overflow threads (1, 2), but there isn't an easy solution without writing a lot of validation code alongside JSON.parse()
. This answer from Stack Overflow is the best I could find and even then it's complicated. There are other options I explored such as using ZOD validation. However, since there are a lot of times we use this method to pass props along with many different types, I wasn't able to find something that easily converts a typical TypeScript type to a ZOD schema without writing out a schema for each type which would be quite annoying in my opinion.
I'll need to research these issues further and once I have updates, I will reply to this issue.
There is a typo of “pipelines” in the experience section😊
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.