rename export default in index.js

Question

I have component called TModal that looks like this

const TModal = () => {}

export default TModal

It lives inside src/components/Modal/Modal.js

next to it, there is an index.js

this is what index.js does:

export { TModal as Modal } from './Modal'

Then somewhere in my project, I want to import Modal like this

import { Modal } from 'components/Modal'

but I keep getting

Attempted import error: 'Modal' is not exported from 'components/Modal'

What's the problem?

---

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es6",
    "module": "commonjs",
    "jsx": "preserve",
    "paths": {
      "*": ["./*"]
    }
  },
  "include": ["src"]
}

strcuture

src
- components
-- Modal
--- index.js
--- Modal.js
- layouts
-- Auth
--- Auth.js

So as an example, I would want to use Modal inside Auth.js

Answer 1

Since your Modal.js export default, your index.js should be written as below

import Modal from './Modal';
export { Modal };

Answer 2

It looks like you are not selecting the file (Modal.js) you are just pointing at the Modal directory. This should fix it if that is the problem.

import { Modal } from 'components/Modal/Modal'

Answer 3

The problem is with TModal . When you export TModal from js file remove export keyword. everything would be working fine. Help it helps.

const TModal = () => {}
export TModal