[SOLVED] Medium-Final Landing Page / Metamask

I am using the Medium-Final repo (macOS Monterey 12.5.1 / Chrome (105.0.5195.125 [x86_64]). I run yarn start inside it and the Medium landing page emerges on localhost.
So far, so good.
I sign on to Metamask, having previously entered the Mumbai Testnet connect details manually. The page shown here in the screenshot, however, persists, even after I connect to Metamask - so I do not/cannot see the admin/author page, where text is written and posted.

Any ideas, please?
Thanks!

What is your Moralis serverUrl / dapp URL? Make sure it is awake and you have the correct serverUrl and appId in your MoralisProvider (index.js). Do you get any errors in console?

1 Like

Thanks.

  1. Mumbai Testnet server is active
  2. Dapp URL https://dmxose5rxtan.usemoralis.com:2053/server
  3. App ID: ht9VpROLRqgLj316LvUbzGQLzVJQE8aWMuc8n8jf

Everything compiles, but with warnings. What does not fire is the connect wallet button on the landing page.

(21:3) autoprefixer: start value has mixed support, consider using flex-start instead

Warning

(8:3) autoprefixer: end value has mixed support, consider using flex-end instead

Warning

(16:3) autoprefixer: start value has mixed support, consider using flex-start instead

Warning

(27:3) autoprefixer: start value has mixed support, consider using flex-start instead

Search for the keywords to learn more about each warning.

To ignore, add // eslint-disable-next-line to the line before.

assets by path **static/js/*.js** 17.1 MiB

assets by chunk 5 MiB (id hint: vendors)

asset **static/js/vendors-node_modules_ethereumjs_tx_dist_browser_index_js-node_modules_metamask_eth-sig-util_d-f3d9b0.chunk.js** 1.27 MiB **[emitted]** (id hint: vendors) 1 related asset

asset **static/js/vendors-node_modules_web3auth_torus-evm-adapter_dist_torusEvmAdapter_esm_js.chunk.js** 1.18 MiB **[emitted]** (id hint: vendors) 1 related asset

asset **static/js/vendors-node_modules_toruslabs_base-controllers_dist_baseControllers_esm_js.chunk.js** 1.03 MiB **[emitted]** (id hint: vendors) 1 related asset

asset **static/js/vendors-node_modules_solana_web3_js_lib_index_browser_esm_js.chunk.js** 807 KiB **[emitted]** (id hint: vendors) 1 related asset

+ 7 assets

+ 9 assets

assets by path **static/media/*.png** 133 KiB

asset **static/media/medium.83b0a7b6e83a99df521d.png** 84 KiB **[emitted]** **[immutable]** [from: src/images/medium.png] (auxiliary name: main)

asset **static/media/m.953b496cda703c3fa3bc.png** 49.2 KiB **[emitted]** **[immutable]** [from: src/images/m.png] (auxiliary name: main)

asset **asset-manifest.json** 6.89 KiB **[emitted]**

asset **index.html** 1.67 KiB **[emitted]**

cached modules 15.8 MiB (javascript) 133 KiB (asset) 31.8 KiB (runtime) **[cached]** 2482 modules

javascript modules 4.97 KiB

./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[5].use[2]!**./src/components/Sidebar.css** 2.59 KiB **[built]** **[3 warnings]**

./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[5].use[2]!**./src/components/Rightbar.css** 2.38 KiB **[built]** **[1 warning]**

webpack 5.72.1 compiled with **4 warnings** in 3161 ms

You can ignore those warnings for now. Everything seems fine with your server and appId - I can get through with Medium-Final using those settings.

Have you tried another browser or in incognito? Also check your localStorage items for localhost:3000 - browser developer tools > Application / Storage (or similar menu) - there should be a Parse currentUser item after a successful authentication.

Neither Incognito nor other browsers make any difference. Within the Chrome dev tools for Local Storage, we find this:

Mumbai was added manually to Chrome:

Network Name: Mumbai Testnet

New RPC URL: https://rpc-mumbai.maticvigil.com/

Chain ID: 80001

Currency Symbol: MATIC

Block Explorer URL: https://polygonscan.com/

– Metamask allows me to sign, but the pop–up you see in my first image above doesn’t go away :slight_smile:

May be an issue with your local environment - which version of Node are you running (check with node -v)? Also can you post your browser console.

The original repo uses yarn, but you can try using npm to install and run it in a new project (or delete node_modules and yarn.lock in existing project) to see if it works.

Node: v16.16.0
The broswer console only said I should probably update Moralis + React. I did so, but that caused a more serious problem:

ERROR in ./node_modules/react-moralis/lib/index.esm.js 3:0-39

Module not found**:** Error**: Can’t resolve ‘moralis-v1’ in ‘/Users/davidmacfadyen/Medium-Final/node_modules/react-moralis/lib’**

So I deleted everything and went back to square one:

What causes this issue?

[email protected] ~ % yarn start

**yarn run v1.22.19**
warning package.json: No license field
error Command "start" not found.
info Visit **https://yarnpkg.com/en/docs/cli/run** for documentation about this command.

(that URL doesn’t contain the solution – or the yarn start command, sadly)

I tried yarn

add react-scripts

– but that doesn’t help. In fact this generates the following:

**yarn run v1.22.19**

warning ../package.json: No license field

$ react-app-rewired start --scripts-version react-scripts

/bin/sh: react-app-rewired: command not found

error Command failed with exit code 127.

Building back from square one might help me to isolate the problem, but this:

error Command “start” not found.

is remarkably widespread and generates countless possible/contradictory suggestions on Stack. I added these lines to the package.json, but to no effect

“scripts”: {
“start”: “react-app-rewired start --scripts-version react-scripts”,
“build”: “react-app-rewired build --scripts-version react-scripts”,
“test”: “react-app-rewired test --scripts-version react-scripts”,
“eject”: “react-app-rewired eject”,
“lint:check”: “eslint .”,
“lint:fix”: “eslint --fix”,
“prettier:check”: “prettier --check .”,
“prettier:fix”: “prettier --write “**/*.{js,jsx,ts,tsx,css,md,json,html}” .prettierrc --config ./.prettierrc”,
“format”: “npm run lint:fix && npm run prettier:fix”
},

