search

PatrickAlphaC / html-js-ethers-connect

37 stars 15 forks source link

Browserify and ethers compatibility errors #10

Open AskBlockchain opened 1 year ago

AskBlockchain commented 1 year ago

Hi Patrick, I'm trying to follow this course on YT but I keep getting stuck and the "browserify" step. I tried everything from ChatGPT, StackOverflow, deleted the project and restart. I commented out: const { ethers } = require("ethers"); and it finally created the bundle file, but then I got this error in the console:

bundle.js:1 Uncaught Error: Cannot find module 'ethers' at o (bundle.js:1:525) at bundle.js:1:682 at 1 (bundle.js:2:20) at o (bundle.js:1:631) at r (bundle.js:1:797) at bundle.js:1:826 at bundle.js:1:316 at bundle.js:1:32

These were the error before. BTW I tried hardthat at first then I tried Truffle but still no joy 😔

C:\Users\web3-frontend-demo> browserify ./index.js --standalone bundle -o ./dist/bundle.js
Error: Parsing file C:\Users\web3-frontend-demo\node_modules\ethers\lib.commonjs\abi\abi-coder.js: Unexpected token (112:4)

npx browserify index.js --standalone bundle -o ./dist/bundle.js Error: Can't walk dependency graph: Cannot find module 'C:\Users\contracts\full-stack-web3\hardhat-simple-storage-fcc\index.js' from 'C:\Users\contracts\full-stack-web3\hardhat-simple-storage-fcc_fake.js' required by C:\Users\contracts\full-stack-web3\hardhat-simple-storage-fcc_fake.js at C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\resolve\lib\async.js:167:35 at load (C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\resolve\lib\async.js:186:43) at onex (C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\resolve\lib\async.js:211:17) at C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\resolve\lib\async.js:24:69 at FSReqCallback.oncomplete (node:fs:208:21)

PatrickAlphaC commented 1 year ago

Hmm... perhaps can you try the raw-js branch?

It's a little different then what's in the video, but I've gotten a lot of feedback that it's been easier for others to use.

https://github.com/PatrickAlphaC/html-js-ethers-connect/tree/raw-js

I just updated the readme so that one is easier.

AskBlockchain commented 1 year ago

Feedback: That works but yarn build didn't. How come and is that an issue with my machine? yarn run v1.22.19 warning package.json: No license field error Command "build" not found. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Also, MetaMask suggested using '@metamask/detect-provider'. How come you didn't use it in your tutorial? just asking 🙂

Ref: // This function detects most providers injected at window.ethereum import detectEthereumProvider from '@metamask/detect-provider';

const provider = await detectEthereumProvider();

if (provider) { // From now on, this should always be true: // provider === window.ethereum startApp(provider); // initialize your app } else { console.log('Please install MetaMask!'); }

AskBlockchain commented 1 year ago

The transaction reverts when I click the "Execute" button: eth_call Contract call: From: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266 To: 0x5fbdb2315678afecb367f032d93f642f64180aa3

Error: Transaction reverted without a reason string at . (0x5fbdb2315678afecb367f032d93f642f64180aa3)

Any ideas why?

mwang259 commented 1 year ago

The transaction reverts when I click the "Execute" button: eth_call Contract call: From: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266 To: 0x5fbdb2315678afecb367f032d93f642f64180aa3

Error: Transaction reverted without a reason string at . (0x5fbdb2315678afecb367f032d93f642f64180aa3)

Any ideas why?

Hi, I have the same issue. Do you have solved that?