Code completion not working for nested JSX tags

There are no completion suggestions for MenuItem in the case shown below:

import React from 'react';
const A = () => <div>
MenuItem
</div>;

though it is expected, at least, to match MenuItem component from "material-ui" package. 

Also doesn't work even if MenuItem is defined in the scope

 

 

However, if I use MenuItem as a root item, or put it in the curly braces - it will work as expected:

import React from 'react';
const A = () => MenuItem; // will work
const B = () => <div> {MenuItem} </div>; // will work as well

 

Is this an expected behavior? If so, how to make code completions work in the first case?

JavaScript language version is React JSX, Emmet enabled, WebStorm 2018.3.5.

10 comments

Yes, it's expected - unless you put the name entered within <div> </div> in angle or curly brackets, it's treated as simple HTML text, so no auto-completion is provided

0

Is there a way this behavior can be changed? To clarify, I want to enable code completions for HTML strings inside JSX tags, like here

import React from 'react';
const A = () => <div>
MenuItem // code completions should work for MenuItem
</div>;

 

Based on my experience, current behavior is wrong. I understand why code completions for methods and variables should not be enabled for HTML strings in JSX tags, but definitely it should be enabled to complete react components' names. It is very often when you will want to auto complete a string you type into a component (local or from npm package) and have it auto imported. 

0

sorry, but no. The IDE won't try to parse plain text searching for known identifiers there. And, honestly, I don't understand why the name has to be imported here:

<div>
MenuItem
</div>;

MenuItem here is not a reference, just a text - why the import is needed?

0

>MenuItem here is not a reference, just a text - why the import is needed?

You are right, it is my example that was bad. It should have look like this:

const A = () => <div>
<MenuItem></MenuItem>
</div>;

MenuItem is clearly a reference to a component here, and no completion suggestions from IDE. 

It is expected here from IDE to suggest a module to import MenuItem from it. 

0

Normally component is completed and auto-imported when entering the opening angle bracket (`<`) and staring entering the name:

 

It works for material-ui components as well:

If it doesn't work for you, please share a sample project that shows up the issue

0

Sample project is quite small and consist of just 2 file (package.json and component itself), so I'll post it here instead of creating a repository

package.json

{
"name": "material-ui-completion-issue-webstorm",
"version": "1.0.0",
"description": "",
"main": "test-component.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"material-ui": "^0.20.2",
"react": "^16.8.4"
}
}

 

test-component.js

import React from 'react';
export const a = () => <div>
<MenuItem />
</div>;

 

 

Suggested approach with opening angle bracket (`<`) first works for me only if component is already defined in the scope.

 

0

material-ui 0.x only includes the compiled bundle in the destribution, these .js files can't be used for components completion/auto-import.

Do you have any particular reason for using this ancient version instead of the recent stable release, as it's recommended at  https://material-ui.com/?

1

There are certain reasons to use material-ui 0.x.

As for the issue, I'd not ask/complain about it if I wouldn't see how it works in VSCode in the very same project:

 

To be honest I switched from VSCode a couple of days ago, WebStorm is still kind of new to me. I was looking for better code completion and seeing this doesn't work as expected feels like a bug.

0

And here is a weird thing, right after I installed @material-ui/core (the newer version) in the project, WebStorm started to show suggestions for material-ui 0.x as well

So apparently WebStorm is aware of modules in material-ui 0.x, but for some reason doesn't suggest them unless another package has a module with the same name. 

0

>it works in VSCode in the very same project:

VSCode silently installs @types/material-ui  typings and uses them for completion... You can install them in Webstorm as well, but unfortunately it doesn't understand the way components are defined there (and understands the typings coming with @material-ui/core)

0

Please sign in to leave a comment.