Docusaurus: Failed to deploy: Reference error self is not defined

[rickhanlonii]

🐛 Bug Report

I get a ReferenceError in Webpack while running yarn build to deploy the Hermes website.

I _think_ it's due to monaco-editor-webpack-plugin but I'm not sure.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

Note: I setup a branch that has the required hermes.js files we're only adding to the gh-pages branch during deploys.

• Clone my branch here: https://github.com/rickhanlonii/hermes/tree/rh-deploy-hermes
• cd website
• yarn build
• Observe error

Expected behavior

• Build completes, site deploys

Actual Behavior

Your Environment

• Docusaurus version used: 2.0.0-alpha.43
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Node 12.9.1
• Operating system and version (desktop or mobile): macOS

Reproducible Demo

https://github.com/rickhanlonii/hermes/tree/rh-deploy-hermes

[lex111]

@rickhanlonii could you please upgrade D2 to the latest version (2.0.0-alpha.49)?

[rickhanlonii]

@lex111 I did try it with the latest alpha as well, sorry I left that out of the description. I also reverted back to 2.0.0-alpha.19 (the last version that we deployed with successfully) but that failed for a different reason.

[lex111]

@rickhanlonii this is not really a D2 bug. This bug is related to what we do prerendering (something like SSR). But I fix it, you can see my commit here https://github.com/lex111/hermes/commit/b8a3e14c111697114321b06eeedcbd2b5b11806c

[rickhanlonii]

Thanks @lex111, I verified that that fixed the issue and deployed the site. PR is here https://github.com/facebook/hermes/pull/204

For D2, is there a way we can surface these errors with an explanation of how to fix? If I got an error that told me the issue was that I broke server side rendering I may have been able to fix this myself.

[lex111]

@rickhanlonii I don't think there's that easy way to find out that the issue is related with SSR.

[yangshun]

I agree it's hard for us to determine if the issues are caused by SSR. One rule of thumb I use is if a component has highly complex interactions (e.g. videos, playgrounds), chances are it relies on browser APIs.

I think this issue is common enough and we can start an FAQ page and document these down. To get around them you can use <BrowserOnly> or ExecutionEnvironment (similar to the one we have internally at FB).

[dotansimha]

I'm having the same issue, but with navigator.
The error is:

ReferenceError: navigator is not defined
(undefined) ReferenceError: navigator is not defined
    at main:12649:19
    at main:12643:28
    at Object.<anonymous> (main:12645:2)
    at __webpack_require__ (main:21:30)
    at Module.<anonymous> (main:105212:18)
    at __webpack_require__ (main:21:30)
    at main:169369:12707

