CODEWITHSUNDEEP
javascriptreactjsimport
tonyfat
tonyfat

Reputation: 331

React import component names clashing

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?

Upvotes: 5

Views: 5223

Answers (4)

ssaakkaa
ssaakkaa

Reputation: 418

You can import react-select like this:

import { default as ReactSelect} from 'react-select';

Upvotes: 0

Tanjin Alam
Tanjin Alam

Reputation: 2456

import AsyncSelect from 'react-select/async';

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

Upvotes: 0

AlleXyS
AlleXyS

Reputation: 2598

Import one of them with alias

import * as UISelect from './FormsUI/Select

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074198

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';

Upvotes: 11

Related Questions