Live reload is broken on local dev server when @docusaurus/faster is enabled

[pranabdas]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

When you start the local development server and make any changes to a markdown (or CSS) file, Docusaurus fails to compile the changes and reload the website.

Reproducible demo

No response

Steps to reproduce

1. Create a brand new site and install @docusaurus/faster:

npx -y create-docusaurus@latest --typescript my-website classic
cd my-website
npm i @docusaurus/faster

2. Enable @docusarus/faster. Open docusaurus.config.ts and add:

const config = {
  future: {
    experimental_faster: true,
  },
};

3. Start development server:

npm start

4. Make some changes, say edit docs/intro.md.

Expected behavior

Docusaurus should process the new changes, and reload the browser running http://localhost:3000/

Actual behavior

Docusaurus fails to compile the changes and crashes with the following error:

<e> [webpack-dev-middleware] [Error:   × Error: Unable to access compilation with id = CompilationId(1) now. The compilation have been removed on the Rust side. The latest compilation id is CompilationId(78)
<e>   │     at _Compilation.addRuntimeModule (/Users/pranab/Desktop/tmp/my-website/node_modules/@rspack/core/dist/index.js:3473:32)
<e>   │     at Object.fn (/Users/pranab/Desktop/tmp/my-website/node_modules/@docusaurus/core/lib/webpack/plugins/ChunkAssetPlugin.js:49:29)
<e>   │     at SyncHook.callAsyncStageRange (/Users/pranab/Desktop/tmp/my-website/node_modules/@rspack/lite-tapable/dist/index.js:240:21)
<e>   │     at SyncHook.callStageRange (/Users/pranab/Desktop/tmp/my-website/node_modules/@rspack/lite-tapable/dist/index.js:259:14)
<e>   │     at QueriedHook.call (/Users/pranab/Desktop/tmp/my-website/node_modules/@rspack/lite-tapable/dist/index.js:218:26)
<e>   │     at /Users/pranab/Desktop/tmp/my-website/node_modules/@rspack/core/dist/index.js:13444:19
<e>   │     at last.function (/Users/pranab/Desktop/tmp/my-website/node_modules/@rspack/core/dist/index.js:13868:25)
<e>   │ 
<e> ] {
<e>   code: 'GenericFailure'
<e> }

Your environment

• Docusaurus version used: 3.6.1
• Environment name and version: Node 20.18.0
• Operating system and version: macOS 14.7.1

Self-service

• I'd be willing to fix this bug myself.

[slorber]

This is a bug in Rspack 1.1
See also #10648

Downgrade to 1.0.x and it should work better

[pranabdas]

I see. Thank you.

For anyone stumbling into this issue, we can restrict rspack version in the package.json as a temporary workaround:

npm i @rspack/[email protected] --save-exact

Or in case, you prefer not to pollute the package(-lock).json:

npm i @rspack/[email protected] --save-exact --no-save 

[slorber]

Thanks

Depending on how fast the Rspack team is to fix this bug (they usually are), I may pin the dependency in a 3.6.2 patch release.

[mike-solomon]

I see. Thank you.

For anyone stumbling into this issue, we can restrict rspack version in the package.json as a temporary workaround:

npm i @rspack/[email protected] --save-exact

Or in case, you prefer not to pollute the package(-lock).json:

npm i @rspack/[email protected] --save-exact --no-save 

For what it's worth to anyone else following along - this did not work for my site. This is a really tricky bug, though, as not every Docusaurus site that uses the new Faster is broken for live reloads.

One of my sites was broken last week - but now appears to work without any changes on my end.

Another one of my sites that was working last week is now not working this week (in relation to live reloading locally).

I created a new repo to test this in and didn't have any success at getting the site to fail to live reload with Faster 🤷‍♂️ .

See below for how I fixed this in my site.

[slorber]

@mike-solomon you can see for yourself that you broke your site while upgrading to v3.6.1 by also upgrading from Rspack from 1.0.14 to 1.1.0:

openrewrite/rewrite-docs@39fb98a#diff-51e4f558fae534656963876761c95b83b6ef5da5103c4adef6768219ed76c2deL2939

Note: pinning/resolving exact transitive dependencies is a feature of your package manager, so you need to read the package manager docs to figure out how to do so and ensure that your lockfile and node_module use the expected version of Rspack (1.0.x, not 1.1.0)

In Yarn this is usually solved with:

"resolutions": {
  "@rspack/core": "1.0.14",
}

[mike-solomon]

@mike-solomon you can see for yourself that you broke your site while upgrading to v3.6.1 by also upgrading from Rspack from 1.0.14 to 1.1.0:

Thanks for taking the time to look into the site and reply. To provide some additional context:

I didn't commit the Rspack changes when I was pinning it to the 1.0.14 version because they didn't seem to work, so I figured I wouldn't pollute my package.json file with that.

That being said, based on:

In Yarn this is usually solved with:

"resolutions": {
  "@rspack/core": "1.0.14",
}

I believe I misunderstood how to pin that. I did a yarn add @rspack/[email protected] and that added a line in my dependencies section of my package.json that looked like: "@rspack/core": "1.0.14",.

Today, I tried adding a resolutions instead of a dependencies and it appears to have fixed my problems with live reload! I didn't realize that dependencies didn't handle the dependencies of dependencies.

Thanks a bunch for the help @slorber ^_^

[slorber]

Fix has been fixed in Rspack 1.1.1, no need to pin anymore to 1.0.x

https://github.com/web-infra-dev/rspack/releases/tag/v1.1.1

Docusaurus will require >1.1.1 in our next release: #10648