Encountered a build failure caused by conflicts amongst my dependencies

I'm encountering a build error and need assistance with the following issue:

Failed to compile

./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
Module not found: Can't resolve '@material-ui/core/IconButton' in 
'D:\Projects\nextjs\resto\node_modules\material-ui-search-bar\lib\components\SearchBar'

Import trace for requested module:
./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
./node_modules/material-ui-search-bar/lib/components/SearchBar/index.js
./node_modules/material-ui-search-bar/lib/index.js
./components/admin/ProductDatatable.jsx
./components/admin/ProductList.jsx

./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
Module not found: Can't resolve '@material-ui/core/Input' in 
'D:\Projects\nextjs\resto\node_modules\material-ui-search-bar\lib\components\SearchBar'

Import trace for requested module:
./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
./node_modules/material-ui-search-bar/lib/components/SearchBar/index.js
./node_modules/material-ui-search-bar/lib/index.js
./components/admin/ProductDatatable.jsx
./components/admin/ProductList.jsx

./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
Module not found: Can't resolve '@material-ui/core/Paper' in 
`'D:\Projects\nextjs\resto\node_modules\material-ui-search-bar\lib\components\SearchBar'`

Import trace for requested module:
./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
./node_modules/material-ui-search-bar/lib/components/SearchBar/index.js
./node_modules/material-ui-search-bar/lib/index.js
./components/admin/ProductDatatable.jsx
./components/admin/ProductList.jsx

./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
Module not found: Can't resolve '@material-ui/icons/Clear' in 
'D:\Projects\nextjs\resto\node_modules\material-ui-search-bar\lib\components\SearchBar'

Import trace for requested module:
./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
./node_modules/material-ui-search-bar/lib/components/SearchBar/index.js
./node_modules/material-ui-search-bar/lib/index.js
./components/admin/ProductDatatable.jsx
./components/admin/ProductList.jsx

./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
Module not found: Can't resolve '@material-ui/icons/Search' in 
'D:\Projects\nextjs\resto\node_modules\material-ui-search-bar\lib\components\SearchBar'

Import trace for requested module:
./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
./node_modules/material-ui-search-bar/lib/components/SearchBar/index.js
./node_modules/material-ui-search-bar/lib/index.js
./components/admin/ProductDatatable.jsx
./components/admin/ProductList.jsx

Build failed due to webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I need assistance with identifying the correct versions of my installed packages in order to successfully build my application.

During development with npm run dev, my application functions properly. However, when attempting to build the application using npm run build, start it from the built files using npm start, or deploy it on platforms like Vercel, the application crashes.

reactjsnpmnext.jsmaterial-ui

Answer №1

Reminder: In case you're currently using Material-UI v3, we strongly recommend installing the search bar version 0.x through npm by executing 

i --save material-ui-search-bar@beta

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

Enhancing React Performance: Storing Component Identity in Redux State

