Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ReferenceError: process is not defined (Docusaurus)

See original GitHub issue

Issue Description

Hi. I was testing sandpack-react with Docusaurus, but there’s a fatal error as soon as I import a sandpack component:

client.js?e6b8:10 Uncaught (in promise) ReferenceError: process is not defined
    at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-client/esm/client.js:21)
    at Module../node_modules/@codesandbox/sandpack-client/esm/client.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:23)
    at __webpack_require__ (:3000/runtime~main.js:36)
    at fn (:3000/runtime~main.js:339)
    at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-react/dist/esm/contexts/sandpackContext.js:8)
    at Module../node_modules/@codesandbox/sandpack-react/dist/esm/contexts/sandpackContext.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:143)
    at __webpack_require__ (:3000/runtime~main.js:36)
    at fn (:3000/runtime~main.js:339)
    at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-react/dist/esm/hooks/useSandpack.js:6)
    at Module../node_modules/@codesandbox/sandpack-react/dist/esm/hooks/useSandpack.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:183)
    at __webpack_require__ (:3000/runtime~main.js:36)
    at fn (:3000/runtime~main.js:339)
    at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-react/dist/esm/common/Layout.js:8)
    at Module../node_modules/@codesandbox/sandpack-react/dist/esm/common/Layout.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:79)
    at __webpack_require__ (:3000/runtime~main.js:36)
    at fn (:3000/runtime~main.js:339)
    at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-react/dist/esm/presets/SandpackRunner.js:7)
    at Module../node_modules/@codesandbox/sandpack-react/dist/esm/presets/SandpackRunner.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:215)
    at __webpack_require__ (:3000/runtime~main.js:36)
    at fn (:3000/runtime~main.js:339)
    at eval (webpack-internal:///./src/pages/index.js:12)
    at Module../src/pages/index.js (:3000/component---site-src-pages-index-jsc-4-f-f99.js:47)
    at __webpack_require__ (:3000/runtime~main.js:36)
    at Function.fn (:3000/runtime~main.js:339)

Made a repro repo here, but it’s basically the default docusaurus template with this added to pages/index.js:

import { SandpackRunner } from "@codesandbox/sandpack-react";

const CustomSandpack = () => <SandpackRunner />;

Using version 0.0.6.

Issue Analytics

State:
Created 2 years ago
Comments:9 (5 by maintainers)

Top GitHub Comments

1reaction

JayaKrishnaNamburucommented, Jun 14, 2021

Here is a update, I have the working repo here https://github.com/JayaKrishnaNamburu/sandpack-docusaurus-test/tree/trail/node-polyfill

Just added a new package docusaurus-node-polyfills which i just released by wrapping up the changes https://github.com/JayaKrishnaNamburu/docusaurus-node-polyfills

1reaction

alexnmcommented, Jun 14, 2021

wow, nice research @JayaKrishnaNamburu! thanks for taking the time!

On our side we can remove the usage of process in sandpack-client and rely on props when setting up storybook or anything else to run with a local bundler, but we would still have the issue from codemirror I guess.

Top Results From Across the Web

Uncaught ReferenceError: process is not defined · Issue #38

The VFile constructor references process directly. In a vanilla browser environment, this throws an error. However, many build systems polyfill process so ...

Webpack 5 - Uncaught ReferenceError: process is not defined

In webpack 5 automatic node.js polyfills are removed. In the migration docs it is mention that. Try to use frontend-compatible modules ...

"Uncaught ReferenceError: process is not defined" and the ...

The Uncaught ReferenceError: process is not defined happens when when a non-existent (here: process) variable is referenced .

Static site generation (SSG) - Docusaurus

ReferenceError : window is not defined. This is because during server-side rendering, the Docusaurus app isn't actually run in browser, ...

process.env - process is not defined? : r/reactjs - Reddit

I'm trying to use a . env file in my project to store some variables that I'm using in my config. js file....