Generating a File that Imports Components and Instantly Exports Them Once More

Question

Generating a File that Imports Components and Instantly Exports Them Once More

Having trouble with this code. Initially, I had:

// file 1
import Box from '@/components/Box'
import Popup from '@/components/Popup'

const MDXComponents = {
  Box,
  Popup
}

// using MDXComponents somewhere in file 1

Now, to manage the growing size of the MDXComponents object, I decided to move it to a new file:

// file 2
import Box from '@/components/Box'
import Popup from '@/components/Popup'

export default {
  Box,
  Popup
}

Then, in file 1, I attempted to import it like so:

// file 1
import * as MDXComponents from './file2'

// using MDXComponents somewhere in file 1

However, I'm facing an issue and not sure why. Any insights?

javascript node.js reactjs next.js mdxjs

Answer 1

Answer №1

When carrying out this action:

export default {
  Box,
  Popup
};

The default export is assigned to a newly created object with 2 properties. To import, follow this format:

import MDXComponents from './file2';
// Then destructure the object as you would with any normal object.
// In this case, it's not possible to import {} directly; you get the entire object instead.
const { Box } = MDXComponents;

By performing this operation:

export {
  Box,
  Popup
};

You generate two named exports, which can be imported in the following way:

// Import all named exports
import * as MDXComponents from './file2';
// Or choose to import one individually
import { Box } from './file2';

In this scenario, there exists a quick method:

export { default as Box } from '@/components/Box';
export { default as Popup } from '@/components/Popup';

// If a module features named exports (not just a default export) 
// and you wish to export them all:
export * from 'some-module';

// Alternatively, select specific ones:
export { someOtherThing } from '@/components/Box';
export { default as Popup, someOtherThing } from '@/components/Popup';

Answer 2

When carrying out this action:

export default {
  Box,
  Popup
};

The default export is assigned to a newly created object with 2 properties. To import, follow this format:

import MDXComponents from './file2';
// Then destructure the object as you would with any normal object.
// In this case, it's not possible to import {} directly; you get the entire object instead.
const { Box } = MDXComponents;

By performing this operation:

export {
  Box,
  Popup
};

You generate two named exports, which can be imported in the following way:

// Import all named exports
import * as MDXComponents from './file2';
// Or choose to import one individually
import { Box } from './file2';

In this scenario, there exists a quick method:

export { default as Box } from '@/components/Box';
export { default as Popup } from '@/components/Popup';

// If a module features named exports (not just a default export) 
// and you wish to export them all:
export * from 'some-module';

// Alternatively, select specific ones:
export { someOtherThing } from '@/components/Box';
export { default as Popup, someOtherThing } from '@/components/Popup';

Generating a File that Imports Components and Instantly Exports Them Once More

Answer №1

Similar questions

I am curious about the types of props for the methods within the 'components' object in react-markdown

What is the method for transferring properties in next JS?

CookieSession in Express.js is successfully integrated with Passport, however, the maxAge parameter seems to be malfunctioning

Error Encountered When Trying to Import Mocha for Typescript Unit Testing

Tips for enhancing the fluidity of animations after removing an item from a list

steps to verify the status of a sent request

Encountering issues with resolving 'devextreme/animation/frame' when integrating devextreme with a react application

Issue concerning the implementation of <Routes>, <Route> and <Navigate> in react-router-dom version 6

Is there a simple method to add animation to a group of images displayed on click using JQuery?

Is there a way to verify if an element contains multiple text contents?

Exploring the images in a continuous loop

Develop an asynchronous thunk that may lose its context if it is returned from different functions

I'm encountering an issue with enabling Node.js support on PhpStorm as it keeps freezing at the dialog box. Does anyone have a solution for this problem?

What is the best way to vertically align a Material UI component to occupy the remaining space within a container

What is the best approach for implementing an Express Form that allows for image uploads to S3, with the subsequent saving of the S3 URL to a MongoDB field?

Jenkins is unable to locate the module, '@babel/plugin-proposal-private-property-in-object' (0:undefined) for React

Node.js sessions cookies are not being generated properly as req.cookies['connect.sid'] is not being created, and req.sessionID is changing every time the page is refreshed

Encountering a glitch while iterating through function results in failure after the initial modification

What is the process for customizing the heading titles on various pages within the Next.js application directory?

Which is better for React: Bootstrap or Material UI?