Stoplight element react failed with error
dmuley17 opened this issue · comments
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.
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 }
Can someone please help to resolve the issue ?
@dmuley17 we need more information to be able to help you:
- Are you using web components, angular, react, etc. flavor of elements?
- Can you provide a minimal reproducible example app that shows the error?
Same issue here
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?
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
This ticket has been labeled jira. A tracking ticket in Stoplight's Jira (STOP-92
) has been created.
@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:
- Ejecting CRA configuration:
- running
npm eject
script - installing
node-polyfill-webpack-plugin
- adding
NodePolyfillPlugin
toconfig/webpack.config.js
:
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
...
plugins: [
// Other plugins...
new NodePolyfillPlugin(),
]
- 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.