react-static: [Bug] Out of Memory with basic template

Reporting a bug?

I’ve created a new site from the basic template. After doing a build and serve, opening the site locally creates an Out of memory error. As far as I can see it’s stuck in hydrating. Commenting out React.Suspense in App.js fixes the issue.

This also happens when the react(-static) packages are updated to the latest versions.

Environment

react-static cli 7.5.0

  System:
    OS: Windows 10 10.0.19041
    CPU: (24) x64 AMD Ryzen 9 3900 12-Core Processor
    Memory: 44.57 GB / 63.90 GB
  Binaries:
    Node: 12.18.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 88.0.4324.150
    Edge: Spartan (44.19041.423.0)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    react: ^16.9.0 => 16.14.0
    react-dom: ^16.9.0 => 16.14.0
    react-static: ^7.2.0 => 7.5.0
    react-static-plugin-reach-router: ^7.2.0 => 7.5.0
    react-static-plugin-sitemap: ^7.2.0 => 7.5.0
    react-static-plugin-source-filesystem: ^7.2.0 => 7.5.0

Steps to Reproduce the problem

Base your steps off of any freshly installed react-static template! basic template:

  1. yarn build
  2. yarn serve
  3. Open in chrome
  4. Browser tab crashes after a while

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 2
  • Comments: 21 (12 by maintainers)

Commits related to this issue

Most upvoted comments

Released as 7.5.3

I tried it out on my machine after releasing and it works. Let me know if it doesn’t for you.

Not sure if this is helpful, but I’m encountering this and getting some odd behavior.

I get the infinite loop leading to crash with both basic and typescript templates. I also discovered that commenting out React.Suspense fixes the issue. However, doing that causes the dev server to serve an error on every page.

An internal error occured!

Error: RoutesInner suspended while rendering, but no fallback UI was specified.

Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.

However, if I then edit a file, causing the dev server to reload, the issue goes away and the entire site loads fine. If I restart the dev server, it again errors until I modify a file to cause it to reload.

@TriDotS 's solution of downgrading to 7.4.2 worked for me.

It does! Thank you for fixing this issue!

Took me some time but I have a workaround for the basic template to get a prod build

ckunze@Akis-MacBook-Pro test-with-rollback % react-static -v
7.5.1
  System:
    OS: macOS 11.2.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 6.07 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.5.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.3.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 88.0.4324.182
    Safari: 14.0.3
  npmPackages:
    react: ^16.14.0 => 16.14.0 
    react-dom: ^16.14.0 => 16.14.0 
    react-hot-loader: ^4.13.0 => 4.13.0 
    react-static: 7.4.2 => 7.4.2 
    react-static-plugin-reach-router: ^7.5.0 => 7.5.1 
    react-static-plugin-sitemap: ^7.5.0 => 7.5.1 
    react-static-plugin-source-filesystem: ^7.5.0 => 7.5.1 

The trick here is to remove the ^ from version ^7.5.1and rollback to 7.4.2 you can keep the plugins versions as they are

My working package.json

{
  "name": "react-static-example-basic",
  "private": true,
  "scripts": {
    "start": "react-static start",
    "stage": "react-static build --staging",
    "build": "react-static build",
    "analyze": "react-static build --analyze",
    "serve": "serve dist -p 3000"
  },
  "dependencies": {
    "@reach/router": "^1.3.4",
    "axios": "^0.21.1",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-hot-loader": "^4.13.0",
    "react-static": "7.4.2",
    "react-static-plugin-reach-router": "^7.5.0",
    "react-static-plugin-sitemap": "^7.5.0",
    "react-static-plugin-source-filesystem": "^7.5.0"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.19.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-config-react-tools": "^1.1.7",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "serve": "^11.3.2"
  }
}

(Please refrain from “me to” commentary as this bug has been confirmed. Now “all we need” is a solution 😄 )

@andreme just ran into this. If you’re looking for a quick fix, revert to 7.4.2