Stoplight element react failed with error

[Danny]

I am trying to use Elements Dev Portal for REACT after following the steps mentioned below
https://meta.stoplight.io/docs/elements/11b969f962273-elements-dev-portal-in-react

Application is failing to load and giving error

Attached error snippet from browser

Could you please guide and provide possible solution to fix the issue.

[Danny]

Compiled with problems:
×
ERROR in ./node_modules/@stoplight/json-schema-ref-parser/lib/util/url.js 29:0-38
Module not found: Error: Can't resolve 'url' in 'C:\Users\DnyaneshwarMuley\workspace\icedq-docs\node_modules\@stoplight\json-schema-ref-parser\lib\util'
Did you mean './url'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (C:\Users\DnyaneshwarMuley\workspace\icedq-docs\node_modules\@docusaurus\core\node_modules, node_modules, C:\Users\DnyaneshwarMuley\workspace\icedq-docs\node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }
ERROR in ./node_modules/@stoplight/yaml-ast-parser/dist/src/type/binary.js 2:17-41
Module not found: Error: Can't resolve 'buffer' in 'C:\Users\DnyaneshwarMuley\workspace\icedq-docs\node_modules\@stoplight\yaml-ast-parser\dist\src\type'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
	- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "buffer": false }

[Danny]

Can someone please help to resolve the issue ?

[Chelsea Hohmann]

@dmuley17 we need more information to be able to help you:

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?

[Dario Nascimento]

Same issue here

[Dario Nascimento]

In https://github.com/stoplightio/json-schema-ref-parser/blob/master/lib/util/url.js#L31 , the code is requesting the NodeJS module url. Before webpack 5, this was polyfill by NodeJS but moving forward it needs to be added. Could you add it as a dependency?

[Danny]

we are using react flavor of elements. Tried fixing all the as per web but still same issue persist and never got the success.

For minimal reproducible we just need to follow -

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

npx create-react-app my-dir --template @stoplight/elements-dev-portal

[github-actions]

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

[Jakub Jankowski]

@dmuley17 since CRA is now using webpack 5 that doesn't come with node polyfills anymore they need to be added separately. The easiest way to do that is to include node-polyfill-webpack-plugin to CRA webpack config. This can be done either by:

1. Ejecting CRA configuration:

• running npm eject script
• installing node-polyfill-webpack-plugin
• adding NodePolyfillPlugin to config/webpack.config.js:

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
...
plugins: [
  // Other plugins...
  new NodePolyfillPlugin(),
]

2. Using react-app-rewired package that overrides CRA webpack config without ejecting:

• installing react-app-rewired
• installing node-polyfill-webpack-plugin
• overriding default scripts in package.json:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

• creating config-overrides.js configuration file in root directory:

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = function override(config, env) {
  config.plugins.push(
    new NodePolyfillPlugin()
  );
  return config;
};

We'll update elements docs with that process.