Tutorial Starter Kit on Ganache GUI - deployed contract does not show on contract tab in Ganache GUI

:computer: Environment

macos 10.14.6 (18G95)
ganache GUI v2.1.2
Truffle v5.1.2 (core: 5.1.2)
Solidity v0.5.12 (solc-js)
Node v11.1.0
Web3.js v1.2.2

:1234: Code to reproduce

Using ganache GUI, Contract page, click on newly deployed Contract and the it render a blank window.

https://github.com/OpenZeppelin/starter-kit-tutorial
but instead of #run just:

  • start ganache GUI and link to the project truffle-config.js and set port to 8545
  • openzeppelin init
  • openzeppelin compile
  • openzeppelin create Counter (with or without calling a fn on the contract instance, it does not change behaviour)

Then go on contract page, see your newly Counter contract and click on it to see the bank page.
Do you use only Ganache CLI or also use GUI without issue ? Perhaps itā€™s a misconfiguration I donā€™t know. Thanks for the help :v:

1 Like

Hi @grog,

Welcome to the community forum :wave:
Thanks for posting here.

You should be able to use the Starter Kit with ganache-cli or Ganache GUI.

I use ganache-cli on Windows Subsystem for Linux (WSL).
I can use Ganache GUI but have issues viewing Contracts and Events tab due to my setup, so unfortunately canā€™t reproduce on my system.

What I donā€™t know is if it is possible with OpenZeppelin SDK upgradeable contracts to view Proxy contracts in the Contracts or Events tab of Ganache GUI.

I suggest that you may want to try compiling with Truffle.
You could remove the build directory and either do truffle compile first or oz create and it will do a truffle compile as you have a truffle-config.js file.

If you get this to work, please let me know.
I need to dust off a pure Windows box or my old Mac to try this out, Iā€™ll see if I can do this next week sometime.

Hi,

so if you get a white page in the browser, then I first check for error messages on npm start. So check the terminal an look if there are some errors.
The reason is, that eslint has been updated, and sometimes this causes error messages that were warning before.

Second, open the developer window in you browser cmd+shift+I or ctrl+shift+I dependant of what you are using (same on firefox and chrome)

Reload and look at warnings and error messages.

To me happend last week: I came back from lunch to my computer and the system was broken. This was caused by an autoupdate of eslint that made the code not compile anymore. And 2 hours late a vscode update crashed the plugin prettier.

So this was nasty, but I learned why this was ok and make senseā€¦

1 Like

Thanks for your replies. So given Chrome console logs, it looks like the error is related to an ethereum address checksum function:

/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:187 TypeError: Cannot read property 'replace' of undefined
    at ChecksumAddress._this.toChecksumAddress.address [as toChecksumAddress] (ChecksumAddress.js? [sm]:6)
    at ChecksumAddress.render (ChecksumAddress.js? [sm]:22)
    at Mh (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:173)
    at Lh (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:172)
    at mj (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:247)
    at jj (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:216)
    at Z (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:210)
    at $i (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:206)
    at /Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:114
    at exports.unstable_runWithPriority (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/scheduler/cjs/scheduler.productiā€¦:20)
    at vf (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:113)
    at yf (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:114)
    at O (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:113)
    at fj (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:207)
    at Sd (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:86)

/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:114 Uncaught TypeError: Cannot read property 'replace' of undefined
    at ChecksumAddress._this.toChecksumAddress.address [as toChecksumAddress] (ChecksumAddress.js? [sm]:6)
    at ChecksumAddress.render (ChecksumAddress.js? [sm]:22)
    at Mh (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:173)
    at Lh (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:172)
    at mj (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:247)
    at jj (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:216)
    at Z (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:210)
    at $i (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:206)
    at /Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:114
    at exports.unstable_runWithPriority (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/scheduler/cjs/scheduler.productiā€¦:20)
    at vf (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:113)
    at yf (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:114)
    at O (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:113)
    at fj (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:207)
    at Sd (/Applications/Ganache.app/Contents/Resources/app.asar/node_modules/react-dom/cjs/react-dom.productiā€¦:86)

Just to remind here that itā€™s not the contract ā€œsummaryā€ page itself that does not render (which list all project contracts), but the page on the specific one after deployed (ā€œCounterā€ here)

@abcoathup I skipped openzeppelin compile to directly oz create Counter which trigger truffle compile but with the same error as above.

I even tried with ganache@2.3.0-internal.4 just for curiosityā€™s sake but same error. I guess Iā€™ll keep simple with ganache cli :sweat_smile:

1 Like
TypeError: Cannot read property 'replace' of undefined

When calculating checksum. So this is a JavaScript-Error from the application itself. So there are some possibilities:
1.) Check the version of ganache you are using
2.) Is you system up to date, - for example old version or LTS Linux versions for development
3.) Check you run from the right environment (Windows just a klick, nothing to do). Linux running from non root console

If nothing helps, I would say you can do pretty nothing, because you are not the owner of the code and may issue a request on ganache github.

So I would suggest to move to the command line an use ganache-cli and hope the error comes from the UI code, which is not used on CLI :wink:

Open a terminal and type in ganache-cli. It will print out some messages, including the address and port for connecting with the localblockchain for migrating and testing. Remember ganache and ganach-cli will offer different ports. So you need to adopt the truffle-config to the right port

So I would do the same as [abcoathup]. Working with ganache-cli gives you more and better options than running ganach. Hope this helps