The test suite encountered an error while trying to run as it was unable to locate the module '../build/Release/canvas.node'

Jest is encountering issues locating the package canvas in dependencies even though it exists. Running yarn run test results in failure with the specific error below.

packages/first/src/layouts/EventsTable.spec.tsx
  ● Test suite failed to run

    Cannot find module '../build/Release/canvas.node'
    Require stack:
    - /Users/abc/Documents/monorepo/node_modules/canvas/lib/bindings.js
    - /Users/abc/Documents/monorepo/node_modules/canvas/lib/canvas.js
    - /Users/abc/Documents/monorepo/node_modules/canvas/index.js
    - /Users/abc/Documents/monorepo/node_modules/jsdom/lib/jsdom/utils.js
    - /Users/abc/Documents/monorepo/node_modules/jsdom/lib/jsdom/living/events/MouseEvent-impl.js
    - /Users/abc/Documents/monorepo/node_modules/jsdom/lib/jsdom/living/generated/MouseEvent.js
    - /Users/abc/Documents/monorepo/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js
    - /Users/abc/Documents/monorepo/node_modules/jsdom/lib/jsdom/living/aborting/AbortSignal-impl.js
    - /Users/abc/Documents/monorepo/node_modules/jsdom/lib/jsdom/living/generated/AbortSignal.js
    - /Users/abc/Documents/monorepo/node_modules/jsdom/lib/jsdom/living/generated/AddEventListenerOptions.js
......

The canvas package has been installed and is listed as a dependency.

yarn why canvas 

└─ pdfjs-dist@npm:3.11.174
   └─ canvas@npm:2.11.2 (via npm:^2.11.2)

Attempts were made to resolve the issue by removing all packages with rm -rf node_modules and reinstalling, however the problem persists.

Node version - v18.16.1
yarn version - v3.2.3

javascriptjestjsmonoreporeact-scripts

Answer №1

For macOS users like myself, the solution I found was running this command:

brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman python-setuptools

Following that, I proceeded to clean out my node_modules directory and reinstall all packages.

Answer №2

Ensure that the canvas package is properly installed and present in the node_modules directory. (I encountered an issue where it was not installed, yet both pdfjs-dist and react-pdf did not raise any errors.)

While running npm ci worked smoothly for me, using npm ci --ignore-scripts caused silent issues as scripts are essential for its functionality.

npm rebuild canvas can be utilized after npm ci --ignore-scripts to resolve this issue.

By the way: when attempting manual installation with

npm install canvas

I encountered an error and had to execute a manual command outlined here first: https://github.com/Automattic/node-canvas?tab=readme-ov-file#installation

After following these steps, installing canvas succeeded and tests passed.

If you encounter similar problems on Jenkins (using docker and alpine image), consider referring to this helpful page:

https://github.com/node-gfx/node-canvas-prebuilt/issues/77#issuecomment-884365161

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Puppeteer to Retrieve a List of Items with Identical Selectors

Issue: I am currently working on developing an end-to-end regression test for an EmberJS solution using NodeJS/CucumberJS/Puppeteer. However, I have encountered a challenge that I need help with. Challenge: The problem lies in selecting (page.click) and ...

javascriptnode.jsgoogle-chrome-devtoolspuppeteer

When utilizing exit-hook with process.on('SIGTERM'), child_process spawn requires two control-c commands to exit properly

I have the following program running: const { spawn } = require("child_process"); const exitHook = require("exit-hook"); exitHook(() => { console.log("Leaving"); }); spawn("my-program", ["my-args"], { stdio: "inherit" }); // Long running server ...

javascriptnode.jschild-process

Is there a way for me to redirect back to the original path?

Whenever I utilize <Redirect to="<same_path>" />, a warning pops up: Warning: You tried to redirect to the same route you're currently on: "<path>". In one of my Components, I trigger another Component that prompts for either submis ...

javascriptreactjsreact-router

I'm curious about the Javascript pattern I saw in D3s Pie Layout - can anyone shed some light

While delving into the source code of D3, I stumbled upon an intriguing pattern in pie.js. It seems that after being defined as an "inner function," new "methods" are added to it before being returned as a hybrid function/object combination. Can anyone she ...

javascriptd3.js

A method to transfer a floating point number from Python to JavaScript without using cgi

Running an Apache server from a Raspberry Pi, I have a Python script that prints sensor input to the console. A PHP script then processes this output and controls a light based on the sensor reading before printing it again. Everything works fine when exec ...

javascriptphppythonajaxraspberry-pi2

