Failed to deploy: Reference error self is not defined

🐛 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

[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.

[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