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:closed
  • Created 2 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

JayaKrishnaNamburucommented, Jun 14, 2021

Here is a update, I have the working repo here

Just added a new package docusaurus-node-polyfills which i just released by wrapping up the changes

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.

Read more comments on GitHub >

github_iconTop 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 ...
Read more >
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 ...
Read more >
"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 .
Read more >
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, ...
Read more >
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....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found