Error '/bin/sh: 1: gridsome: not found' after Docker image build

Question

My site is a gridsome/vue site that uses python and pandas for data processing. It must use Node >=16.00 < 17.0.0 and yarn.

After running the following Docker commands:

docker-compose build --no-cache

docker-compose up

I'm seeing the following error: /bin/sh: 1: gridsome: not found

[+] Running 1/1

 ✔ Container my-site  Recreated                                                                             1.0s 

Attaching to electrify-chicago-1

my-site  | yarn run v1.22.22

my-site  | $ gridsome develop

my-site  | /bin/sh: 1: gridsome: not found

my-site  | error Command failed with exit code 127.

my-site  | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

my-site exited with code 127

It appears the node_modules aren't being installed. Either that, or yarn isn't being installed properly. Either that, or my WORKDIR isn't being created correctly.

Here is my Dockerfile:

# Ensures Node.js 16.x is installed, which is required for running Gridsome app
FROM python:3.9

# Add the NodeSource PPA
RUN echo 'Package: nodejs\nPin: origin deb.nodesource.com\nPin-Priority: 600' > /etc/apt/preferences.d/nodesource \
    && curl -fsSL https://deb.nodesource.com/setup_16.x | bash - \
    && apt-get install -y nodejs

# Install updates
RUN apt-get update

# Install yarn
RUN npm install -g yarn

# Set working directory
WORKDIR /app

# Copy requirements.txt to the working directory
COPY requirements.txt .

# Copy package.json and yarn.lock to the working directory
COPY package.json yarn.lock ./

# Copy the rest of the application code
COPY . ./

# Install Python dependencies
RUN pip3 install --no-cache-dir -r requirements.txt

# Install dependencies
RUN yarn install

# Expose the port that the app runs on
EXPOSE 8080

# Start the app in development mode
CMD ["yarn", "develop"]

Here's my docker-compose.yml file:

version: '3.8'

services:
  my-site:
    image: my-site:latest
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8080:8080"
    volumes:
      - .:/app

Here is my package.json:

{
  "name": "my-site",
  "version": "0.0.1",
  "main": "index.js",
  "repository": "git@github.com:my-repo/my-site.git",
  "author": "me",
  "engines" : { "node" : ">=16.00 < 17.0.0" },
  "license": "MIT",
  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome develop",
    "explore": "gridsome explore",
    "lint": "yarn eslint --ext .ts,.vue ./src",
    "lint-ci": "yarn lint --format @microsoft/eslint-formatter-sarif --output-file eslint-results.sarif",
    "lint-fix": "yarn lint --fix"
  },
  "dependencies": {
    "csv-parse": "^5.3.6",
    "gridsome": "^0.7.0",
    "leaflet": "~1.7.0",
    "leaflet.gridlayer.googlemutant": "^0.14.0",
    "vue-class-component": "^7.2.6",
    "vue-property-decorator": "^9.1.2",
    "webpack": "^4.0.0"
  },
  "devDependencies": {
    "@microsoft/eslint-formatter-sarif": "^3.0.0",
    "@types/leaflet": "^1.9.3",
    "@types/sindresorhus__slugify": "^0.9.3",
    "@typescript-eslint/eslint-plugin": "^5.56.0",
    "@typescript-eslint/parser": "^5.56.0",
    "eslint": ">=5.16.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-vue": "^9.9.0",
    "gridsome-plugin-typescript": "^0.4.0",
    "sass": "^1.59.3",
    "sass-loader": "^10.1.1",
    "style-resources-loader": "^1.5.0",
    "ts-loader": "~8.2.0",
    "typescript": "^5.0.2"
  }
}

Expected result:

I expected the image to spin up and to be able to view my site from localhost:8080.

Here's what I've tried:

1. Rearranging the location of my WORKDIR

2. Changinge ./ to /app

3. Using RUN yarn develop instead of CMD ["yarn", "develop"] even though that doesn't make sense

4. I've used different base images, such as node and alpine, but this one seems to work the best for my use case.

If anyone has any idea what I'm doing wrong, I would greatly appreciate the advice!