npm run start in plutus-playground-client throws several "Could not find module" errors

Question

I'm trying to run the plutus-playground-client. My OS is macOS Big Sur 11.6.2

I have set up the environment with the following steps based on the nix install instructions from: https://docs.plutus-community.com/docs/setup/MacOS.html

and the playground setup instructions (on page 2) from: https://docs.google.com/document/d/13112LHG9vVvNUs40oZSqZ-DF6_yFiT_SJZ2NaEmjMM4/edit#

These are the exact steps I've taken for setup:

# install nix
$ sh <(curl -L https://nixos.org/nix/install) --darwin-use-unencrypted-nix-store-volume

# check version 
$ nix --version # prints (nix (Nix) 2.5.1)

# edit nix conf file
$ sudo nano /etc/nix/nix.conf

# after edit, contents of conf file are
build-users-group = nixbld
experimental-features = nix-command
substituters        = https://hydra.iohk.io https://iohk.cachix.org https://cache.nixos.org/
trusted-public-keys = hydra.iohk.io:f/Ea+s+dFdN+3Y/G+FDgSq+a5NEWhJGzdjvKNGv0/EQ= iohk.cachix.org-1:DpRUyj7h7V830dp/i6Nti+NEO2/nhblbov/8MW7Rqoo= cache.nixos.org-1:6NCHdD59X431o0gWypbMrAURkbJ16ZPMQFGspcDShjY=volume

# restart Mac (confirmed this step is needed, or cache isn't recognized)

# clone plutus-apps repo
$ git clone https://github.com/input-output-hk/plutus-apps

# cd into plutus-apps
$ cd plutus-apps

# checkout latest commit
$ git checkout 41149926c108c71831cfe8d244c83b0ee4bf5c8a

# build server (confirmed after mac restart, cache is recognized and this builds in 1-2 min)
$ nix-build -A plutus-playground.server

# enter nix-shell (as expected, first time always takes ~1 hour)
$ nix-shell

# once in nix-shell, run playground server
$ cd plutus-playground-client
$ plutus-playground-server

# server builds successfully, output printed below:
plutus-playground-server: for development use only
[Info] Running: (Nothing,Webserver {_port = 8080, _maxInterpretationTime = 80s})
Initializing Context
Initializing Context
Warning: GITHUB_CLIENT_ID not set
Warning: GITHUB_CLIENT_SECRET not set
Warning: JWT_SIGNATURE not set
Interpreter ready 

# in second terminal, enter nix-shell
$ nix-shell

# attempt to run client
$ cd plutus-playground-client
$ npm run start

client starts building, but always runs into the following error.

plutus-playground-server: user error (Error evaluating simulation: InterpreterError (CompilationErrors [CompilationError {filename = "\n/private/tmp/web-ghc-work-81ca65233755c126/Main.hs", row = 2, column = 1, text = [" error:","    Could not find module \8216Playground.Contract\8217","    Use -v (or `:set -v` in ghci) to see a list of the files searched for.","  |","2 | import Playground.Contract","  | ^^^^^^^^^^^^^^^^^^^^^^^^^^"]},CompilationError {filename = "/private/tmp/web-ghc-work-81ca65233755c126/Main.hs", row = 3, column = 1, text = [" error:","    Could not find module \8216Plutus.Contract\8217","    Use -v (or `:set -v` in ghci) to see a list of the files searched for.","  |","3 | import Plutus.Contract","  | ^^^^^^^^^^^^^^^^^^^^^^"]},CompilationError {filename = "/private/tmp/web-ghc-work-81ca65233755c126/Main.hs", row = 4, column = 1, text = [" error:","    Could not find module \8216PlutusTx.Prelude\8217","    Use -v (or `:set -v` in ghci) to see a list of the files searched for.","  |","4 | import PlutusTx.Prelude","  | ^^^^^^^^^^^^^^^^^^^^^^^"]}]))
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `plutus-playground-generate-purs && npm install && npm run install:spago && npm run build:webpack:dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/gmoratorio/.npm/_logs/2022-01-14T20_08_36_926Z-debug.log

It looks like it can't resolve several dependencies

Playground.Contract
Plutus.Contract
PlutusTx.Prelude

but I can't figure out how to fix the resolution.

I've tried wiping my install and starting over several times including running

nix-collect-garbage
nix-build -A plutus-playground.server

after reinstalling nix, and every time I get the same dependency resolution error.

Any help or ideas would be appreciated

Answer 1

This solution https://cardano.stackexchange.com/a/6451/2758 is what finally did it for me:

GC_DONT_GC=1 npm run start

instead of just npm run start

Heads up to anyone else seeing this issue!

Edit: to clarify, I'd already seen that post, but when OP said the cache clear had resolved the issue for him, I figured it was something else affecting my build (and it was). Thanks to the last commenter on that thread!

Edit2: immediately after solving this issue I ran into dependency issues when trying to compile in the playground. This was resolved by restarting the server with the same prefix

GC_DONT_GC=1 plutus-playground-server

and then reconnecting the client. This post also contains additional steps - https://github.com/renzwo/cardano-plutus-apps-install-m1/blob/main/README.md

Answer 2

This solution fixed it for me: https://stackoverflow.com/questions/42308879/how-to-solve-npm-error-npm-err-code-elifecycle