404 error on getting canvas 2.10.2 musl

[kirill-martynov]

Issue

• If this is an issue with installation, I have read the troubleshooting guide.

Can't get canvas, getting 404 error

error /app/node_modules/canvas: Command failed.
Exit code: 1
Command: node-pre-gyp install --fallback-to-build --update-binary
Arguments: 
Directory: /app/node_modules/canvas
Output:
node-pre-gyp info it worked if it ends with ok
node-pre-gyp info using [email protected]
node-pre-gyp info using [email protected] | linux | x64
node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.10.2/canvas-v2.10.2-node-v83-linux-musl-x64.tar.gz
node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.10.2/canvas-v2.10.2-node-v83-linux-musl-x64.tar.gz 
node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v83 ABI, musl) (falling back to source compile with node-gyp) 
node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.10.2/canvas-v2.10.2-node-v83-linux-musl-x64.tar.gz 
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | linux | x64
gyp info ok 
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | linux | x64
gyp ERR! find Python 
gyp ERR! find Python Python is not set from command line or npm configuration
gyp ERR! find Python Python is not set from environment variable PYTHON
gyp ERR! find Python checking if "python" can be used
gyp ERR! find Python - "python" is not in PATH or produced an error
gyp ERR! find Python checking if "python2" can be used
gyp ERR! find Python - "python2" is not in PATH or produced an error
gyp ERR! find Python checking if "python3" can be used
gyp ERR! find Python - "python3" is not in PATH or produced an error
gyp ERR! find Python 
gyp ERR! find Python **********************************************************
gyp ERR! find Python You need to install the latest version of Python.
gyp ERR! find Python Node-gyp should be able to find and use Python. If not,
gyp ERR! find Python you can try one of the following options:
gyp ERR! find Python - Use the switch --python="/path/to/pythonexecutable"
gyp ERR! find Python   (accepted by both node-gyp and npm)
gyp ERR! find Python - Set the environment variable PYTHON
gyp ERR! find Python - Set the npm configuration variable python:
gyp ERR! find Python   npm config set python "/path/to/pythonexecutable"
gyp ERR! find Python For more information consult the documentation at:
gyp ERR! find Python https://github.com/nodejs/node-gyp#installation
gyp ERR! find Python **********************************************************
gyp ERR! find Python 
gyp ERR! configure error 
gyp ERR! stack Error: Could not find any Python installation to use
gyp ERR! stack     at PythonFinder.fail (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/find-python.js:307:47)
gyp ERR! stack     at PythonFinder.runChecks (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/find-python.js:136:21)
gyp ERR! stack     at PythonFinder.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/find-python.js:1[79](https://gitlab.com/edstein-lms/lms-ts/-/jobs/3256796155#L79):16)
gyp ERR! stack     at PythonFinder.execFileCallback (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/find-python.js:271:16)
gyp ERR! stack     at exithandler (child_process.js:390:5)
gyp ERR! stack     at ChildProcess.errorhandler (child_process.js:402:5)
gyp ERR! stack     at ChildProcess.emit (events.js:400:28)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:12)
gyp ERR! stack     at onErrorNT (internal/child_process.js:472:16)
gyp ERR! stack     at processTicksAndRejections (internal/process/task_queues.js:[82](https://gitlab.com/edstein-lms/lms-ts/-/jobs/3256796155#L82):21)
gyp ERR! System Linux 5.4.0-121-generic
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=/app/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/app/node_modules/canvas/build/Release" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v[83](https://gitlab.com/edstein-lms/lms-ts/-/jobs/3256796155#L83)"
gyp ERR! cwd /app/node_modules/canvas
gyp ERR! node -v v14.19.3
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok 
node-pre-gyp ERR! build error 
node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/app/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/app/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v83' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/app/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:400:28)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:10[88](https://gitlab.com/edstein-lms/lms-ts/-/jobs/3256796155#L88):16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:2[96](https://gitlab.com/edstein-lms/lms-ts/-/jobs/3256796155#L96):5)
node-pre-gyp ERR! System Linux 5.4.0-[121](https://gitlab.com/edstein-lms/lms-ts/-/jobs/3256796155#L121)-generic
node-pre-gyp ERR! command "/usr/local/bin/node" "/app/node_modules/canvas/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
node-pre-gyp ERR! cwd /app/node_modules/canvas
node-pre-gyp ERR! node -v v14.19.3
node-pre-gyp ERR! node-pre-gyp -v v1.0.10
node-pre-gyp ERR! not ok 
Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/app/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/app/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v83' (1)

Your Environment

• node:14.19-alpine

package.json dependencies:

{
    "@editorjs/checklist": "^1.2.0",
    "@editorjs/code": "^2.6.0",
    "@editorjs/delimiter": "^1.2.0",
    "@editorjs/editorjs": "^2.19.0",
    "@editorjs/embed": "^2.4.0",
    "@editorjs/header": "^2.6.0",
    "@editorjs/image": "^2.6.0",
    "@editorjs/inline-code": "^1.3.1",
    "@editorjs/link": "^2.3.1",
    "@editorjs/list": "^1.6.0",
    "@editorjs/marker": "^1.2.2",
    "@editorjs/paragraph": "^2.8.0",
    "@editorjs/quote": "^2.4.0",
    "@editorjs/raw": "^2.2.0",
    "@editorjs/simple-image": "^1.4.0",
    "@editorjs/table": "^1.3.0",
    "@editorjs/warning": "^1.2.0",
    "@sentry/react": "^6.17.9",
    "@sentry/tracing": "^6.17.9",
    "@types/body-scroll-lock": "^2.6.1",
    "@types/codemirror": "^0.0.98",
    "@types/react-beautiful-dnd": "^13.0.0",
    "@types/react-color": "^3.0.4",
    "@types/react-helmet": "^5.0.15",
    "@types/react-textarea-autosize": "^4.3.5",
    "@types/react-transition-group": "^4.2.4",
    "@types/reactour": "^1.17.1",
    "@types/swiper": "^5.4.0",
    "@types/to-snake-case": "^1.0.0",
    "arr-union": "3.1.0",
    "axios": "0.19.0",
    "body-scroll-lock": "^3.0.3",
    "camelcase-keys": "^6.2.2",
    "chart.js": "3.8.2",
    "class-transformer": "0.2.3",
    "class-validator": "0.11.0",
    "classnames": "2.2.6",
    "clone-deep": "4.0.1",
    "codemirror": "5.52.2",
    "connected-react-router": "6.6.1",
    "core-js": "^3.22.7",
    "d3-selection": "^2.0.0",
    "d3-shape": "^2.0.0",
    "dotenv": "8.2.0",
    "editorjs-paragraph-with-alignment": "3.x",
    "file-saver": "2.0.2",
    "history": "4.10.1",
    "html-to-image": "^1.7.0",
    "kind-of": "6.0.3",
    "lodash.difference": "4.5.0",
    "lodash.isequal": "4.5.0",
    "mime-types": "2.1.26",
    "mixin-deep": "2.0.1",
    "moment": "2.24.0",
    "moment-duration-format": "^2.3.2",
    "normalize.css": "8.0.1",
    "nouislider-react": "^3.3.8",
    "prettysize": "^2.0.0",
    "pure-react-carousel": "1.25.2",
    "qs": "6.9.1",
    "rc-swipeout": "^2.0.11",
    "react": "16.14.0",
    "react-beautiful-dnd": "^13.0.0",
    "react-chartjs-2": "2.9.0",
    "react-codemirror2": "7.1.0",
    "react-color": "^2.19.3",
    "react-dates": "21.8.0",
    "react-device-detect": "1.12.1",
    "react-dom": "16.14.0",
    "react-editor-js": "^1.6.2",
    "react-helmet": "^6.0.0",
    "react-id-swiper": "^4.0.0",
    "react-minimal-datetime-range": "^1.6.0",
    "react-pdf": "4.1.0",
    "react-player": "^2.6.2",
    "react-redux": "7.1.3",
    "react-router-dom": "5.1.2",
    "react-sortable-hoc": "1.11.0",
    "react-text-mask": "^5.4.3",
    "react-textarea-autosize": "^7.1.2",
    "react-transition-group": "^4.4.1",
    "react-use": "^17.4.0",
    "react-webcam": "^5.2.1",
    "reactour": "^1.18.0",
    "redux": "4.0.5",
    "redux-thunk": "2.3.0",
    "reflect-metadata": "0.1.13",
    "reselect": "4.0.0",
    "snakecase-keys": "^3.2.0",
    "styled-components": "4.0.0",
    "swiper": "^5.4.5",
    "to-snake-case": "^1.0.0",
    "video-react": "0.14.1"
  },
  "devDependencies": {
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
    "@svgr/webpack": "^5.5.0",
    "@swc/core": "^1.2.192",
    "@testing-library/react": "9.4.0",
    "@types/classnames": "2.2.9",
    "@types/enzyme": "3.10.4",
    "@types/file-saver": "2.0.1",
    "@types/lodash.difference": "4.5.6",
    "@types/lodash.isequal": "4.5.5",
    "@types/mime-types": "2.1.0",
    "@types/node-fetch": "2.5.4",
    "@types/qs": "6.9.0",
    "@types/react": "16.9.17",
    "@types/react-dates": "17.1.10",
    "@types/react-dom": "16.9.4",
    "@types/react-pdf": "4.0.3",
    "@types/react-redux": "7.1.5",
    "@types/react-router-dom": "5.1.3",
    "@types/react-test-renderer": "16.9.1",
    "@types/react-text-mask": "^5.4.7",
    "@types/redux-mock-store": "1.0.1",
    "@typescript-eslint/eslint-plugin": "5.22.0",
    "@typescript-eslint/parser": "5.22.0",
    "axios-mock-adapter": "1.17.0",
    "clean-webpack-plugin": "^4.0.0",
    "connect-history-api-fallback": "1.6.0",
    "cross-env": "7.0.0",
    "css-loader": "6.7.1",
    "directory-named-webpack-plugin": "4.0.1",
    "editorjs-text-color-plugin": "^1.1.22",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.2",
    "enzyme-to-json": "3.4.3",
    "esbuild-loader": "^2.18.0",
    "eslint": "8.14.0",
    "eslint-config-prettier": "8.5.0",
    "eslint-import-resolver-typescript": "^2.7.1",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-react": "7.29.4",
    "eslint-webpack-plugin": "^3.1.1",
    "file-loader": "^6.2.0",
    "fork-ts-checker-webpack-plugin": "7.2.11",
    "html-replace-webpack-plugin": "^2.6.0",
    "html-string-replace-webpack-plugin-webpack-4": "1.0.8",
    "html-webpack-plugin": "^5.3.1",
    "husky": "3.1.0",
    "lint-staged": "9.5.0",
    "merge-deep": "3.0.2",
    "mini-css-extract-plugin": "^2.6.0",
    "node-fetch": "2.6.0",
    "path-browserify": "^1.0.1",
    "postcss": "^8.4.12",
    "postcss-html": "^0.36.0",
    "postcss-loader": "^5.3.0",
    "postcss-scss": "^4.0.3",
    "prettier": "1.19.1",
    "progress-bar-webpack-plugin": "^2.1.0",
    "react-refresh": "^0.13.0",
    "react-test-renderer": "16.12.0",
    "redux-mock-store": "1.5.4",
    "sass": "^1.51.0",
    "sass-loader": "12.6.0",
    "sass-resources-loader": "2.2.5",
    "size-limit": "2.2.4",
    "speed-measure-webpack-plugin": "^1.5.0",
    "style-loader": "3.3.1",
    "stylelint": "^14.6.1",
    "stylelint-config-prettier": "9.0.3",
    "stylelint-config-recommended": "7.0.0",
    "stylelint-order": "5.0.0",
    "stylelint-scss": "4.2.0",
    "stylelint-webpack-plugin": "3.2.0",
    "swc-loader": "^0.2.1",
    "terser-webpack-plugin": "^5.3.0",
    "ts-node": "10.7.0",
    "typescript": "4.6.4",
    "url": "^0.11.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.72.0",
    "webpack-bundle-analyzer": "^4.4.2",
    "webpack-cli": "4.9.2",
    "webpack-dev-server": "^4.9.0",
    "webpack-merge": "4.2.2",
    "workbox-webpack-plugin": "^6.1.5"
  },

Dockerfile

FROM node:14.19-alpine as deps
WORKDIR /app
COPY package.json ./
RUN npm i -g cross-env webpack-cli \
    && yarn install --cache-folder /tmp/yarn \
    && rm -rf /tmp/*

FROM deps as build
ARG PROJECT
ENV NODE_ENV=production \
    PROJECT=$PROJECT
COPY . .
RUN yarn build

FROM nginx:1.21.6-alpine
WORKDIR /app
COPY --from=build /app/dist/ /app/public/
COPY nginx.conf /etc/nginx/conf.d/default.conf
RUN ln -s ../data/system public/system \
    && ln -s ../data/scorms public/scorms \
    && mkdir data && chown nobody:nobody data
HEALTHCHECK --interval=30s --timeout=5s --start-period=5s CMD \
    curl -s 127.0.0.1/nginx_status | grep -q Active

[kirill-martynov]

Same error with node:18.12-alpine:

864.7 node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.10.2/canvas-v2.10.2-node-v108-linux-musl-arm64.tar.gz
#12 864.7 node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.10.2/canvas-v2.10.2-node-v108-linux-musl-arm64.tar.gz
#12 864.7 node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v108 ABI, musl) (falling back to source compile with node-gyp)
#12 864.7 node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.10.2/canvas-v2.10.2-node-v108-linux-musl-arm64.tar.gz

[jeroenbourgois]

I saw a Github Action failed, maybe it's related? https://github.com/Automattic/node-canvas/actions/runs/3353900475/jobs/5557061741#step:7:669

[zbjornson]

We don't have musl-libc prebuilds. More info in the troubleshooting guide:

Installation fails with a 404 in the log

If you're on Alpine Linux or another distro using musl-libc

The log may look like

node-pre-gyp WARN Tried to download(404): https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.0/canvas-v2.6.0-node-v64-linux-musl-x64.tar.gz

Prebuilds are only available for glibc, not musl-libc. See node-gfx/node-canvas-prebuilt#77, which includes information on building from source.

[GitHelge]

Hmm same issue for me. My pipeline is failing now. Not sure why It worked before

[kirill-martynov]

So, we've added this:

apk add --no-cache build-base g++ cairo-dev jpeg-dev pango-dev giflib-dev
apk add --update --repository http://dl-3.alpinelinux.org/alpine/edge/testing libmount ttf-dejavu ttf-droid ttf-freefont ttf-liberation ttf-ubuntu-font-family fontconfig

before:

RUN npm i -g cross-env webpack-cli \
    && yarn install --cache-folder /tmp/yarn \
    && rm -rf /tmp/*

And it's worked!