Docker compose fails

[jreades]

Hi -- I'm trying to adapt a starter Python course that we wrote a few years ago for use with Binder to the template provided here since it provides a lot of really useful features in terms of self-testing of both code and comprehension.

We already make use of Docker so I was quite excited to think that I'd not have to go anywhere near npm since my previous excursions into the package manager have been... challenging. It might just be my poor understanding of node, but having forked the repository as a template and cloned it to my local machine I'm stuck on this:

 ⠿ Container code-camp-rebooted-gatsby-1  Create...                                        27.1s
Attaching to code-camp-rebooted-gatsby-1
code-camp-rebooted-gatsby-1  | /usr/local/lib/node_modules/gatsby-cli/node_modules/gatsby-telemetry/lib/telemetry.js:39
code-camp-rebooted-gatsby-1  |   store = new _eventStorage.EventStorage();
code-camp-rebooted-gatsby-1  |         ^
code-camp-rebooted-gatsby-1  |
code-camp-rebooted-gatsby-1  | SyntaxError: Unexpected token =
code-camp-rebooted-gatsby-1  |     at Module._compile (internal/modules/cjs/loader.js:723:23)
code-camp-rebooted-gatsby-1  |     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
code-camp-rebooted-gatsby-1  |     at Module.load (internal/modules/cjs/loader.js:653:32)
code-camp-rebooted-gatsby-1  |     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
code-camp-rebooted-gatsby-1  |     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
code-camp-rebooted-gatsby-1  |     at Module.require (internal/modules/cjs/loader.js:692:17)
code-camp-rebooted-gatsby-1  |     at require (internal/modules/cjs/helpers.js:25:18)
code-camp-rebooted-gatsby-1  |     at Object.<anonymous> (/usr/local/lib/node_modules/gatsby-cli/node_modules/gatsby-telemetry/lib/index.js:21:18)
code-camp-rebooted-gatsby-1  |     at Module._compile (internal/modules/cjs/loader.js:778:30)
code-camp-rebooted-gatsby-1  |     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
code-camp-rebooted-gatsby-1 exited with code 1

This is using the repo as cloned on Docker 4.4.2 (Intel Mac running Monterey 12.2.1) with no attempts at modification. Tracing this error via Google led me to this:

With what you provided I'd guess you're running an ancient version of Node:

.nvm/versions/node/v10.24.1
You'll need to use at least Node 14.15.0 with Gatsby

So it looks to me like something (in sharp?) is no longer compatible with what's being installed during docker-compose and hasn't had its version pinned to a compatible one (which seems strange given the sheer overwhelming detail of package-lock.json). Trying to manually install sharp as part of the build process hasn't worked for me. This is almost certainly a function of my lack of knowledge about node. Is there a pre-built image somewhere that I can use, or does that not work because the web site is not actually mounted from the local FS but baked into the build? It doesn't look like that's the case but...

Anyway, since then I've tried this tutorial, this tutorial, and this tutorial. The last one has gotten me closest to a running Docker image but installs someone else's package.json plan with various version locks that are only a bit more recent than this starter course. When I try to bring in the bits that seem to be missing (by comparing against your package.json file) I end up in npm ::hell::.

Is there a process/explanation for installing this stuff from scratch so that I'm not doing cargo cult stuff with npm, package.json, and package-lock.json?

If I can get this building I'd be happy to put a Docker image on the Hub so that a backup process exists as and when the build starts failing...

P.S. Do I also infer that each code cell currently launches its own Binder instance?

[jreades]

OK, I've tried to work out for myself the issues with installing from scratch and have the following notes that gets me down to just three errors (see below) with the web site launching and some bits functioning as expected (but others not). This is mix of reference stuff that I've got in half-bash/half-markdown format:

Install gatsby

APPDIR = 'client'
npm install --global gatsby-cli
mkdir docker-gatsby && cd $_
gatsby new $APPDIR
cd $APPDIR
npm install

Install dependences

npm install --save juniper-js node-sass prismjs react react-dom react-helmet rehype-react reveal.js classnames autoprefixer @phosphor/widgets @jupyterlab/rendermime @jupyterlab/outputarea browser-monads react-use-localstorage crypto-browserify node-polyfill-webpack-plugin stream-browserify

Install plugins

npm install gatsby-plugin-sass gatsby-plugin-react-helmet gatsby-source-filesystem gatsby-plugin-react-svg gatsby-plugin-sharp gatsby-plugin-sitemap gatsby-plugin-offline

Install Transforms and Related

npm install gatsby-transformer-remark gatsby-transformer-sharp
npm install gatsby-remark-copy-linked-files gatsby-remark-prismjs gatsby-remark-smartypants gatsby-remark-images gatsby-remark-unwrap-images

Install

npm install

Grab Existing Repo Stuff

• Copy over gatsby-config.json
• Copy over gatsby-browser.js
• Copy over gatsby-node.js
• Copy over theme.sass
• Copy over static folder contents
• Look in src folder:
  • Copy over templates folder contents
  • Copy over index.js
  • Copy over styles folder contents
  • Copy over components folder contents
• Comment out indentedSyntax: true in gatsby-config.js
• Add meta.json
  • And add "author": "Foo" to this file

Add expected folders

mkdir -p chapters
mkdir -p slides
mkdir -p exercises

And copy contents (so could be cp -r).

Edits to templates

• Replace @illinois/... import in src/templates/chapter.js with react-use-localstorage
• Replace marked.js import in src/components/slides.js with markdown.js
• Add the below to tail of gatsby-node.js:

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
   resolve: {
      fallback: {
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve('stream-browserify'),
      },
    },
  })
}

Fixes to imports in components

perl -i -p -e 's|import classes from|import * as classes from|' ../components/choice.js
perl -i -p -e 's|import classes from|import * as classes from|' ../components/code.js
perl -i -p -e 's|import classes from|import * as classes from|' ../components/exercise.js
perl -i -p -e 's|import classes from|import * as classes from|' ../components/hint.js
perl -i -p -e 's|import classes from|import * as classes from|' ../components/layout.js
perl -i -p -e 's|import classes from|import * as classes from|' ../components/link.js
perl -i -p -e 's|import classes from|import * as classes from|' ../components/slides.js
perl -i -p -e 's|import classes from|import * as classes from|' ../components/typography.js
perl -i -p -e 's|import classes from|import * as classes from|' ../pages/index.js
perl -i -p -e 's|import classes from|import * as classes from|' ../templates/chapter.js

Template Issues

Try removing global keyword and indenting for .sass files:

• Fixes reveal from slides.module.sass error

Still Stuck

warn ./src/components/code.js
Attempted import error: 'input' is not exported from '../styles/code.module.sass' (imported as
'classes').
warn ./src/components/code.js
Attempted import error: 'button' is not exported from '../styles/code.module.sass' (imported as
'classes').
warn ./src/components/layout.js
Attempted import error: 'description' is not exported from '../styles/layout.module.sass'
(imported as 'classes').

[jreades]

One more note... the docker/Dockerfile in space-course does still build but is also emitting warnings and refusing to run after running make build and make gatsby-dev:

 ERROR

Gatsby requires Node.js 14.15.0 or higher (you have v12.22.10).
Upgrade Node to the latest stable release: https://gatsby.dev/upgrading-node-js


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! spacy-course@0.0.1 dev: `gatsby develop --host=0.0.0.0`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the spacy-course@0.0.1 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2022-02-23T10_25_35_323Z-debug.log
make: *** [gatsby-dev] Error 1