The broswer console only said I should probably update Moralis + React. I did so, but that caused a more serious problem:

If you update the Moralis package, it needs to be moralis-v1, not [email protected]+ and react-moralis would need to be updated as well to 1.4.2. But you don’t need to do that, keep using the same Medium-Final versions.

Since yarn start doesn’t even work now, I would suggest just starting over in a new project.

Why does “yarn start” fail so often, even after “add react-scripts”?

I’m not sure, but you shouldn’t need to make any changes to the default package.json from the Medium-Final repo. Try to get back to where you were with the main page showing.

Done that, thankfully. Now the console output is more revealing.

Looks like you’re using incorrect server settings, links like getPluginSpecs should have your server in front of it (x.usemoralis.com), not localhost:3000.

Can you post your MoralisProvider code (index.js). You need to add your Moralis serverUrl and appId there.

1 Like

Here’s the index.js file. This was my oversight completely.
But I also have trouble getting yarn to work. Neither brew nor npm wanted to install it (the former could not [ homebrew-core is a shallow clone], and the later just flashed up a “job complete” message without actually doing anything). Using curl, I can get this confirmation message.

> Extracting to ~/.yarn...

> Adding to $PATH...

> Successfully installed Yarn 1.22.19! Please open another terminal where the `yarn` command will now be available.

But yarn is still not a recognized command. I’ve been through long instructions about setting/checking paths, but all to no avail: zsh: command not found: yarn

[email protected] ~ % echo $PATH

/opt/homebrew/bin:/Users/davidmacfadyen/.npm-global/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/mywork/maven/bin:export:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from "./App";
import "./index.css";
import { MoralisProvider } from "react-moralis";
import { NotificationProvider } from "web3uikit";
import { BrowserRouter as Router } from "react-router-dom";
const rootElement = document.getElementById("root");
if (!rootElement) throw new Error("Failed to find the root element");
const root = createRoot(rootElement);


root.render(
  <React.StrictMode>
    <MoralisProvider
      initializeOnMount
      appId={"ht9VpROLRqgLj316LvUbzGQLzVJQE8aWMuc8n8jf"}
      serverUrl={"https://dmxose5rxtan.usemoralis.com:2053/server"}
    >
      <NotificationProvider>
        <Router>
          <App />
        </Router>
      </NotificationProvider>
    </MoralisProvider>
  </React.StrictMode>
);

You have no issues with npm e.g. npm install or npm run start? If so you could just stick with that for now.

What have you tried from the possible solutions other people have posted for the yarn issue? Maybe try npm uninstall -g yarn even if installing didn’t work.

1 Like

Uninstalling actually worked. It’s after the global install (in fact any install) that the problems begin. Curl says yarn was installed, but yarn itself (as a command) won’t run from the terminal. Is there a different way to install the SDK and/or all the prereqs for Moralis?

Or a sensible way to erase everything and start again?

You can try using npm instead of yarn to install/run the project (npm install to install everything from package.json, npm run start to start the development server).

It’s after the global install (in fact any install) that the problems begin

After running yarn install, then you get command not found: yarn for yarn start?

You could also try installing a different version of yarn instead of the latest e.g. 1.22.18 (npm install -g [email protected]).

1 Like

I’ll try these, thank you!

I’ve been through long instructions about setting/checking paths, but all to no avail: zsh: command not found: yarn
But when I uninstall yarn - it’s apparently in the system… because it does indeed get removed

new machine, new installs, everything anew… and then…
THANK YOU SO MUCH!
Hopefully my errors will prove useful to others
D.

1 Like