Docusaurus build crashes during minification

[dbrrt]

Current Behavior

Build process crashes at the end

Expected Behavior

Build process to pass

Steps to Reproduce

• Create nx workspace
• create a docusaurus app
• Build the docusaurus app

This issue may not be prioritized if details are not provided to help us reproduce the issue.

Failure Logs

> nx run dummy-doc:build 
Creating an optimized production build...
2019-05-28-hola.md - 'id' header option is deprecated. Please use 'slug' option instead.
2019-05-29-hello-world.md - 'id' header option is deprecated. Please use 'slug' option instead.
2019-05-30-welcome.md - 'id' header option is deprecated. Please use 'slug' option instead.

✔ Client
  Compiled successfully in 8.06s

✖ Server
  Compiled with some errors in 9.59s

TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)
(undefined) TypeError: Cannot read property 'replace' of undefined
    at Object.options.minifyJS (main:17359:28)
    at Object.chars (main:17847:24)
    at main:46819:19
    at String.replace (<anonymous>)
    at new HTMLParser (main:46811:19)
    at minify (main:17633:3)
    at module.exports.exports.minify (main:17994:16)
    at serverEntry_render (main:84584:38)

Environment

Plugin name and version: @nx-plus/docusaurus#8b21c9f

NX Report complete

nx : 10.2.1
@nrwl/angular : Not Found
@nrwl/cli : 10.2.1
@nrwl/cypress : 10.2.1
@nrwl/eslint-plugin-nx : 10.2.1
@nrwl/express : Not Found
@nrwl/jest : 10.2.1
@nrwl/linter : 10.2.1
@nrwl/nest : Not Found
@nrwl/next : 10.2.1
@nrwl/node : Not Found
@nrwl/react : 10.2.1
@nrwl/schematics : Not Found
@nrwl/tao : 10.2.1
@nrwl/web : 10.2.1
@nrwl/workspace : 10.2.1
typescript : 4.0.3```

[BuckyMaler]

I can reproduce the error when @nrwl/web is installed. I can also reproduce the error when @nrwl/react or @nrwl/next are installed, but that's because @nrwl/web is a dependency of those. I think the issue may be due to a shared build dependency and Docusaurus resolving the wrong version of that dependency. @dbrrt would you like to look into this?

[dbrrt]

@BuckyMaler Sure. I don't get how docusaurus is resolving the wrong @nrwl/web dependency, since it has nothing to do with docusarus itself. My understanding is that the building process (server) isn't looking at the right place for minifying the app, causing this issue.

[BuckyMaler]

@dbrrt I wanted to notify you that we've added contributing docs so that may be helpful as you work on this. Let me know if there's anything I can do to help.

[taylorreece]

It seems like an issue with some version of webpack not playing right with Docusaurus. I've created an issue here: https://github.com/facebook/docusaurus/issues/3515

[dbrrt]

Thank you @BuckyMaler @taylorreece. I've started isolating the code and looking into it. I suspect a library coming through webpack responsible for uglyfication

[taylorreece]

Hey guys - I have a temporary fix for this. If you nohoist the documentation project so its dependencies are separate from your other dependencies, then it finds the correct versions of its dependencies in its node_modules directory and doesn't become a promiscuous little turd, looking in other projects' node_modules directories for modules: https://github.com/facebook/docusaurus/issues/3515#issuecomment-702796225

Note, after you add that nohoist you'll need to remove all node_modules directories and re-yarn install.

[dbrrt]

@taylorreece Will try it, that's really good to know

[BuckyMaler]

@taylorreece thanks for the additional details, but nohoist won't work with Nx because it doesn't use yarn workspaces.

@dbrrt the issue is that Docusaurus resolves a different version of terser-webpack-plugin when @nrwl/web is installed. There are a couple of workarounds that may work for you as we sort out this issue. The first workaround is to install the version of terser-webpack-plugin expected by Docusaurus, i.e. yarn add terser-webpack-plugin@^4.1.0 -D. The second workaround is to switch from yarn to npm. I cannot reproduce the error when using npm.

I hope one of those workarounds help.

[dbrrt]

@BuckyMaler I can confirm you that with terser-webpack-plugin installed manually, the build is completed with no issue.

[BuckyMaler]

I'm going to leave this issue open for now. Though I think the fix will be a PR in Nx and/or Docusaurus. Here are a couple of workarounds in the meantime.

[bedoro]

Hello!

I am running into the same problem but with a different setup. The workarounds above do not work for me.

> ng run documentation:build
Creating an optimized production build...

√ Client
  Compiled successfully in 10.27s

× Server
  Compiled with some errors in 12.54s

TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)
(undefined) TypeError: Cannot read property 'replace' of undefined
    at Object.options.minifyJS (main:17286:28)
    at Object.chars (main:17774:24)
    at main:46746:19
    at String.replace (<anonymous>)
    at new HTMLParser (main:46738:19)
    at minify (main:17560:3)
    at module.exports.exports.minify (main:17921:16)
    at serverEntry_render (main:84423:38)

@nrwl/web, @nrwl/react or @nrwl/next are not installed as it is an Angular Wordkapce. Output of nx report complete

  nx : Not Found
  @nrwl/angular : 10.1.0
  @nrwl/cli : 10.1.0
  @nrwl/cypress : 10.1.0
  @nrwl/eslint-plugin-nx : 10.1.0
  @nrwl/express : Not Found
  @nrwl/jest : 10.1.0
  @nrwl/linter : 10.1.0
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : 10.1.0
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 10.1.0
  @nrwl/web : Not Found
  @nrwl/workspace : 10.1.0
  typescript : 3.9.7

I am using npm, no Yarn or Yarn workspaces. Running npm i -D add terser-webpack-plugin@^4.1.0 doesn't change the behavior for me.

I am out of ideas here, since the problem has been traced back to using yarn workspaces or @nrwl/web.

Weirdly, setting --minify=false, doesn't change anything. I would have assumed that all terser related things are skipped with the flag?

[dbrrt]

@bedoro minify flag doesn't seem to be applied with this plugin. I'm using "terser-webpack-plugin": "4.2.2" to get this workaround applied.

[ImCesar]

I'm having trouble trying to get this workaround to work. I ran the npm i -D add terser-webpack-plugin@^4.1.0 and that didn't work. I specifically installed 4.2.2 but that again did not work. I am not sure where to put minify flag. The only place I could see is the options under the build architecture, but again that doesn't seem to be doing anything.

[bedoro]

@ImCesar Same here. Tried all the suggestions but the error still persists.

Really frustrating to not be able to do a production build :(

[dbrrt]

@bedoro Do you have a project you can share so that I can try on my side? I'm able to deploy docusaurus app with nx, thanks to this plugin and the terser-webpack-plugin@4.2.2 workaround.

[ImCesar]

I was able to replicate the bug here in this repo

https://github.com/ImCesar/nx-docusaurus-bug

With docusaurus alone it would build and serve fine. I started to add the things that would be in my library, the first one being a buildable and publishable library. That was still fine. Then I added storybook to that library and that's when docusaurus would fail to build.

[taylorreece]

Hey @ImCesar ,

I didn't do a full PR, but for your https://github.com/ImCesar/nx-docusaurus-bug if you apply this patch, you can then yarn and yarn build docs successfully. This pins terser-webpack-plugin to 4.2.2.

Sidenote: not sure why you have a yarn.lock and package-lock.json in that repo.

[taylorreece]

Maybe we need to change https://github.com/facebook/docusaurus/blob/69bf68ae575679ff06703cea02a89e3014d39359/packages/docusaurus/package.json#L102 to "terser-webpack-plugin": "4.2.2", or something?

[ImCesar]

Thanks for the help @taylorreece I have both because I rushed to put the example together. When you generate NX it will create the yarn.lock but we use npm so that generated the package-lock.json. I forgot to clean up the yarn.lock.

I got rid of my yarn.lock and installed terser-webpack-plugin@4.2.2 specifically and that fixed it in the bug repo, but that fix doesn't work for my actual nx repo.

[ImCesar]

In my actual NX repo I deleted my package-lock, deleted my node_modules, and cleared my cache. Then once I reinstalled it was able to build correctly. I didn't have to explicitly install terser-webpack-plugin. I hope that helps someone out.

[dbrrt]

@ImCesar Is there still terser-webpack-plugin@4.2.2 in your package.json?

[ImCesar]

My bad I did misspoke in my message. I double checked and I still have the terser-webpack-plugin@4.2.2 in my package.json

[dbrrt]

Adding to my package.json "resolutions": { "terser" : "4.8.0" } solved this issue (without installing terser-webpack-plugin).

https://github.com/facebook/docusaurus/issues/3515

[BuckyMaler]

I'm closing this because it's not a @nx-plus/docusaurus bug. There's a documented workaround here thanks to @devinshoemaker, and a couple more workarounds here.