How to fix the error Identifier has already been declared using react and typescript?

Question

I want to fix the error "Identifier config has already been declared" using react?

I am using import statements like below in a file List.tsx

import {config} from 'react-spring';
import config from '../config';

in the config file i have

const config = { //something}

export default config;

And I get the error Identifier config has already been declared. Can someone help me how to fix this? Thanks.

The problem is that both are called `config`. Make one of these a different name. The easiest is the second one `import config2 from '../config';` or something. — VLAZ, Oct 20 '20 at 16:29
thanks. but in the config file i am exporting config and i cant change it. — stack_overflow, Oct 20 '20 at 16:31
[How can I alias a default import in JavaScript?](https://stackoverflow.com/q/39282253) — VLAZ, Oct 20 '20 at 16:33
i have tried to use import {config as configuration} from '../config' and using it to display a div {!config.isRestricted &&
title
} but this gives error cannot read isRestricted of undefined. am i importing correctly? — stack_overflow, Oct 20 '20 at 16:53
You don't need `import {config as configuration} from '../config'` - you're not exporting that. You have a default export, so `import configuration from '../config'` is all you need. When importing the default, you can give it whatever name you want, it doesn't have to match what is in the `export default` statement. — VLAZ, Oct 20 '20 at 17:05

score 1 · Accepted Answer · answered Oct 20 '20 at 16:31

1

As @VLAZ mentioned, you need to use different names to import. You can use it like this:

  import {config} from 'react-spring';
  import customConfig from '../config';

answered Oct 20 '20 at 16:31

Akif

thanks i have edited my question as how i am exporting config from config file. is there some aliasing that can be used in import? – stack_overflow Oct 20 '20 at 16:33

1 Answers1