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! :)
Please sign in to leave a comment.
>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
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
works fine for me using similar code:
can you share a sample project that shows up the issue?
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 :)