[Bug] "An error occurred loading this page's template" since v7

Reporting a bug?

Provide as much information as you can to reproduce the issue. If the issue is not reproducible, it can’t be fixed!

Environment

Run and copy the result of:

npx envinfo --system --npmPackages react* --binaries --npmGlobalPackages react* --browsers

here:

  System:
    OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
    Memory: 177.36 MB / 7.52 GB
    Container: Yes
    Shell: 5.4.2 - /bin/zsh
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.16.0 - /usr/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Browsers:
    Chrome: 74.0.3729.169
    Firefox: 67.0
  npmPackages:
    react: ^16.8.6 => 16.8.6 
    react-dom: ^16.8.6 => 16.8.6 
    react-ga-donottrack: ^1.0.0 => 1.0.0 
    react-hot-loader: ^4.8.4 => 4.8.4 
    react-markdown: ^4.0.8 => 4.0.8 
    react-static: ^7.0.10 => 7.0.10 
    react-static-plugin-sass: ^7.0.10 => 7.0.10 
    react-static-plugin-typescript: ^7.0.10 => 7.0.10 
    react-syntax-highlighter: ^10.2.1 => 10.2.1 

of course include any other package versions here if relevant.

Steps to Reproduce the problem

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

It’s a somewhat difficult problem because it doesn’t appear to be completely reproducible every time. These steps result in the problem some of the time. I have the feeling that it mostly occurs when the site is freshly loaded.

1. Visit https://vincenttunru.com
2. Click on one of the posts, e.g. “Fearless deployments”
3. Hopefully see “An error occurred loading this page’s template. More information is available in the console.” The console then shows: “Error: export not found” in vendors~main.

When you then navigate to a different page, the page goes completely black with the message:

An internal error occured!

Please see the console for more details.

And the console says:

Invariant Violation: "Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

It appears to be easier to reproduce when the site has not been visited for a couple of minutes…

This occurs in both Firefox and Chrome. I think it does not occur when the console is open. It also does not occur when you visit a page directly. Any pointers to other things I should investigate would be welcome.

Expected Behavior

The expected page should just be shown every time I click a link there.

Reproducible Demo

Source code of the website is here: https://gitlab.com/vincenttunru/blog

[nsf]

Ok, here’s how to “fix” it. Although be aware, it’s a horrible hack.

Create a local plugin:

plugins/react-static-plugin-fix-universal-component/
├── node.api.js
└── react-universal-component
    ├── .babelrc.js
    ├── flowTypes.js
    ├── helpers.js
    ├── index.js
    ├── report-chunks.js
    ├── requireById
    │   └── index.js
    ├── requireUniversalModule.js
    └── utils.js

Plugin contains a copy of .js files from node_modules/react-universal-component/dist (very bad).

You need to edit plugins/react-static-plugin-fix-universal-component/react-universal-component/index.js and comment out this section in “preload” static function:

        // try {
        //   mod = requireSync(props, context);
        // } catch (error) {
        //   return Promise.reject(error);
        // }

Then node.api.js contents:

import path from "path";

process.env.REACT_STATIC_UNIVERSAL_PATH = path.join(__dirname, "react-universal-component/index.js");

export default () => ({
  webpack: (config, { stage }) => {
    if (stage === "prod") {
      config.resolve.alias["react-universal-component"] = path.join(__dirname, "react-universal-component/index.js");
    }
    return config;
  },
});

Then .babelrc.js:

module.exports = {
  sourceType: "unambiguous",
  presets: ["react-static/babel-preset.js"],
  plugins: [
    [
      require.resolve("@babel/plugin-transform-runtime"),
      {
        corejs: false,
        useESModules: true,
      },
    ],
    require.resolve("@babel/plugin-syntax-dynamic-import"),
  ],
};

While it all is a horrible hack, but that’s the essence of the problem there.

[nsf]

This is the bug I believe, had the same issue spent a few hours debugging: https://github.com/faceyspacey/react-universal-component/issues/198

tl;dr:

1. periodic prefetch from react-static calls “preload” in react-universal-component
2. “preload” tries sync path which ends up calling webpack_require if needed module is in the webpack’s table.
3. if (2) fails, “preload” does a proper async module load
4. webpack does async module load in parallel, loading the module itself and all of its deps, as soon as module is loaded (or one of its deps) it’s added to webpack module table
5. if after (4) you call “preload” the second time, it tries sync path again and because module is already in the webpack’s table it tries to webpack_require it (but it’s possible that its deps are not there yet), even worse there is a try/catch in react-universal-component which swallows error in production, and as far as react-static goes, the bug is production only.
6. due to the way webpack works, it actually defines module structure before running module init function (to be able to bind circular module deps properly) as a result what we get here is that module is defined, but module init function throws and then react-universal-component catches that exception and silently ignores it, module gets stuck in half-initialized state, it was added to webpack’s internal global variable, but wasn’t properly initialized
7. after (6) when actual async import process finishes, webpack itself tries to perform webpack_require again, but this time empty module is returned and well effectively for a given module it’s just stuck in this half-initialized state