[SOLVED] Ethereum-boilerplate Error when "yarn start"

Moralis General
#1

Following the steps in https://github.com/ethereum-boilerplate/ethereum-boilerplate#readme
When I run
yarn start I get theis:

PS J:\_a\Moralis-JS-SDK-main\ethereum-boilerplate> yarn start
yarn run v1.22.19
$ next start
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from J:\_a\Moralis-JS-SDK-main\ethereum-boilerplate\.env.local
info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
Error: Could not find a production build in the 'J:\_a\Moralis-JS-SDK-main\ethereum-boilerplate\.next' directory. Try building your app with 'next build' before starting the production server. https://nextjs.org/docs/messages/production-start-no-build-id
    at NextNodeServer.getBuildId (J:\_a\Moralis-JS-SDK-main\ethereum-boilerplate\node_modules\next\dist\server\next-server.js:116:23)
    at new Server (J:\_a\Moralis-JS-SDK-main\ethereum-boilerplate\node_modules\next\dist\server\base-server.js:70:29)
    at new NextNodeServer (J:\_a\Moralis-JS-SDK-main\ethereum-boilerplate\node_modules\next\dist\server\next-server.js:63:9)
    at NextServer.createServer (J:\_a\Moralis-JS-SDK-main\ethereum-boilerplate\node_modules\next\dist\server\next.js:140:16)
    at async J:\_a\Moralis-JS-SDK-main\ethereum-boilerplate\node_modules\next\dist\server\next.js:149:31
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Tried to clean cache, and other suggestions, but no help
What am I missing?

#2

Use the command yarn dev instead for development mode.

#3

Thanks, that worked.
You can close this for now, I will come back for more soon :slightly_smiling_face:

#4

You can make a new topic if you have another issue or question or post in this one.

#5

BTW, I really appreciate your prompt reply, this is unmatched !
Keep up the good work !
I would have some “suggestions” that may or may not be proper to post here.
Any good place to send some?
Or start a “watercooler” chat? I woud recommend that (unless you already have it I am just not aware of it… :slightly_smiling_face:)
Thank you

#6

You could post them here. For more general discussions/chat, you can join our Discord server.

#7

Installed running
yarn dev
Clicking on “Connect Wallet” gves me the errors (Crome and Brave browsers)
brave chrome
Must be something really obvious…

#8

Can you post your package.json? Which wallet extension are you using?

#9

I am trying to connect via metamask, but did not do anything before clicking on the “connect Wallet”.
(Note that I only got that far when I used “yarn dev” instead of just “yarn”)

Here is my package.json:

{
  "name": "acorn",
  "description": "ECMAScript parser",
  "homepage": "https://github.com/acornjs/acorn",
  "main": "dist/acorn.js",
  "types": "dist/acorn.d.ts",
  "module": "dist/acorn.mjs",
  "exports": {
    ".": [
      {
        "import": "./dist/acorn.mjs",
        "require": "./dist/acorn.js",
        "default": "./dist/acorn.js"
      },
      "./dist/acorn.js"
    ],
    "./package.json": "./package.json"
  },
  "version": "8.8.1",
  "engines": {
    "node": ">=0.4.0"
  },
  "maintainers": [
    {
      "name": "Marijn Haverbeke",
      "email": "[email protected]",
      "web": "https://marijnhaverbeke.nl"
    },
    {
      "name": "Ingvar Stepanyan",
      "email": "[email protected]",
      "web": "https://rreverser.com/"
    },
    {
      "name": "Adrian Heine",
      "web": "http://adrianheine.de"
    }
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/acornjs/acorn.git"
  },
  "license": "MIT",
  "scripts": {
    "prepare": "cd ..; npm run build:main"
  },
  "bin": {
    "acorn": "./bin/acorn"
  }
}
#10

Where is that from? This is the default package.json.

#11

I changed to the correct package.json, same error.
So I went back and tried to follow the instructions for the self hosting server setup, and the server is running fine locally.
Looking at more details it seeme that the error is:
“errorError: Cannot authenticate, no account returned from provider”

So I tried the add the dashbord (for experimenting, maybe the above error needs some actions from the dashboard, just thinking…)
As shown in the instructions, by running
"yarn add parse-dashboard"
Then I got this got error:


