Support for suggestion of MUI in Visual Studio Code

[levanhoang792]

Dear team,

I'm using ReactJS with MUI. I'm having trouble with VSCode's suggestion when using MUI.

I tried creating a new project with the command "npx create-react-app my-app" and importing MUI with the command "npm install @mui/material @emotion/react @emotion/styled" but I still don't see any suggestions. When importing components using the shortcut "Ctrl + Space", I can only see components from the package "@mui/icons-material" but not from other packages.

Note: Also in the VSCode environment, this function still worked well before (Maybe the VSCode version has been updated).

Hope the team will support this error.

[2016-CS-111]

Same Problem Here. But I am using webpack v5. Suggestions regarding "@mui/material", were working fine in my project, untill 2 or 3 weeks back they stopped showing up.

[levanhoang792]

Same Problem Here. But I am using webpack v5. Suggestions regarding "@mui/icons-material", were working fine in my project, untill 2 or 3 weeks back they stopped showing up.

Yes, I just encountered this error recently

[omarTornaghi]

Any news?

[2016-CS-111]

Any news?

Not so far. Tried to reinstall updated MUI, reinstalled node_modules, restarted macbook, even tried to play with jsonconfig file.

[RyanCavanaugh]

This is working fine for me as of TypeScript 5.3. It looks like create-react-app is installing TypeScript 4.9.5 (which does appear to demonstrate the problem), so if you have VS Code configured to use the workspace TS version (or some other older version), then you wouldn't correctly see the auto-import available.

If you're still encountering problems after switching to a current TS version, please log a bug using a template from this repo.

Note: TS powers JS intellisense, so even if you're writing a JS project, the TS version that's running will impact what intellisense/auto-imports you see

[2016-CS-111]

This is working fine for me as of TypeScript 5.3. It looks like create-react-app is installing TypeScript 4.9.5 (which does appear to demonstrate the problem), so if you have VS Code configured to use the workspace TS version (or some other older version), then you wouldn't correctly see the auto-import available.

If you're still encountering problems after switching to a current TS version, please log a bug using a template from this repo.

Note: TS powers JS intellisense, so even if you're writing a JS project, the TS version that's running will impact what intellisense/auto-imports you see

Yes the problem was probably due to TS intellisense extension but i also reinstalled Tabnine, just in case and it worked Thanks!

[surya0180]

Hi @2016-CS-111 , I am still not able to figure out how to fix this issue. Can you please elaborate on how to fix this step by step. It would be really helpful

[2016-CS-111]

Hi @2016-CS-111 , I am still not able to figure out how to fix this issue. Can you please elaborate on how to fix this step by step. It would be really helpful

I just uninstalled TS based extensions and unwanted extensions.

[surya0180]

It worked! I just uninstalled this extension "JavaScript and TypeScript Nightly" and it worked immediately after reopening vscode. Thanks alot @2016-CS-111 for the help 😄 .

[paradoxmr24]

I started vs code, with all extensions disabled, still the same issue, the @mui/icons-material suggestions are showing but no other suggestions.

[paradoxmr24]

I solved the problem by selecting the workspace version which was 4.9.5 instead of VS code version

[dmytro-shchurov]

I solved the problem by selecting the workspace version which was 4.9.5 instead of VS code version

Could you pls specify what the workspace, what does it mean 4.9.5 (we're talking about MUI 5.15 and VSC 1.18), and how did you select the workspace. Thank you

[devmotionfr]

I solved the problem by selecting the workspace version which was 4.9.5 instead of VS code version

Could you pls specify what the workspace, what does it mean 4.9.5 (we're talking about MUI 5.15 and VSC 1.18), and how did you select the workspace. Thank you

I also need an answer

Edit : I solved the problem by downgrading VSCODE to the previous version :
https://code.visualstudio.com/updates/v1_87

[arezaie14]

Actually its not working yet, I changed typescript to version 5.4.5 of workspace and removed all plugins and reset the vscode, but not working.
I'm using nextjs and mui/material-nextjs:5.15.11

[arezaie14]

I found that when we try to install nextjs with mui the main package of mui is not installed, I've installed it with below command and its working now:

npm i @mui/material

[paradoxmr24]

The quick fix you can do select a js or ts file, you will get this option at the bottom

Beside Babel JavaScript it says 4.9.5, change it to whatever you want. Previous version 4.9.5 Seems to be working better than 5.4.3 (The version I was getting problem into).

[paradoxmr24]

I solved the problem by selecting the workspace version which was 4.9.5 instead of VS code version

Could you pls specify what the workspace, what does it mean 4.9.5 (we're talking about MUI 5.15 and VSC 1.18), and how did you select the workspace. Thank you

4.9.5 is the typescript version. So I have 2 version of typescript installed one in the workspace I think due to CRA template and second is the default VS Code version (Which is higher version and doesn't seems to be working)

[dmytro-shchurov]

I solved the problem by selecting the workspace version which was 4.9.5 instead of VS code version

Could you pls specify what the workspace, what does it mean 4.9.5 (we're talking about MUI 5.15 and VSC 1.18), and how did you select the workspace. Thank you

4.9.5 is the typescript version. So I have 2 version of typescript installed one in the workspace I think due to CRA template and second is the default VS Code version (Which is higher version and doesn't seems to be working)

Got this. Thank you for the info. After you gave me this idea I installed JavaScript and TypeScript Nightly extension, restarted VS Code, and now MUI suggestions came back. So, that's about TS as I can see.

[paradoxmr24]

I solved the problem by selecting the workspace version which was 4.9.5 instead of VS code version

Could you pls specify what the workspace, what does it mean 4.9.5 (we're talking about MUI 5.15 and VSC 1.18), and how did you select the workspace. Thank you

4.9.5 is the typescript version. So I have 2 version of typescript installed one in the workspace I think due to CRA template and second is the default VS Code version (Which is higher version and doesn't seems to be working)

Got this. Thank you for the info. After you gave me this idea I installed JavaScript and TypeScript Nightly extension, restarted VS Code, and now MUI suggestions came back. So, that's about TS as I can see.

Yes suggestions are all about typescript, vscode detects most of the suggestions from the typescript syntax.

[bmmangukiya]

Do this, It worked for me,
npm install @mui/material @mui/types

still not working try reinstalling packages

rm -rf node_modules
npm install