Having trouble importing TransitionProps from the most recent MUI version

I'm having an issue with material ui 

"@material-ui/core": "^4.11.3"
. I am trying to import the TypeScript interface TransitionProps, but my eslint is showing an error that it cannot resolve the path. My code is identical to the one in the material ui sandbox, except for the fact that the sandbox uses the "latest" version and I have version "^4.11.3", which is up-to-date. What could be causing this problem?

Error Message from Eslint:

Unable to resolve path to module '@material-ui/core/transitions'.eslintimport/no-unresolved
typescriptmaterial-ui

Answer №1

I am currently utilizing @material-ui/core version 4.11.3 and have not encountered any errors related to the import of TransitionProps. When faced with such issues, I typically follow these steps, pausing after each one to check if it resolves the problem:

  • Ensure that all spellings are correct (consider using copy/paste from a functional codesandbox)
  • Restart the TypeScript server (in VSCode, with a .ts or .tsx file open, press Shift + Cmd + P and select "Typescript: Restart TS server")
  • Clean
    • Delete the node_modules folder and any build directories (e.g. for NextJS, delete the .next folder; for Gatsby, delete the .cache folder)
    • Run either yarn or npm install

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

Is 'get Some(): Todo[] {}' some sort of abbreviated method?

While going through an Angular services tutorial, I stumbled upon some code snippet. fetchData(): Data[] { return [ { label: "Data 1", type: DataType.INTEGER }, { label: "Data 2", type: DataType.STRING }, { label: "Data 3", type: DataType.BO ...

javascripttypescriptecmascript-6

Retrieving results from PostgreSQL database using pagination technique

When I'm pagination querying my data from a PostgreSQL database, each request involves fetching the data in this manner: let lastNArticles: Article[] = await Article.findAll({ limit: +req.body.count * +req.body.page, or ...

javascripttypescriptpostgresqlexpresssequelize-typescript

In TypeScript, the argument 'xxx' cannot be passed to a parameter expecting a 'string' type

When I try to create a new Error object with the message {code: 404, msg: 'user is not existed'} in TypeScript, I receive the following error message: [ts] Argument of type '{ code: number; msg: string; }' is not assignable to paramete ...

typescript

How can I retrieve the event type or an additional attribute name in Material UI - Autocomplete?

As I develop a handler to process user input, I find myself needing to work with the onUpdateInput method in order to retrieve the selected value. However, my challenge lies in assigning a name and retrieving event.type from <Autocomplete name="mystate ...

javascriptreactjsexpressmaterial-ui

Should await be used before dispatching hooks in redux?

I am facing a scenario where I need to execute 2 dispatch events consecutively, with no dependency between them. Could I implement it like the following code snippet? await dispatch(firstEvent) dispatch(secondEvent) My goal is to ensure that secondEvent ...

javascriptreactjstypescriptreact-nativeredux

Establish an enumeration using universally recognized identifiers

I have a JavaScript function that requires a numerical input, as well as some predefined constants at the top level: var FOO = 1; var BAR = 2; The function should only be called using one of these constants. To ensure type safety in TypeScript, I am att ...

enumstypescript

Transitioning between fragments or activities on Android using a hamburger arrow animation

I have a situation where I need to transition from activity A to a new Activity B (or potentially a fragment). On A, there is a hamburger icon and on B, there should be a left arrow icon. However, when I create B from A, the left arrow icon appears without ...

androidandroid-animationmaterial-designmaterial-uihamburger-menu

Error message in TypeScript React: Unable to assign onClick to type 'IntrinsicAttributes'

I recently came across this code for a component: Feedback.tsx import React, { useState } from 'react'; import './Feedback.css'; import FeedbackButton from './FeedbackButton'; function Feedback() { const [isOpen, setIsOpe ...

reactjstypescriptreact-hookstsx

The best way to close a swipeable drawer from a different class

I'm feeling a bit puzzled by the explanation of SwipeableDrawer on the Material-ui website. Here's the setup I have: there's a Component called 'Sidebar' that opens a SwipeableDrawer when a user clicks a button on the appbar or swi ...

javascriptreactjsmaterial-uireact-propsreact-state

What is the best way to display a Material UI icon in a React application?

I am a newcomer to React and I am eager to display a Material UI icon in one of my existing components. The icons can be found at https://www.npmjs.com/package/@material-ui/icons. Upon inspecting the component, I noticed that the previous developer includ ...

reactjsmaterial-designmaterial-ui

Giving the function parameter dynamic type depending on the first parameter

Currently, I have a basic function that my client uses to communicate with my server. In order to maintain flexibility, I have implemented the following: public call(method: string, ...parameters: any[]) {} On the server side, I organize all methods toge ...

functiontypescriptvisual-studio-code

Utilizing Ionic 2 and Angular 2 to integrate Google Maps and display multiple markers based on coordinates retrieved

I'm currently working on implementing multiple markers on a map within my Ionic 2 app. //Establishing connection to locations database this.db.connect(); let locations = this.db.collection('locations'); //Fetching all user ...

angularjsgoogle-mapstypescriptionic-framework

Creating a data structure that filters out specific classes when returning an object

Consider the following scenario: class MyClass {} class MyOtherClass { something!: number; } type HasClasses = { foo: MyClass; bar: string; doo: MyClass; coo: {x: string;}; boo: MyOtherClass; }; type RemovedClasses = RemoveClassTypes& ...

typescripttypescript-typingstypescript-generics

Solving the issue where the argument type is not assignable to the parameter type

I am attempting to filter an array of objects in React using TypeScript and encountered this error. Below is my interface, state, and function: TS2345: Argument of type '(prev: IBudget, current: IBudget) => IBudget | undefined' is not assigna ...

reactjstypescriptfiltertypesreduce

Can you explain the significance of this particular line in the source code of VSCode?

While browsing through the VS Code source code, I stumbled upon the following snippet: https://github.com/microsoft/vscode/blob/5da4d93f579f3fadbaf835d79dc47d54c0d6b6b4/src/vs/workbench/contrib/comments/browser/commentsEditorContribution.ts#L166 It appear ...

typescriptvisual-studio-codeinterfacedecorator

There is no mistake when using a value that falls outside of a TypeScript

Expecting to encounter a compile time error with this code, but it seems my understanding of enums is off... enum SortDirection { ascending = 1, descending = -1 } type IndexSpec = {[index: string]: SortDirection}; var i: IndexSpec = {thing: 3}; ...

enumstypescript

I need help creating a functional Component in react and utilizing destructive assignment. I attempted to write some code but it doesn't seem to be functioning properly

Can someone help me convert this into destructive assignment? I keep getting the error message Binding element 'onClickBackDrop' implicitly has an 'any' type.ts(7031) I'm struggling to figure out where I went wrong import React ...

reactjstypescriptreact-functional-component

Creating a unique custom icon by leveraging the material UI icons - a step-by-step guide

I am looking to create an arrow graphic similar to the one shown in the image below https://i.stack.imgur.com/k9TvH.png Originally, I was able to achieve this using SVG - <svg height='24' width='12' style={{ marginBottom: '-4p ...

csssvgmaterial-ui

Tips for importing a .geojson document in TypeScript using webpack?

I am trying to extract data from a .geojson file but faced some challenges while attempting two different methods: const geojson = require('../../assets/mygeojson.geojson'); The first method resulted in an error message stating: Module parse f ...

javascriptjsontypescript

Next.js is faced with a frustrating issue where images and videos are failing to display

I've been working on my Next.js 13 project with TypeScript, eslint, and Chakra UI, but I'm facing an issue with images and videos not displaying. Despite trying both the HTML <img> tag and importing Image from Chakra, the problem still per ...

reactjstypescriptnext.jsjsxtsx