start works fine, it only happens with build. I guess one of the deps in not compatible with SSR? but the error is not helpful :(

Update: In my issue, it was CodeMirror, and I added a conditional loading:

import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';

let CodeMirror = null;

if (ExecutionEnvironment.canUseDOM) {
  CodeMirror = require('codemirror');
}

If you are experiencing this issue with the latest v2, try to comment / replace with a dummy some of your components and see if it help, then try to find the cause for it.

[mharsat]

Also having the same issue with components in a mdx file. Only happening with build.

ReferenceError: Buffer is not defined
(undefined) ReferenceError: Buffer is not defined
    at Object.<anonymous> (main:119548:13)
    at __webpack_require__ (main:27:30)
    at Object.<anonymous> (main:119188:11)
    at __webpack_require__ (main:27:30)
    at Object.<anonymous> (main:54000:26)
    at __webpack_require__ (main:27:30)
    at Object.<anonymous> (main:119149:30)
    at __webpack_require__ (main:27:30)
    at Object.<anonymous> (main:79590:23)
    at __webpack_require__ (main:27:30)

Also tried conditionally rendering with {typeof window !== "undefined" && ..., with no success.

Any solution for mdx files?

[yangshun]

The solution is the same. What are you importing in your MDX files?

On Thu, Apr 23, 2020, 5:06 AM Matan Harsat [e-mail] wrote:

Also having the same issue with components in a mdx file. Only happening
with build.

ReferenceError: Buffer is not defined
(undefined) ReferenceError: Buffer is not defined
at Object. (main:119548:13)
at __webpack_require__ (main:27:30)
at Object. (main:119188:11)
at __webpack_require__ (main:27:30)
at Object. (main:54000:26)
at __webpack_require__ (main:27:30)
at Object. (main:119149:30)
at __webpack_require__ (main:27:30)
at Object. (main:79590:23)
at __webpack_require__ (main:27:30)

Any solution for mdx files yet?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/docusaurus/issues/2494#issuecomment-618040570,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAKBCHNGRVYLOVZUA6NROCDRN5L5VANCNFSM4LZKHKDQ
.

[mharsat]

import { RichContentWrapper } from "wix-rich-content-wrapper";
import { RichContentEditor } from "wix-rich-content-editor";
import { pluginDivider } from "wix-rich-content-plugin-divider";
import { pluginVideo } from "wix-rich-content-plugin-video";

I am importing a few libraries, one of them has a dependency using scss files. So I installed the docusaurus-plugin-sass plugin, and then stopped getting the error for unrecognized scss. Now start works but build fails with the above ReferenceError. What do you suggest? Is this really SSR related?

[dotansimha]

@mharsat It's usually happen because of SSR related issues. You can bypass that by loading those only for client side.

I did something like that:
https://github.com/dotansimha/graphql-code-generator/blob/master/website/src/components/live-demo/Editor.js#L1-L4

[mharsat]

@mharsat It's usually happen because of SSR related issues. You can bypass that by loading those only for client side.

I did something like that:
dotansimha/graphql-code-generator:website/src/components/live-demo/Editor.js@master#L1-L4

Thanks @dotansimha that helped

[jonnynabors]

I have a similar issue when importing the Redoc React Component (https://github.com/Redocly/redoc#usage-as-a-react-component). The error only occurs when I'm actually importing the component.

My workaround was

let RedocStandalone = () => <div></div>;
if (ExecutionEnvironment.canUseDOM) {
  RedocStandalone = require('redoc').RedocStandalone;
}

That said, is there any way to bypass or disable the SSR bundle? That may not be the right way to ask that question, but I just want a client bundle that I can deploy.

[yangshun]

@jonnynabors the workaround is along the lines of what I would recommend. Refer to https://github.com/facebook/hermes/pull/204/files for the recommended solution of using <Suspense> and React.lazy to lazily import the modules.

That said, is there any way to bypass or disable the SSR bundle

Nope. But we could consider adding that although we rather try to solve the problems that emerge along the way.

[mtooke]

Solved my issue as well - re: Redoc barfing.

Thanks everybody!

[lex111]

In order to reduce staled issues, I am closing this issue, but feel free to open it again if needed.

[sibelius]

can we improve the message for non SSR components?

[slorber]

@sibelius what kind of message you have and what should be the improvement?
I added recently the page path that is failing to render on node, that might help find the cause of the issue.

Should we link to a guide page or something when we detect a potential issue?
How can we be sure the error is related to this issue? (I guess if it's a "ReferenceError" it's quite likely to be related?)

[sibelius]

I've got the same on https://github.com/facebook/docusaurus/issues/2494#issuecomment-622143023

ReferenceError: Buffer is not defined
(undefined) ReferenceError: Buffer is not defined
    at Object.<anonymous> (main:119548:13)
    at __webpack_require__ (main:27:30)
    at Object.<anonymous> (main:119188:11)
    at __webpack_require__ (main:27:30)
    at Object.<anonymous> (main:54000:26)
    at __webpack_require__ (main:27:30)
    at Object.<anonymous> (main:119149:30)
    at __webpack_require__ (main:27:30)
    at Object.<anonymous> (main:79590:23)
    at __webpack_require__ (main:27:30)

it would be cool to show the component that throw this