PS J:\_a\Moralis-JS-SDK-main\parse-server-migration> yarn add parse-dashboard
yarn add v1.22.19
[1/4] Resolving packages...
warning parse-dashboard > [email protected]: Please use another csrf package
[2/4] Fetching packages...
warning Pattern ["debug@>= 2.6.9 < 3.0.0 || >= ^3.1.0"] is trying to unpack in the same destination "C:\\Users\\laszlo\\AppData\\Local\\Yarn\\Cache\\v6\\npm-debug-3.2.7-integrity\\node_modules\\debug" as
pattern ["debug@^3.1.0","debug@^3.2.7","debug@^3.2.7","[email protected]"]. This could result in non-deterministic behavior, skipping.
error Command failed.
Exit code: 128
Command: git
Arguments: ls-remote --tags --heads ssh://[email protected]/mongodb-js/mongodb-tools.git
Directory: J:\_a\Moralis-JS-SDK-main\parse-server-migration
Output:
[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

So now I have two problems to solve… :smiley:

#12

You are trying to use the ethereum-boilerplate (which uses Moralis 2.0) with a self-hosted server (moralis-v1 / react-moralis)?

Have you made the required changes in the authentication code?

#13

Sorry, jumping around, but where do I apply that change?
Thank you

#14

In the boilerplate where they use the authenticate() or enableWeb3() code for the login button in the top right corner. Try /src/components/Account.jsx.

Have a look at the example in the link I posted - you need to apply the change to any similar code.

#15

Here is what I have in ConnectButton.tsx


import { InjectedConnector } from 'wagmi/connectors/injected';
import { signIn, signOut, useSession } from 'next-auth/react';
import { useAccount, useConnect, useDisconnect, useSignMessage } from 'wagmi';
import apiPost from 'utils/apiPost';
import { Button, Text, HStack, Avatar, useToast } from '@chakra-ui/react';
import { getEllipsisTxt } from 'utils/format';

const ConnectButton = () => {
  const { connectAsync } = useConnect({ connector: new InjectedConnector() });
  const { disconnectAsync } = useDisconnect();
  const { isConnected } = useAccount();
  const { signMessageAsync } = useSignMessage();
  const toast = useToast();
  const { data } = useSession();

  const handleAuth = async () => {
    if (isConnected) {
      await disconnectAsync();
    }
    try {
      const { account, chain } = await connectAsync();

      const userData = { address: account, chain: chain.id, network: 'evm' };

      const { message } = await apiPost('/auth/request-message', userData);

      const signature = await signMessageAsync({ message });

      await signIn('credentials', { message, signature, callbackUrl: '/' });
    } catch (e) {
      toast({
        title: 'Oops, something is wrong...',
        description: (e as { message: string })?.message,
        status: 'error',
        position: 'top-right',
        isClosable: true,
      });
    }
  };

  const handleDisconnect = async () => {
    await disconnectAsync();
    signOut({ callbackUrl: '/' });
  };

  if (data?.user) {
    return (
      <HStack onClick={handleDisconnect} cursor={'pointer'}>
        <Avatar size="xs" />
        <Text fontWeight="medium">{getEllipsisTxt(data.user.address)}</Text>
      </HStack>
    );
  }

  return (
    <Button size="sm" onClick={handleAuth} colorScheme="blue">
      Connect Wallet
    </Button>
  );
};

export default ConnectButton;

How do I proceed? Replace this with what?
Is that all I have to do?
Sorry, naybe I could find a easy-to follow tutorial for self-hosted server, and all I need is authentication (metamask) and invoke a smartcontract (like a donation)
Sorry for my ignorance but I thought this would be easy, so I can focus on the smartcontract part
Thank you for any help

#16

That is the correct place. You need to install and use the moralis-v1 / react-moralis libraries like in that example to authenticate with a self-hosted server.

The process is:

  1. Enable web3 to get user’s account and chainId
  2. Make cloud function call to requestMessage to get the right message to sign
  3. User signs the message, if it is successful, user is authenticated

This will be a bit more complex because the ethereum-boilerplate v2 that you’re using is for Moralis 2.0, not using Moralis servers. Making this change to use the Auth API is easier for an existing app that is using moralis-v1 / react-moralis. There are more changes that are required like using MoralisProvider.

#17

At this pont all I would need is a working example with authentication, and invoking a smartcontract in a self-hosted envionment.
Is there a WORKING example anywhere?
With step-by-step instructions for idiots like me :slightly_smiling_face:

#18

There is a working demo here.

With moralis-v1 SDK you can use executeFunction to call contract functions, otherwise you can use ethers.js (which is what moralis-v1 uses).