Issue with Yarn and Webpack: Unable to locate module 'contextify' in Node

My current challenge involves running an app (which I am currently working on) by executing the command:

yarn start

However, upon trying to run the app, I encountered the following error message:

ts-node ./src/engine/server/server
Error: Cannot find module 'contextify'
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
  at Function.Module._load (internal/modules/cjs/loader.js:506:25)
  at Module.require (internal/modules/cjs/loader.js:636:17)
  at require (internal/modules/cjs/helpers.js:20:18)
  at Object.<anonymous> (/Users/aa/Documents/app/node_modules/jsdom/lib/jsdom/browser/index.js:5:21)
  at Module._compile (internal/modules/cjs/loader.js:688:30)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
  at Module.load (internal/modules/cjs/loader.js:598:32)
  at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
  at Function.Module._load (internal/modules/cjs/loader.js:529:3)

I discovered that the necessary dependency contextify is missing from the package.json file. Despite trying different Node versions, I continue to encounter the same issue. The application is built with TypeScript and uses Webpack. I am using a Mac operating system. Any suggestions or insights on how to resolve this problem would be greatly appreciated.

typescriptwebpackyarnpkg

Answer №1

It is likely that the gyp error is being caused by one of three reasons:

1) Python not being installed:

  • Make sure to install Python 2.7
  • Set npm to locate python: 
    npm config set python <python.path>\python.exe
    where python.path represents the directory where Python is installed (e.g. C:\Python2.7)

2) Behind a firewall or proxy:

  • Use the following command: 
    npm config set proxy <proxyUrl>

3) Issue with node-sass - This problem can occur when the proxy blocks access to node-sass files.

  • Download the file win32-x64-57_binding.node from https://github.com/sass/node-sass/releases

  • Add an environment variable SASS_BINARY_PATH pointing to the location of the file (e.g. 

    C:\temp\win32-x64-57_binding.node
    )

You may need to modify the file if it requests win32-x64-59_binding.node instead.

Answer №2

After troubleshooting, it was discovered that the issue stemmed from a Node 6.x.x. C++ compilation configuration error. Thanks to this helpful comment, the problem was resolved.

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

Incorporating a JavaScript workflow into Django

Currently, I am following a tutorial on integrating a modern JavaScript pipeline into my Django application. The objective is to have the JavaScript code write "Hello webpack" onto the page, but unfortunately, it is not displaying as expected. Since I alr ...

javascriptdjangowebpack

Problem with React Router: Uncaught Error - Invariant Violation: The element type is not valid, a string is expected for built-in components

I am encountering an issue with react-router and unable to render my app due to this error. Here is a screenshot of the error I have searched extensively for a solution but have not been able to find anything useful. Any help would be greatly appreciated ...

javascriptreactjsecmascript-6webpackreact-router

Before compiling with Webpack and Scss, make sure to include the CDN server path

Is there a way to include a CDN path variable in the styles.scss file before it's compiled? My webpack 4 configuration is set up for JS and works fine, loading files from the CDN URL as intended. What I'm trying to accomplish is having the proje ...

npmwebpacksass

A mistake occurred: The function this.http.get(...) is not supported with the method map within BookService.push

Below is my code for the books service: import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; //impo ...

angulartypescriptrxjsangular2-services

Whenever I attempt to bring in AngularFireModule, an error promptly appears

