CODEWITHSUNDEEP
javascriptreactjs
Luke
Luke

Reputation: 156

React re-exporting components failed

I am working with a React project where each component's files are contained in their own directory. I have a component.jsx file and an index.js file that re-exports the component's default export. This works as expected. I would like to simplify my import statements by re-exporting all components up directory level from the main components folder. See below for an example of my current project foloder structure.

src
--components
----Alert
------Alert.jsx
------index.js
----LoginCard
------LoginCard.jsx
------index.js
--index.js

Alert/Alert.jsx

export default function Alert(props) {
    // omitted for brevity - the component itself works fine
    return <Alert />
}

Alert/index.js

export { default } from './Alert';

At this point, imports work as expected in the LoginCard component. LoginCard.jsx

import { UserContext } from '@contexts';
import Alert from '@components/Alert';

export default function LoginCard(props) {
    // omitted for brevity. Again, component works as expected
    return <LoginCard />

In order to achieve my desired end result of simplifying import calls, I created components/index.js:

components/index.js

export { default as Alert } from './Alert';

Which I then attempt to import as: LoginCard.jsx

import { Alert } from '@components'

When attempting to import from component/index.js as import { Alert} from '@components' I receive an exception that states "cannot read default property of undefined". What makes this strange is that I import/export my pages and contexts in exactly the same manner and they work as expected. I originally thought that this implied an issue with my components directory alias, but the alias is working as I can import just fine from @components/Alert, just not from @components

Have a missed something simple, or am I hitting a bug? Thanks.

Upvotes: 2

Views: 1468

Answers (1)

Drew Reese
Drew Reese

Reputation: 202696

I think the issue here is that you are attempting to push all the exports up the tree towards the root directory. This makes sense when importing somewhere outside that root directory. The issue lies in the fact that you are attempting to import from the root while inside the directory structure. In other words, all the exports from within the directory need to be processed before anything can be exported from the root.

The snag here is that you are attempting to import Alert from the root export from LoginCard... which while being processed hasn't finished its exports, so the root export isn't ready yet.

In other words, @components/Alert is ready, @components is not.

Just use a relative import of Alert (and any other import) from within the same components directory.

import { UserContext } from '@contexts';
import Alert from '@components/Alert';
// or
import Alert from '../Alert';

export default function LoginCard(props) {
    // omitted for brevity. Again, component works as expected
    return <LoginCard />

Upvotes: 1

Related Questions