Can I safely pass this to a Redux action creator from a component defined using React.createClass? In my code, I have created the following reducer: const unsavedChangesProtectionReducer = handleActions({ [ENABLE_UNSAVED_CHANGES_PROTECTION]: (unsaved ...

javascripthtmldesign-patternsreactjsarchitecture

Using masonry-layout with Next Js leads to a ReferenceError stating that window is not defined

Implementing the masonry-layout library by David Desandro in my Next app has been a smooth process. You can find the link here. When I apply it, the masonry layout functions perfectly as intended. Here's how I'm incorporating it successfully: imp ...

reactjstypescriptnext.js

Issue with next-intl plugin when choosing enum-based values is not functioning correctly

For my next.js project (version 13.4), I was in need of next-intl translation support. I followed the official example provided at The example mentioned to define the following code in the 'en.json' file: "message": "{gender, sele ...

reactjsnext.jsinternationalizationnext-intl

Issue with state change in Component (React with Redux)

I am another person facing a similar issue. I have been unable to identify the error in my code yet. I suspect it has something to do with mutation, but despite trying almost everything, I am at a loss. My component does not update when I add new items to ...

javascriptreactjsredux

Leveraging Supabase and Stripe Customer IDs with Row Level Security

I'm currently working on a NextJS project where I need to integrate a stripe_customer_id with a Supabase user upon their initial sign up. Everything functions smoothly without any issues when RLS is disabled. However, enabling RLS is imperative as it ...

next.jsstripe-paymentssupabase

Tips for customizing image-cropping functionality within a modal with material UI

When it comes to positioning elements on a basic page using CSS, I consider myself decently skilled. However, things get confusing when working inside a modal. I attempted to use the Dialog component from mui-material to wrap the cropper, but that approac ...

cssreactjsmaterial-ui

Why is my React app opening in Google Chrome instead of the API?

I have a link in my React app that is supposed to open a PDF in another page, but for some reason Google Chrome is redirecting me to the React application instead of opening the API endpoint that renders the PDF. The URL for the PDF is /api/file/:_id and m ...

javascriptreactjsgoogle-chrome

Convert the existing JavaScript code to TypeScript in order to resolve the implicit error

I'm currently working on my initial React project using Typescript, but I've hit a snag with the code snippet below. An error message is popping up - Parameter 'name' implicitly has an 'any' type.ts(7006) Here is the complet ...

javascriptnode.jsreactjstypescript

Icon and text aligned in the center (React Material-UI)

I am trying to find the optimal way to display a React Material-UI component that includes both an icon and text, ensuring that they are all aligned vertically. Currently, I'm facing issues with this setup, especially when it comes to conditional rend ...

reactjsmaterial-uimaterial-design

Error encountered when trying to connect Solidity contract with React Next.js, issue with fetching contract through NPM package

My goal is to create an NFT marketplace, but I've encountered a problem with npm run dev. It was working fine yesterday, but now it's not letting me fetch functions from NFTMarketPlace.sol after exiting VSCode. I tried deleting node_modules & ...

reactjsnpmnext.jssoliditypackage.json

I encountered an issue while making customizations to my default next.config.js file. Despite attempting various solutions, I consistently encountered an error regarding the invalid src property

I'm currently trying to introduce some custom configurations into the next.config.js file. However, I keep encountering an error regarding an invalid src prop. Despite my attempts to troubleshoot in various ways, the error persists. // ...

javascriptreactjstypescriptnext.jsconfig

Updating TextField Values with React Material UI

At the beginning of each session, I initialize the state with these variables: state = { firm: null, office: null, salesCode: null, account: null } Each TextField in my application is rendered like this: <TableCell> <TextFie ...

reactjsmaterial-ui

A guide to creating a dynamic form using Material-UI components in React Redux: How can I easily add and manage input fields?

Currently, I am in the process of updating my code from a React-Flux-Bootstrap application to Redux with Material-ui. My main goal is to create a form that initially has one input field (e.g., title) and then allows users to add multiple extra inputs by cl ...

reactjsreduxmaterial-ui

Issue with implementing MUI Grid within a dialog across various screen sizes

While working with a MUI dialog and MUI grid, I encountered an issue. The code I am using is directly from the website, with only minor modifications to the dialog function names and the box wrapping the dialog. Despite changing the size of the dialog, t ...

javascriptcssreactjsmaterial-ui

Transmitting image data (blob) from the frontend to the backend using Next.js and tRPC (T3 stack)

I'm currently facing a challenge in sending a leaflet map image from the backend to the frontend using the leaflet-simple-map-screenshoter library for capturing the image. The library returns a blob, which I need to transmit back to the backend and sa ...

typescriptnext.jszodtrpct3

Convert the pager produced by ReactiveList into another language

In my React application, I am using ReactiveList (v2.17) to display a list with a pager at the bottom. The problem is that the pager buttons are in English ("Prev", "Next"), while the site is supposed to be in Dutch. Is there a way to translate these but ...

reactjsreactiveui

Exploring different approaches for testing within a ReactJS component?

I recently began exploring TDD and unit testing my JavaScript code, specifically by using Mocha and React shallow renderer to test my React components. The component I am currently testing looks like this: var React = require('react'); var test ...

reactjsmocha.js

The concept of shallow routing in Next.js

I have a complex form with multiple steps and I want the path to change based on the current step of the form. After some research, I came across shallow routing as a potential solution for this issue. To implement this, I added a Router and an increase fu ...

reactjsnext.js

Ways to retrieve the current URL in Next.js without relying on window.location.href or React Router

Is there a way to fetch the current URL in Next.js without relying on window.location.href or React Router? const parse = require("url-parse"); parse("hostname", {}); console.log(parse.href); ...

javascriptreactjsnext.jsparse-url

How to effectively implement muistyled with a MUI component

import * as React from 'react'; import { styled } from '@mui/system'; const MyComponent = styled('div')({ color: 'darkslategray', backgroundColor: 'aliceblue', padding: 8, borderRadius: 4, }); exp ...

reactjsmaterial-ui