About
react-static is a React framework for the creation of static ssr rendered page and dynamic react website.
Articles Related
Image
import React from "react";
import Image from "../myImage.jpg";
export default function Images() {
return <img src={Image} />;
}
Debugging
- At build time
export default {
maxThreads: 1, // It will generate the static page with one thread
}
Markdown
- React-Static Example with https://github.com/DanWebb/jdown:
Support
Invariant Violation: Failed exporting HTML for URL
Invariant Violation: Failed exporting HTML for URL
https://reactjs.org/docs/error-decoder.html?invariant=130
Make sure that you are exporting the app, it's needed for static generation.
// Export your top level component as JSX (for static rendering)
export default App
Hooks can only be called inside of the body of a function component
- Only one instance of react or react-dom must started. If you are using yarn workspace, hoisting react and react-dom seems to resolve this issue.
"workspaces": {
"nohoist": [
"react"
]
}
- If the previous solutions doesn't work, try to see if you have different React version:
yarn why react
[1/4] Why do we have the module "react"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
- "_project_#bytle-site-frontend" depends on it
- Hoisted from "_project_#bytle-site-frontend#react"
- Hoisted from "_project_#bytle-site-frontend-react#react"
- Hoisted from "_project_#bytle-site-frontend-react#react-static#react"
info Disk size without dependencies: "236KB"
info Disk size with unique dependencies: "532KB"
info Disk size with transitive dependencies: "608KB"
info Number of shared dependencies: 6
Done in 0.79s.