-
Notifications
You must be signed in to change notification settings - Fork 712
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Webpack v5 support #584
Comments
RedwoodJS projects v0.36.0 and above use Webpack V5 (release notes). Here's a fix for using Wallet Connect in RedwoodJS until this issue is resolved: We need to add 8 missing node modules manually to the Redwood web app's webpack. If you haven't run this command already, create the config file: yarn rw setup webpack Then add the following to your config in const webpack = require('webpack')
// See https://github.com/WalletConnect/walletconnect-monorepo/issues/584
config.resolve.fallback = {
os: require.resolve(`os-browserify/browser`),
https: require.resolve(`https-browserify`),
http: require.resolve(`stream-http`),
stream: require.resolve(`stream-browserify`),
util: require.resolve(`util/`),
url: require.resolve(`url/`),
assert: require.resolve(`assert/`),
crypto: require.resolve(`crypto-browserify`),
};
config.plugins.push(
new webpack.ProvidePlugin({
process: "process/browser",
Buffer: ['buffer', 'Buffer'],
})
) Now install the missing 8 packages in yarn add stream-browserify stream-http crypto-browserify https-browserify os-browserify util url assert Test the app builds properly in development and production yarn rw dev
# It works in development? Great!
yarn rw build Update 10/19As mentioned in microsoft/PowerBI-visuals-tools#365 (comment) you may also need to add yarn add -D process |
I did it differently.
I don't think we should depend from Node.js stuff in our browser dapp. P.S.: after recompiling it broke again with {
"name": "ethbox-dapp",
"version": "0.0.0",
"browser": {
"os": false,
"https": false,
"http": false,
"stream": false,
"util": "./node_modules/util",
"url": false,
"assert": false,
"crypto": false
},
...
} P.P.S.: after compiling again it broke once again with something related to url.parse. I've fixed with: "browser": {
"os": false,
"https": false,
"http": false,
"stream": false,
"util": "./node_modules/util",
"url": "./node_modules/url",
"assert": false,
"crypto": false
},
...
} It's ridicolous that we have to deal with all this. |
Such is the way of FOSS and Webpack V5. Maintainers can't know/solve everything. Thanks for providing an alternative solution! |
Hi, I also encountered this. May be we should add temporary solution in the readme for those with Webpack 5? |
This package is not compatible with angular (webpack v5). such a shame. Any update on this? |
@4skinSkywalker Can you please post your |
Also, both v1 and v2 don't work for React when react-scripts v5 is used. |
I'm having the same problem regarding "failed to parse source maps" with react-scripts v5 and @web3-react/walletconnect-connector which I believe is due to webpack 5. I've heard that downgrading to react-scripts v4 is the best option right but unfortunately, that isn't an option for me. |
@BenGOsborn Yep, I ended up downgrading to react-scripts v4 although that's not the solution I'm looking for. |
Webpack 5 is been out for quite some time now, and provides very interesting features, some of them that I'm using and I can't simply downgrade. I'm currently stuck with the same "failed to parse source maps" error, and can't get it to work, hopefully, we get some good news soon. If anyone solves it, please post it so others can also move on. Thanks |
Same here |
temporary solution for those who are using react-scripts v5:
Although this will able you to open the wallet connect modal and everything works perfectly but you'll see a lot of warnings with this context: (at least in CRA) I assume by adding support of webpack 5 in this project all of these problems will be resolved. |
Hi there, any other changes to your webpack, etc.? I still can't get past this buffer is not defined error with react-scripts v5. |
Any news how to overcome this issue? |
Howdy! There are several users who posted a fix above. If that doesn't work let me know. |
For const { ProvidePlugin } = require('webpack');
module.exports = {
webpack: {
configure: {
ignoreWarnings: [/Failed to parse source map/],
resolve: {
fallback: {
assert: require.resolve('assert/'),
crypto: require.resolve('crypto-browserify/'),
http: require.resolve('stream-http/'),
https: require.resolve('https-browserify/'),
os: require.resolve('os-browserify/browser'),
stream: require.resolve('stream-browserify/'),
url: require.resolve('url/'),
util: require.resolve('util/')
}
}
},
plugins: [
new ProvidePlugin({
Buffer: ['buffer', 'Buffer']
})
]
}
}; And the following packages must be included in the
|
Polyfils aren't no longer injected for the latest version of webpack. GatsbyJS is already using webpack v5. I'd also like to upgrade my own umd package which uses WC.
Example error message during webpack build:
Issue 1: Gotta have those polyfils
Rather than force every app to manually add these packages, they should already be included in the WC packages.
Issue 2: Using Node.JS modules in a browser application
Is this a concern? I read that its not recommended but haven't researched enough to know for sure. Similar issue in another package: angular/angular-cli#20819 (comment)
Temporary Solution
In your application that uses Webpack V5, make the following changes
Then update your webpack config. Here's a GatsbyJS example:
See stack overflow for more info
The text was updated successfully, but these errors were encountered: