theme-mermaid: layout-elk is not really an optional dependency

[gylxan]

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

Hi guys!

Since this morning we get the following error, when we try to run docusaurus build.

[cause]: Error: Failed to compile due to Webpack errors.
× Module not found: Can't resolve '@mermaid-js/layout-elk' in '/Users/gylxan/docusaurus-project/node_modules/.pnpm/@docusaurus+theme-mermaid@3.9.0_@docusaurus+faster@3.9.0_@docusaurus+types@3.9.0_@swc+c_58aaeca4b2b6f99a4ff81e7112e57ee4/node_modules/@docusaurus/theme-mermaid/lib/client'
╭─[139:24]
137 │                     return [
138 │                         4,
139 │                         import('@mermaid-js/layout-elk')
·                         ────────────────────────────────
140 │                     ];
141 │                 case 1:
╰────

I think this belongs to #11357.

We are using docusaurus with the experimental_faster future flag.

Any idea what is the problem here?

Reproducible demo

No response

Trying currently to build a codesandbox to show the error

Steps to reproduce

1. Configure future flag experimental_faster: true
2. Install @docusarus/faster and @docusaurus/theme-mermaid
3. Build docusaurus with docusaurus build

Expected behavior

Resolving the named optional dependency, which is not installed, should not lead to a failing build

Actual behavior

Resolving the optional dependency, which is not installed, leads to a failing build

Your environment

Self-service

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

[gylxan]

Maybe I see the issue:

    configureWebpack(config, isServer, utils) {
      return {
        plugins: [
          new utils.currentBundler.instance.DefinePlugin({
            __DOCUSAURUS_MERMAID_LAYOUT_ELK_ENABLED__: JSON.stringify(
              // We only need to include the layout registration code on the
              // client side. This also solves a weird Webpack-only bug when
              // compiling the server config due to the module being ESM-only.
              !isServer && elkLayoutEnabled,
            ),
          }),
        ],
      };
    },

JSON.stringify of false ends in "false".

But the problem occurs here

  if (__DOCUSAURUS_MERMAID_LAYOUT_ELK_ENABLED__) {
    const elkLayout = (await import('@mermaid-js/layout-elk')).default;
    mermaid.registerLayoutLoaders(elkLayout);
  }

This check is always true, because

if("false") // is true

So in my opinion the JSON.stringify call have to be removed or have to explicit check for

  if (__DOCUSAURUS_MERMAID_LAYOUT_ELK_ENABLED__ === "true") 

[slorber]

Thanks, agree that something looks wrong, I'll fix this asap

[gylxan]

Thanks! Sorry, I couldn't properly reproduce it in a code sandbox :(

[slorber]

I can reproduce locally, this only happens for Rspack, not Webpack. Still investigating because I can't reproduce easily in isolation 😓

[slorber]

Couldn't really find the cause of this weird issue but it's definitely not related to "false" and only happens when using Rspack/SWC

I tried to ask the Rspack team about it, and will see if they have an idea.

Until then we'll fix this with a decent workaround: #11437

[Mixermachine]

@slorber thanks a lot for the fast fix.

Is there already a potential release date?
We currently can't build updates for our documentation.

[slorber]

I'll release another patch next week, after handling the other non-critical bugs from v3.9

Until then, there are many possible workarounds:

• Use a canary (a release is just a canary on which we put a tag/name): https://docusaurus.io/community/canary
• Use patch-package to implement the fix
• Use a Docusaurus plugin to implement the fix

function myPlugin() {
  return {
    name: 'my-plugin',
    configureWebpack() {
      return {
        resolve: {
          alias: {
            '@mermaid-js/layout-elk': false,
          },
        },
      };
    },
  };
}

[Mixermachine]

@slorber excelent, thanks.
The problem is fixed with version 3.9.1-canary-6409 for us and we can push updates again.
Kind regards from Germany