Troubleshooting

Dev Environment Setup and commonly reported issues

If you run into issues with the dev environment for the Kwenta dApp, please read the troubleshooting information below. If this doesn't help you further, don't hesitate to ask the devDAO community in the #community-dev channel for assistance!

Please make sure you are on the latest stable (LTS) versions of nodejs and npm.

NPM issues with webpack

When introducing new packages or updating packages, users reported errors, similar to these below:

platschi@platschi kwenta % npm run dev
[...]
TypeError: Cannot read properties of undefined (reading 'tap')
    at /Users/platschi/Templates/devDAO/leovct/kwenta/node_modules/@next/react-refresh-utils/ReactRefreshWebpackPlugin.js:100:61
    at SyncHook.eval [as call] (eval at create (/Users/platschi/Templates/devDAO/leovct/kwenta/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (/Users/platschi/Templates/devDAO/leovct/kwenta/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/Users/platschi/Templates/devDAO/leovct/kwenta/node_modules/next/node_modules/webpack/lib/Compiler.js:631:26)
    at /Users/platschi/Templates/devDAO/leovct/kwenta/node_modules/next/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/platschi/Templates/devDAO/leovct/kwenta/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/platschi/Templates/devDAO/leovct/kwenta/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/Users/platschi/Templates/devDAO/leovct/kwenta/node_modules/next/node_modules/webpack/lib/Compiler.js:662:28)
    at /Users/platschi/Templates/devDAO/leovct/kwenta/node_modules/next/node_modules/webpack/lib/Watching.js:77:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/platschi/Templates/devDAO/leovct/kwenta/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)

platschi@platschi kwenta % npm i
npm WARN ERESOLVE overriding peer dependency
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint-plugin-testing-library
npm ERR!   dev eslint-plugin-testing-library@"^5.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional eslint-plugin-testing-library@"^3.9.0" from [email protected]
npm ERR! node_modules/eslint-config-react-app
npm ERR!   dev eslint-config-react-app@"6.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/eslint-plugin-testing-library
npm ERR!   peerOptional eslint-plugin-testing-library@"^3.9.0" from [email protected]
npm ERR!   node_modules/eslint-config-react-app
npm ERR!     dev eslint-config-react-app@"6.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/platschi/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/platschi/.npm/_logs/2022-04-20T17_24_43_242Z-debug-0.log

One temporary solution here is to do the following:

rm -r nodes_modules
rm package-lock.json
npm i --legacy-peer-deps

Apple M1 Silicon

When trying to run npm run dev on the Kwenta repository, community members with the latest M1 reported several issues with regard to the sharp package.

The recommended solution currently is to use Rosetta Terminal in order to avoid running into runtime errors.

There might be a possible solution by upgrading sharp from v0.26 to v0.28.

Further possible solutions might be found here, depending on the situation:

• https://github.com/lovell/sharp/issues/2954

• https://github.com/lovell/sharp/issues/2460

• https://github.com/lovell/sharp/issues/2460#issuecomment-751491241

How to set up the Kwenta dev environment on an Apple M1 Silicon machine

First, it is recommended to create a duplicate copy of the Terminal app. Open Finder > Applications > Utilities, right-click on Terminal and select Duplicate. Rename the new duplicated Terminal app to something useful, e.g. Rosetta-Terminal.

Right-click on the new Rosetta-Terminaland select Get Info. In the settings window popping up, make sure Open with Rosetta is checked. Now open the new duplicated app.

To verify if Rosetta is working, type arch in the Terminal. It should return i386.

While it is possible to run two version of homebrew and node (M1 and Rosetta), it is recommended to remove any arm64homebrew or node installations to avoid issues later on.

Now install the i386version of homebrew according to their website instructions. It should install into the /usr/local/homebrew directory.

Once brew is installed, you can run brew install npm. You can verify that you installed the correct version by typing node -p process.arch which should return x64.

Now, you are ready to clone your fork of the Kwenta repository. If you already cloned the repository earlier, make sure to delete the node_modulesfolder. Once done, run npm i and start your local environment with npm run dev. Voila, it should work now.

If you have questions or still run into trouble, do not hesitate to join our Discord channel and ask away in the #community-devchannel.

Windows

Community members on Windows reported the following issue:

error: cannot spawn .husky/pre-commit: Invalid argument

In order to fix this issue, open the .husky/pre-commit file in your favourite text editor and edit the following:

-# #!/bin/sh
+#!/bin/sh

Additionally, the .eslintrc file might need to be changed:

    "plugins": ["prettier"],
    "rules": {
             "react/react-in-jsx-scope": "off",
-            "prettier/prettier": "error",
+           "prettier/prettier": ["error",
+            {
+                "endOfLine": "auto"
+            }
+            ],
              "no-mixed-spaces-and-tabs": ["warn", "smart-tabs"],