Can't compile Plutus Playground examples: Could not find module `Playground.Contract' (Ubuntu 20.04)

Question

I can't compile any of the example scripts using Plutus Playground gui:

Compilation Error, Line 2, Column 1 (jump)
 error:
    Could not find module `Playground.Contract'
    Use -v (or `:set -v` in ghci) to see a list of the files searched for.
  |
2 | import Playground.Contract
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^
Compilation Error, Line 3, Column 1 (jump)
 error:
    Could not find module `Plutus.Contract'
    Use -v (or `:set -v` in ghci) to see a list of the files searched for.
  |
3 | import Plutus.Contract
  | ^^^^^^^^^^^^^^^^^^^^^^
Compilation Error, Line 4, Column 1 (jump)
 error:
    Could not find module `PlutusTx.Prelude'
    Use -v (or `:set -v` in ghci) to see a list of the files searched for.
  |
4 | import PlutusTx.Prelude
  | ^^^^^^^^^^^^^^^^^^^^^^^

Looks like all non-standard modules are considered missing (screenshot from playground gui after hitting "Compile").

I'm using Ubuntu 20.04. Here's what I did:

1. Installed nix using sh <(curl -L https://nixos.org/nix/install) --daemon (multi-user installation)
2. Cloned plutus-apps (latest, currently: dd1678bba97e489dc54f2384a7be81e32659ba76)
3. Ran nix-shell in plutus-apps dir.
4. Started playground server inside the nix shell using

$(nix-build -A plutus-playground.server)/bin/plutus-playground-server webserver

and client:

npm start

At this point gui was running ok, but I was getting errors while trying to compile examples:

ConnectionError (HttpExceptionRequest Request { host = "localhost" port = 8009 secure = False requestHeaders = [("Accept","application/json;charset=utf-8,application/json"),("Content-Type","application/json;charset=utf-8")] path = "/runghc" queryString = "" method = "POST" proxy = Nothing rawBody = False redirectCount = 10 responseTimeout = ResponseTimeoutDefault requestVersion = HTTP/1.1 proxySecureMode = ProxySecureWithConnect } NoResponseDataReceived)

5. After some googling/debugging I came up with a solution to connection errors - running the server with:

WEBGHC_URL=http://localhost:8081  $(nix-build -A plutus-playground.server)/bin/plutus-playground-server webserver -p 8081

and changing client configuration in webpack.config.js:

    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 8009,
        https: false, // changed from true due to CA errors
        stats: "errors-warnings",
        proxy: {
            "/api": {
                target: "http://localhost:8081", // port changed from 8080
            },
        },
    },

After these changes playground at least tries to compile the scripts, but it looks like webghc doesn't see plutus packages.

As I mentioned I'm using Ubuntu 20.04 and ghcup with following tool versions:

✔✔ ghc   8.10.7   recommended,base-4.14.3.0 hls-powered
✔✔ cabal 3.6.2.0  latest,recommended                   
✔✔ hls   1.6.1.0  latest,recommended                   
✔✔ stack 2.7.5    latest,recommended                   
✔✔ ghcup 0.1.17.6 latest,recommended 

My nix.conf:

» cat /etc/nix/nix.conf

build-users-group = nixbld
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=
experimental-features = nix-command flakes     

Does anyone know what I'm missing? Please halp :)

EDIT:

Output of nix-shell command:

» nix-shell                                                                                                                                               130 ↵
trace: To materialize project.plan-nix for cabal-install entirely, pass a writable path as the `materialized` argument and run the 'updateMaterialized' script in 'passthru'.
trace: WARNING: 8.10.5 is out of date, consider using 8.10.7.
trace: haskell-nix.haskellLib.cleanGit: /nix/store/dgp5f75dgadnxvy1mybjky2hm7wyxnpl-cardano-node does not seem to be a git repository,
assuming it is a clean checkout.
trace: To make project.plan-nix for cardano-node a fixed-output derivation but not materialized, set `plan-sha256` to the output of the 'calculateMaterializedSha' script in 'passthru'.
trace: To materialize project.plan-nix for cardano-node entirely, pass a writable path as the `materialized` argument and run the 'updateMaterialized' script in 'passthru'.
trace: WARNING: 8.10.5 is out of date, consider using 8.10.7.
trace: To make project.plan-nix for cardano-node a fixed-output derivation but not materialized, set `plan-sha256` to the output of the 'calculateMaterializedSha' script in 'passthru'.
trace: To materialize project.plan-nix for cardano-node entirely, pass a writable path as the `materialized` argument and run the 'updateMaterialized' script in 'passthru'.
trace: To make project.plan-nix for haskell-project a fixed-output derivation but not materialized, set `plan-sha256` to the output of the 'calculateMaterializedSha' script in 'passthru'.
trace: To materialize project.plan-nix for haskell-project entirely, pass a writable path as the `materialized` argument and run the 'updateMaterialized' script in 'passthru'.
trace: To materialize project.plan-nix for haskell-project entirely, pass a writable path as the `materialized` argument and run the 'updateMaterialized' script in 'passthru'.
trace: To materialize project.plan-nix for haskell-project entirely, pass a writable path as the `materialized` argument and run the 'updateMaterialized' script in 'passthru'.
nix-pre-commit-hooks: hooks up to date
pid 1234077's current affinity list: 0-15
pid 1234077's new affinity list: 0-15

Answer 1

It turned out that I was starting the playground server wrong - I was trying to use nix-build inside a nix shell.

What actually works (without any code modifications):

• server:

> nix-shell
> cd plutus-playground-server/
> plutus-playground-server

• client:

> nix-shell
> cd plutus-playground-client/
> npm start

I also added allow-import-from-derivation = true to my nix.conf (as cardano-node docs suggest).

My nix.conf is now:

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=
experimental-features = nix-command flakes
allow-import-from-derivation = true

Thank you @Fermat for your help :)