File type per directory (.js files recognized as TypeScript JSX )

Hi,

I have a project with frontend written in React. Convention in the project is that we use .jsx files for files where we actually have a component and .js for others (containg enums or some helper methods).

However, I am having some problem with intelliJ not recognizing .js files as a part of React app. If in .jsx file I use method from .js file, it doesn't get autoimported and I need to import manually. If it's method from .jsx everything works like a charm.

I belive associating all .js files inside the directory of my frontend as a TypeScript JSX should do the job? 

I tried to add pattern like '*js/app/*.js' but it doesn't work (my frontend app scripts lies under /js/app/)

I'd appreciate any help, thanks in advance! :) 

 

4 comments

>I am having some problem with IntelliJ not recognizing .js files as a part of React app. If in .jsx file I use method from .js file, it doesn't get autoimported and I need to import manually.

 

Please can you provide code snippets/files that can be used to recreate the issue? also, what javascript language version is chosen in Settings | Languages & Frameworks | JavaScript?

>I belive associating all .js files inside the directory of my frontend as a TypeScript JSX should do the job?

I'm not sure what is TypeScript JSX, but it's very unlikely that it would help

 

>I tried to add pattern like '*js/app/*.js' but it doesn't work (my frontend app scripts lies under /js/app/)

such patterns (including paths) can't be used for assigning files to a file type; these are file name patterns, not file path ones. If you miss a possibility to match folders, please vote for https://youtrack.jetbrains.com/issue/IDEA-107807

0

Hi, sorry for late reply!

I have following enum in file 'font-size.js'

export const FontSize = {
XXS: 'font-size-xxs',
XS: 'font-size-xs',
S: 'font-size-s',
M: 'font-size-m',
L: 'font-size-l',
XL: 'font-size-xl'
};


Then, in the same directory if I have any React component, like 'Text.jsx' looking like that: 

const Text = ({ fontSize }) => (
<span class={fontSize}>
EXAMPLE TEXT
</span>
);

Text.propTypes = {
size: PropTypes.oneOf(Object.values(FontSize))
};

I need to manually add 

import { FontSize } from './font-size';

In Text.jsx because it doesn't get auto imported by intelliJ. Also in 'font-size.js' I get a message that FontSize is never used.

ECMAScript6 is set as my Javascript language but I tried others and it didn't help.

Best Redagrds,
Piotr

 

0

works fine for me using similar code:

 

 

can you share a sample project that shows up the issue?

1

Actually your screenshot was sufficient for me to fix this issue. I had .jsx file extension associated with `Typescript JSX` instead of `React JSX` (in Settings / Editor / File Types) 

Changing that fixed my problems. Thank you for quick responses :)

1

Please sign in to leave a comment.