React import component names clashing

user_764512 0
Viewed 1242

Unsure how to solve clash between two import components in ReactJS, i.e.:

import Select from './FormsUI/Select';
import Select from 'react-select';

Based on the above, is it possible to use a difference name to access react-select library as I'm using the first Select from ./FormsUI/Select numerous times in my App?

reactjs import javascript
3 Answers

You're importing the default export from each of those modules, which means you control the local name. So you could do:

import FormsUISelect from './FormsUI/Select';
import ReactSelect from 'react-select';

If they were named exports (they aren't in your question), you could still control the local name using as:

import { Select as FormsUISelect } from './FormsUI/Select';
import { Select as ReactSelect } from 'react-select';
user_1572470

Import one of them with alias

import * as UISelect from './FormsUI/Select

user_92755680 
import AsyncSelect from 'react-select/async';

you can use AsyncSelect instead of select if select conflects with another select component or library.

user_94579000
Related