Error when adding react element about elements HOT 9 CLOSED

Can someone please help on this ?

from elements.

anyone? How to deal with this?

from elements.

@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?

from elements.

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

from elements.

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

from elements.

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

from elements.

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

from elements.

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

from elements.

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

from elements.