Wiki

Wiki

Here, we will discuss the problems and solutions that we have encountered in the development process.

Support for TypeScript 5.x in Create React App

In the https://github.com/1chooo/1chooo.com/pull/76, when I tried to upgrade the react-scripts to 5.x, I got the following error:

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: react-scripts@5.0.1
npm error Found: typescript@5.5.4
npm error node_modules/typescript
npm error   typescript@"^5.5.4" from the root project
npm error   peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.3
npm error   node_modules/fork-ts-checker-webpack-plugin
npm error     fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1
npm error     node_modules/react-dev-utils
npm error       react-dev-utils@"^12.0.1" from react-scripts@5.0.1
npm error       node_modules/react-scripts
npm error         react-scripts@"5.0.1" from the root project
npm error   1 more (tsutils)
npm error
npm error Could not resolve dependency:
npm error peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm error node_modules/react-scripts
npm error   react-scripts@"5.0.1" from the root project

Add the following to the package.json to solve the problem: 1

+ "overrides": {
+   "typescript": "^5.5.4"
+ },

[!IMPORTANT] The version of overrides must be the same as the version of TypeScript in dependencies.

Migrate from Create React App to NextJS

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
},
$ npm uninstall react-scripts
$ npm uninstall react-router-dom
$ npm install next

Dangerously Set innerHTML

https://dev.to/shareef/rendering-markdown-made-easy-with-react-markdown-in-reactjs-and-nextjs-web-apps-259d

In HTML, <div> cannot be a descendant of <p>.
This will cause a hydration error.
...
  <Markdown>
    <p>
    ^^^
      <http://localhost:3000/_next/static/chunks/src_dd03ef._.js:150:225>
        <div>
+ const isImageNode = (node: any): node is Element => {
+   return node && node.type === 'element' && node.tagName === 'img';
+ };
 
const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content }) => (
  <ReactMarkdown
    remarkPlugins={[remarkGfm]}
    rehypePlugins={[rehypeRaw]}
    components={{
+       p: ({ node, children }) => {
+         const hasImage = node && node.children && node.children.some(isImageNode);
+         if (hasImage) {
+           return <>{children}</>;
+         }
+         return <p>{children}</p>;
+       },
    ...
  >
    {content}
  </ReactMarkdown>
);
 
export default MarkdownRenderer;

Next.js Image Fast Loading

SEO Tools

Open Graph Meta Tags

Loose Autocomplete

acceptString = (str: "foo" | "bar" | (string & {})) => {
  console.log(str);
};
 
acceptString("baz");

https://www.threads.net/@jimmy.chiang/post/C_vl632ygU_/?xmt=AQGzwdnxgbmCCfAF8xCgI2zZiemQtJDR7omD6Mb26Ge3CA

https://www.youtube.com/live/8HoOxOd86M4?t=2778&si=P2mxsBXVq8UmrAX_

Footnotes

  1. (react-scripts) Support for TypeScript 5.x #13080 ↩

Code WalkthroughChange Log