Error when adding react element

[dmuley17]

I am trying to use the elements in my docusasuras documentation but facing below issues.

Tried adding process defined it in index.js but still no luck.

Uncaught runtime errors:
×
ERROR
process is not defined
ReferenceError: process is not defined
    at eval (webpack-internal:///./node_modules/@stoplight/mosaic/core.esm.js:5901:58)
    at ./node_modules/@stoplight/mosaic/core.esm.js (http://localhost:3000/vendors-node_modules_stoplight_elements-dev-portal_styles_min_css-node_modules_process_browse-6fefbd.js:1575:1)
    at __webpack_require__ (http://localhost:3000/runtime~main.js:36:33)
    at fn (http://localhost:3000/runtime~main.js:356:21)
    at eval (webpack-internal:///./node_modules/@stoplight/elements-dev-portal/index.mjs:23:75)
    at ./node_modules/@stoplight/elements-dev-portal/index.mjs (http://localhost:3000/vendors-node_modules_stoplight_elements-dev-portal_styles_min_css-node_modules_process_browse-6fefbd.js:7029:1)
    at __webpack_require__ (http://localhost:3000/runtime~main.js:36:33)
    at fn (http://localhost:3000/runtime~main.js:356:21)
    at eval (webpack-internal:///./src/pages/test.js:8:88)
    at ./src/pages/test.js (http://localhost:3000/__comp---site-src-pages-test-js-65-d-1fe.js:15:1)

[dmuley17]

Can someone please help on this ?

[xeniakra10]

anyone? How to deal with this?

[chohmann]

@dmuley17 what version of elements are you using? We believe we fixed an issue similar to this and it was released in version 7.13.9 of elements.

If you are using this version or later and still experiencing this issue, please give us the following information:

1. Are you using web components, angular, react, etc. flavor of elements?
2. Can you provide a minimal reproducible example app that shows the error?

[dmuley17]

Hello, we are just following the documents and trying to create new react project. its failing with that too.

https://docs.stoplight.io/docs/elements/11b969f962273-elements-dev-portal-in-react

[github-actions]

This ticket has been labeled jira. A tracking ticket in Stoplight's Jira (STOP-93) has been created.

[daniel-white]

@dmuley17 for docuasaurus, i found this plugin https://www.npmjs.com/package/docusaurus-node-polyfills that seems to remedy the problem. we'll update our docs and keep working on create-react-app.

[dnyaneshwar-m]

unfortunatly that is not helping, i am still having the same issue. Let us know if any specific steps to follow.
I followed below steps
1] Ran yarn add @stoplight/elements-dev-portal under docusasuras app
2] Added plugins: ['docusaurus-node-polyfills'], in docusaurus.config.js
3] Ran npm install docusaurus-node-polyfills --save-dev
4] Made the changes as per doc

import React from 'react';
import Layout from '@theme/Layout';
import { StoplightProject } from '@stoplight/elements-dev-portal';
import '@stoplight/elements-dev-portal/styles.min.css';

export default function Hello() {
  return (
    <Layout title="Hello" description="Hello React Page">
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '50vh',
          fontSize: '20px',
        }}>
        <p>
        <StoplightProject projectId="*" />
        </p>
      </div>
    </Layout>
  );
}

and access the page http://localhost:3000/helloReact

and it still shows the error of

Uncaught (in promise) ReferenceError: process is not defined
    at eval (core.esm.js:5936:58)
    at ./node_modules/@stoplight/mosaic/core.esm.js (vendors-node_modules_stoplight_elements-dev-portal_styles_min_css-node_modules_stoplight_elem-1ee554.js:1582:1)
    at __webpack_require__ (runtime~main.js:36:33)
    at fn (runtime~main.js:355:21)
    at eval (index.mjs:23:75)
    at ./node_modules/@stoplight/elements-dev-portal/index.mjs (vendors-node_modules_stoplight_elements-dev-portal_styles_min_css-node_modules_stoplight_elem-1ee554.js:7057:1)
    at __webpack_require__ (runtime~main.js:36:33)
    at fn (runtime~main.js:355:21)
    at eval (helloReact.js:7:88)
    at ./src/pages/helloReact.js

[dmuley17]

Hello is this confirmed that issue is still exist @daniel-white

[mallachari]

@dmuley17 @dnyaneshwar-m similarly to CRA case you may try using node-polyfill-webpack-plugin. It should handle all missing polyfills that were supported within webpack earlier.

To do that in docusaurus you'll need to add a custom plugin:

• instal node-polyfill-webpack-plugin: yarn add node-polyfill-webpack-plugin --dev
• create a new file for the plugin such as. ./plugins/webpackPolyfillPlugin.js:

// ./plugins/webpackPolyfillPlugin.js
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = function (context, options) {
  return {
    name: 'webpack-polyfill-plugin',
    configureWebpack(config, isServer, utils) {
      return {
        plugins: [new NodePolyfillPlugin()],
      };
    },
  };
};

• use the custom plugin in docusaurus configuration:

// docusaurus.config.js
module.exports = {
  ...
  plugins: [
    ...
    require.resolve('./plugins/webpackPolyfillPlugin'),
  ],
};

When running it with StoplightProject you may need to set different router property as the default history (BrowserRouter) is not handled by SSR. We may add support for that later on.