I am experiencing some errors when trying to import AngularFireModule and initialize the app with environment.firebaseConfig. I have tried to solve the problem but without success. Can anyone provide guidance on what steps I should take? @NgModule({ decl ...

angulartypescriptfirebase

Dealing with CORS policy or 404 errors when using Vue.js and socket.io in conjunction with the npm run serve command

I'm currently working on developing my project locally. Running on my local machine is a simple socket.io server: const io = require('socket.io')(); io.listen(3000); In my Vue.js application, I aim to establish a connection with a socket ...

vue.jswebpacksocket.iocorsvue-cli-3

What is the proper way to define a tuple type with a specific size N for the vector class in C++?

I am seeking to create a tuple type with a fixed size N, allowing for functionality such as: let tuple: Tuple<string, 2> = ["a","b"] In this scenario, "number" represents the type T, and "2" denotes the size N. Subsequently, I ai ...

typescripttypescript-generics

Adapting imports in Typescript for seamless npm distribution

Currently, I'm facing an issue with module resolution while compiling my NPM package written in Typescript for publishing. In my project, I've been using non-relative imports to avoid the hassle of excessive ../../../. However, according to TypeS ...

javascriptnode.jstypescriptnpmnpm-publish

Facing an issue with my npm package build that is triggering a webpack error: Module not found - Error: Unable to locate 'file' or 'directory'

I'm currently working on publishing a modified version of an open source React component on npm and integrating it into my webpack setup after successfully installing the module using npm. However, I've encountered an issue where webpack is thro ...

npmwebpack

Fixing the GLTF Loader Error in Vue JS: Troubleshooting the issue of 'No loaders configured'

I am attempting to integrate a gltf file into a Vue project. Below is the code I have been working on: import * as THREE from 'three' import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; let scene, camera, renderer; fu ...

javascriptvue.jswebpackthree.jsgltf

Brand new Angular 9 application encountering the error message "ERROR in Cannot read property 'flags' of undefined" when running "ng build" on a Mac device

I set up a fresh Angular 9 project on my MacBook by executing ng new demo (no routing, CSS) cd demo ng build However, I encountered the following error: ERROR in Cannot read property 'flags' of undefined When running "ng version", here's ...

angulartypescript

Improving a lengthy TypeScript function through refactoring

Currently, I have this function that I am refactoring with the goal of making it more concise. For instance, by using a generic function. setSelectedSearchOptions(optionLabel: string) { //this.filterSection.reset(); this.selectedOption = optionLa ...

javascriptangulartypescript

Troubleshooting: Unusual Page Loaded on Webpack Dev Server

While working with web pack, I encountered an issue when trying to run the npm run build:dev script. Instead of seeing the actual website, I was presented with a strange page displaying my workspace folders: https://i.sstatic.net/mBNKg.png In case it&apos ...

javascriptnode.jsnpmwebpack

Upon clicking a button, I aim to retrieve the data from the rows that the user has checked. I am currently unsure of how to iterate through the rows in my mat-table

My goal is to iterate through the column of my mat-table to identify the rows that have been checked, and then store the data of those rows in an array. <td mat-cell *matCellDef="let row"> <mat-checkbox (click)="$event.stopPropagation()" (c ...

htmlangulartypescriptmat-table

Creating Dynamic Graphs using Angular and Chart.js with Array Values

I have implemented ChartJS-2 to visualize a graph displaying an array of user activities, but it appears distorted: import { Component, OnInit, Input } from '@angular/core'; import { ChartOptions, ChartType, ChartDataSets } from 'chart.js ...

angulartypescriptchartschart.js2ng2-charts

Utilize React to conveniently import several images from a specified folder

const importAllFiles = require => require.keys().reduce((acc, next) => { acc[next.replace("./", "")] = require(next); return acc; }, {}); const allImages = importAllFiles( require.context('./images', false ...

reactjsfunctionwebpacklambdaexport

Unable to exclude specific files using VSCode's "files.exclude" feature

In my workspace settings file, the configuration for excluding certain files is as follows: { "files.exclude": { "**/*.js": { "when": "$(basename).ts" }, "app/**/*.js.map": { "when": "$(basename).ts" ...

angularjstypescriptvisual-studio-code

Indeed / Applying dynamic keys for validation with Formik

Attempting to validate a form with a changing number of fields can be challenging. This scenario involves receiving data from an API that dictates how many input rows are displayed. Each row requires a user input to progress, making validation crucial. Th ...

reactjstypescriptformikyup

Creating a singleton in TypeScriptWould you like to know how to declare a singleton in

My goal is to incorporate an already existing library into my TypeScript project. The library contains a singleton object that I want to declare and utilize. For example, within the xyz.js file, the following object is defined: var mxUtils = { /* som ...

angulartypescriptsingletonmxgraphambient

In TypeScript, how does "number" differ from "Number"?

Within the realm of TypeScript, there exist two distinct variations of the "number" type. The first is denoted as lowercase number, whereas the second is represented in uppercase as Number. Attempting to display number results in a compiler error: console. ...

javascripttypescripttypes