Skip to content

Prerendering not working on Node 16 #896

Open
@Brawl345

Description

@Brawl345

Describe the bug
When running prerender on Node 16, the pages don't get prerendered.

To Reproduce
Steps to reproduce the behavior:

  1. Install Node 16
  2. Clone the example project: npm init wmr example && cd example
  3. Run npm run build (which in turn runs wmr build --prerender)

Expected behavior
The page should get prerendered and the resulting HTML should contain everything. This is the build output:

$ npm run build

> build
> wmr build --prerender

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating

Wrote 23Kb to disk:
  dist\index.html 460b
  dist\index.d5d2e732.js 17Kb
  dist\assets/style.e6ee4bcf.css 499b
  dist\chunks/prerender.ea3dab95.js 4.8Kb
  dist\chunks/index.fb97a71f.js 214b

This is the resulting dist/index.html:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>WMR App</title>
		<meta name="description" content="WMR App">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link rel="icon" href="data:">
		<link rel="modulepreload" as="script" href="/index.d5d2e732.js">
		<link rel="stylesheet" href="/assets/style.e6ee4bcf.css">
	</head>
	<body>
		<script type="module" src="/index.d5d2e732.js"></script>
	</body>
</html>

Now the same on Node 14:


> @ build C:\Users\some\path\example-project
> wmr build --prerender

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating

Wrote 23Kb to disk:
  dist\index.html 460b
  dist\index.d5d2e732.js 17Kb
  dist\assets/style.e6ee4bcf.css 499b
  dist\chunks/prerender.ea3dab95.js 4.8Kb
  dist\chunks/index.fb97a71f.js 214b
Prerendered 3 pages:
  /
  /about [from /]
  /error [from /]

You can see that it prerenders. The resulting index.html is correct:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>WMR App</title>
		<meta name="description" content="WMR App">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link rel="icon" href="data:">
		<link rel="modulepreload" as="script" href="/index.d5d2e732.js">
		<link rel="stylesheet" href="/assets/style.e6ee4bcf.css">
	</head>
	<body><div class="app"><header><nav><a href="/">Home</a><a href="/about">About</a><a href="/error">Error</a></nav><label> URL: <input readonly value="/" /></label></header><section class="home_7pwwsk"><h1>Home</h1><p>This is the home page.</p><button style="width: 30px;"> - </button><output style="padding: 10px;">Count: 0</output><button style="width: 30px;"> + </button></section></div>
		<script type="module" src="/index.d5d2e732.js"></script>
	</body>
</html>

Bug occurs with:

  • wmr or wmr start (development)
  • wmr build (production)
  • wmr serve

Desktop (please complete the following information):

  • OS: Windows 8.1
  • Browser: N/A
  • Node Version: v16.13.0
  • WMR Version: 3.7.2

Additional context
N/A

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions