Encountered an issue while building npm: "Error: Unable to locate module @restart/context

Lately, I've encountered an issue with npm build after upgrading to the latest version of react-bootstrap (1.0.0-beta.6).

While creating an optimized production build...
Failed to compile.

Module not found: '@restart/context/forwardRef'. Please ensure this package is installed.
./node_modules/react-bootstrap/es/ThemeProvider.js

You can add this package by running: yarn add @restart/context/forwardRef.

I attempted to run the suggested yarn command, but it seems like there's no such package name available. Any suggestions on how to resolve this without reverting back to the older version (which lacks support for tabs, a feature I currently use)?

javascriptreactjsnpmnpm-installreact-bootstrap

Answer №1

There seems to be a problem originating upstream with @restart/context. They have recently rolled out a new version that is causing issues with importing forwardRef in the following manner: 

import forwardRef from '@restart/context/forwardRef'

A temporary solution would be to revert back to version 2.1.2 by using the command 

yarn add @restart/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f1c10110b1a070b3f4d514e514d">[email protected]</a>
.

In the long run, it is advisable to either wait for react-bootstrap to address their import issues or restrict their package.json to this specific version of @restart/context.

Update: I have created an issue on the react-bootstrap repository to monitor any developments regarding this matter: https://github.com/react-bootstrap/react-bootstrap/issues/3576

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

How to Use Framer Motion in Next.js for window.innerWidth Less Than 768

I am trying to use window.innerWidth to control the timing of an animation (Framer Motion) in my Next.js project, but I keep encountering the error message: ReferenceError: window is not defined Here's a simplified version of my ValuesSection.jsx co ...

javascriptreactjsnext.jsframer-motion

Error: The "res.json" method is not defined in CustomerComponent

FetchData(){ this.http.get("http://localhost:3000/Customers") .subscribe(data=>this.OnSuccess(data),data=>this.OnError(data)); } OnError(data:any){ console.debug(data.json()); } OnSuccess(data:any){ this.FetchData(); } SuccessGe ...

javascriptangulartypescript

NodeJS Exporting Features

A situation is in front of me: var express = require('express'); var router = express.Router(); var articles = require('../model/articles.js'); router.get('/all', function(req, res, next) { res.json(articles.getAll()); ...

javascriptmysqlnode.jsexpress

Gulp does not generate any new folders

Currently, my workspace is located in a directory named "Super gulp" with other directories that contain my files. The issue I'm facing is related to converting my .pug files into HTML files and placing them in the "goal" directory. However, when I tr ...

javascriptnode.jsnpmgulpfrontend

What is the most effective method for organizing an object by its values using multiple keys?

I'm interested in utilizing the sort method mentioned in the link but I am facing { "CYLINDER": 2986, "HYDRAULIC": 1421, "JACKS": 84, "INSTALLATION": 119, "REAR": 61, "JACK": 334, "TUBE": 1, "FEED": 114, "ASSEMBLY": 326, "DCS": 2 ...

javascriptarrayssortingobject

What are the steps to prompt the Plunker Editor to refresh an Angular library dependency?

I am utilizing the Plunker Editor to showcase demos. The demo I have created is an Angular 2 project featuring my open-source npm package named ng-ui-application, which has already been published. Initially, everything worked smoothly once I bound the npm ...

npmeditorupdates

`Launch link in new browser window`

Seeking assistance with a coding issue. I'm attempting to have links open in a new tab, but I haven't been successful using the href attribute. Below is the code snippet from src/utils/menu.js: const menu = [ { name: 'App& ...

javascriptreactjsmenuexternal-links

Unique content on a web page when it is loaded with HTML

Is there a way to dynamically load various content (such as <img> and <a>) into divs every time a page is loaded? I've seen websites with dynamic or rotating banners that display different content either at set intervals or when the page ...

javascripthtmlajaxrandom

Pre-rendering Vue.js for SEO with prerender-spa-plugin becomes unresponsive during the npm run build process

My current issue arises when attempting to execute the command npm run build while utilizing the pre-rendering plugin in my webpack configuration. I incorporated some advanced options in webpack such as: `captureAfterDocumentEvent: 'fetch-done' ...

javascriptwebpackvue.js

Integrating domain name into a post request using React

Currently, I have a frontend (react, Node.js) and a backend Springboot hosted on the same remote hosting service at . The frontend and backend are placed in different environments but function well individually. I connected my frontend to a domain and up ...

reactjspostdnscross-domain

Deciphering a JSON array by value or key

I have a JSON array that I need to parse in order to display the available locations neatly in a list format. However, I am struggling with where to start. The data should be converted to HTML based on the selected date. In addition, a side bar needs to s ...

javascriptjqueryarraysjsonajax

Tips for resolving the issue of background images not appearing in React JS

Having trouble adding a background image to my page, but it's not showing up. I've attempted using inline styles for the background image, but it's still not working and my page remains empty. import React from 'react'; import Pro ...

reactjs

The Spotlight feature seems to be malfunctioning, but the Hemisphere Light and Point Light are functioning properly in my code

Here is the custom code I used to create my 3D portfolio website based on a tutorial from JavaScript Mastery's Youtube channel: import React from "react"; import { Suspense, useState, useEffect } from "react"; import { Canvas } fro ...

reactjsthree.jsreact-three-fiberreact-three-drei

How does a browser automatically fill in email and password fields?

When using a text input and a password input in my single page app, Chrome often prompts to remember the information for autofill. However, I am encountering an issue where it doesn't actually autofill the information. Does anyone know how to trouble ...

javascriptajaxautocomplete

progressing both forward and backward through every month

I am currently working on a project that involves creating a calendar using JavaScript. I have implemented functionalities where I can navigate back and forth through months, fetching the days within each month. However, I am facing an issue where if I go ...

javascriptreactjs

Guide to dynamically add data to two columns

I have a challenge with organizing multiple inputs into rows with two columns each, ensuring that each input is appended to the appropriate side (50% for each column unless there's an odd number of inputs). Currently, the inputs are being added to se ...

javascriptjqueryhtml

What is the best way to include basic static files and HTML together in a NodeJS environment?

I am facing an issue trying to serve an HTML file with its CSS and JS files in NodeJS using express.static(), but unfortunately, it is not working as expected. I have followed the steps shown in several tutorials, but for some reason, the output is not co ...

javascripthtmlnode.jsexpressstatic-files

Angular updates location, but browser redirects to incorrect page

I want my application to redirect non-logged in users to a login page. Following advice from a popular source, the app listens for routeChangeStart events like this: $rootScope.$on("$routeChangeStart", function(event, next, current) { if ($rootScope.c ...

javascriptangularjs

Experiencing network request failure on one specific URL while using React Native for iOS, but having no issues with other URLs

I'm facing an issue in my React Native app while trying to make an API call using the following code: test = async () => { try { let a = await fetch('https://rxapitest.alliancepharmacygroup.ca:12345/', { method: 'G ...

iosreactjsreact-nativefetch-api

The impact on performance when utilizing useReducer and context in your application

Is there a performance impact when using useReducer with the context API in the latest version of React? I recently read an article that mentioned: According to the article, using useReducer with Context creates a new state value each time state updates o ...

reactjsreact-hooks