React Framework - React-Static

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > React > React - Framework

1 - About

react-static is a React framework for the creation of static ssr rendered page and dynamic react website.

Advertising

3 - Image

React - Image

import React from "react";
import Image from "../myImage.jpg";

export default function Images() {
  return <img src={Image} />;
}

4 - Debugging

  • At build time
static.config.js
export default {
    maxThreads: 1, // It will generate the static page with one thread
}

5 - Markdown

6 - Support

6.1 - 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.

/src/index.js
// Export your top level component as JSX (for static rendering)
export default App
Advertising

6.2 - Hooks can only be called inside of the body of a function component

package.json
"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.

7 - Documentation / Reference

web/javascript/react/framework/react-static.txt · Last modified: 2019/06/21 14:43 by gerardnico