Utilize a PHP-AJAX request to retrieve JSON data and then transfer the data to JGauge.js in order to display the value

scenario where I need to transfer an ajax-called value to another script (specifically a widget script) within the same file, I have managed to successfully execute the ajax call and implement a justgage widget on a single page. While I can effectively dis ...

javascriptphpjqueryjsonajax

What are the steps to designing your own unique custom button with Material-UI?

While Material-UI allows you to utilize withStyles() for creating a Button with a predefined set of styles, I am curious if it is achievable to achieve the same result using props instead. This would ensure that all custom buttons I create automatically ha ...

javascriptreactjsmaterial-ui

What steps can I take to avoid the onBlur event from triggering?

I am in the process of developing an input field with a dropdown feature for suggestions. Currently, I have set up an input element that triggers onBlur event to remove the ul element when clicked outside. However, I noticed that clicking on the ul element ...

javascripthtmlreactjs

Ways to update the DOM once a function has been executed in VUE 3 JS

I'm working on implementing a "like" or "add to favorite" feature in VUE 3. However, I'm facing an issue where the UI doesn't update when I like or unlike something. It only refreshes properly. I'm using backend functions for liking and ...

javascriptvue.jsvuejs3

Taking steps when a number is enclosed within a span

Testing a simple code with similar action to what I want. Apologies for any language errors, hoping to be understood :-) The HTML code snippet: <div class="pagination"> <a href="#" class=""><span>1</span></a> <a href=" ...

javascriptjqueryhtml

Can an array be used as valid JSON for a REST api?

Utilizing MongoDB with Mongoskin in a web application using Node.js allows for the execution of .find() on a collection to retrieve all documents within it. The result returned is a mongodb cursor. To convert this cursor into an Array, you can utilize the ...

javascriptnode.jsrest

JQuery table sorter is unable to effectively sort tables with date range strings

I am facing an issue with sorting a column in my table that contains text with varying dates. The text format is as follows: Requested Statement 7/1/2014 - 9/16/2014 When using tablesorter, the sorting does not work properly for this column. You can see ...

javascriptjqueryhtmltablesorterstring-comparison

Unable to use the .focus() method on a Link component by utilizing references in React Router 4

I am currently working with the Link component in react-router (v4). I have successfully attached a ref to this component and can log the reference. However, when I try to use linkRef.current.focus(), I encounter the following error: linkRef.current.focu ...

javascriptreactjsreact-router-v4

Ensure that every item in the list is assigned a distinct "key" prop to avoid duplication. Follow these steps to address the issue

function App() { return <StrictMode>{data.map(createCard)}</StrictMode> } function createCard(characters) { return ( <Card id={characters._id} name={characters.name} about={characters.about} img={characters.im ...

javascriptreactjs

Unable to retrieve information from the PHP file

I am currently attempting to retrieve data from a website, but instead of the desired result after submitting all necessary information using the 'POST' method, it is returning a PHP file as text. Below is the code I have been using to fetch the ...

javascriptphphtml

Exploring the concept of upserting records using the MongoDB $

I am working with two collections in my database: Regions and Registrations. var RegionSchema = new Mongoose.Schema({ name: {type: String}, registrations: [{type: Mongoose.Schema.Types.ObjectId, ref: 'registrations'}], ... }); The Registr ...

javascriptmongodbmongoose

Refreshing DataTables with specific parameters using ajax.reload()

In my Angular2 project, I am utilizing DataTables with the serverSide feature. After making changes, I am attempting to reload the table and pass these changes as parameters in a POST request via AJAX. The issue I am encountering is that DataTables alway ...

javascriptajaxangulartypescriptdatatables

Having trouble extracting HTTP Post data in Node Express?

I am encountering an issue while attempting to send an HTTP POST request from my HTML frontend to a Node.js Express backend. Despite using XMLHttpRequest on the frontend, the server seems to be receiving only an empty object in response. I would greatly ap ...

javascriptnode.jsrestexpressrequest

Learning to make a GET request from a Node application to an external API

I am currently attempting to make a GET request to an API. Below is the code I have in Angular: Service: angular.module('MyApp') .factory('Search', function($resource) { return $resource('/api/show/:search'); }); C ...

javascriptangularjsnode.js

Tips for sending information to a JavaScript variable through AJAX requests

Hello there, I'm currently working on a project that involves posting data stored in a JavaScript variable using AJAX. Can anyone assist me with the correct syntax for this process? <div class="container-fluid"> <div class="card shadow m ...

javascriptc#ajaxasp.net-mvc