Why is it necessary to re-export both * and { default } in zustand.js?

As I delved into analyzing the codebase of zustand, I stumbled upon this snippet in index.ts:

export * from './vanilla'
export * from './react'
export { default as createStore } from './vanilla'
export { default } from './react'

Question arises regarding the purpose behind lines 3 and 4. My initial thought was to facilitate importing functions in different ways, such as:

import create from 'zustand'

or alternatively:

import { create } from 'zustand'

However, attempting the second method results in the error message:

Module '"zustand"' has no exported member 'create'. Did you mean to use 'import create from "zustand"' instead?

Clarification: I comprehend how to correctly import the create function. What baffles me is the intent behind including lines 3 and 4 in index.ts. What implications does it have?

Answer №1

Explanation:

The purpose of this code snippet is as follows:

By using the line

export { default as createStore } from './vanilla'

the default export from the 'vanilla' file is imported and then re-exported in this current file with the name createStore.

Similarly, by using this line:

export { default } from './react'

the default export from the 'react' file is imported and directly exported as default in this file.

If lines 3 and 4 were removed, neither the default export from 'vanilla' nor 'react' would be re-exported here, as export * from only works for named exports.

It's important to note that create is not a named export in either the 'vanilla' or 'react' files. Therefore, trying to import it using import { create } from 'zustand' would result in an error.

When utilizing zustand:

To import the default export from 'vanilla', you should use:
import { createStore } from 'zustand'; // This can be aliased with `as` if needed

For importing the default export from 'React':

import create from 'zustand'; // The variable name can be customized since it's a default import

If lines 3 and 4 were omitted, the above import statements would fail because the default exports from 'react' and 'vanilla' wouldn't be re-exported.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

SyntaxError: Unexpected token : error caused by an invalid label

When attempting to perform an ajax call, I receive a JSON object as a response: { id: 6, success: "true" } The ajax call in question is the following: window.foobar = function(foo){ $.ajax({ url: "http://foobar.com/sites/foo/", ...

Methods for dynamically populating dropdown lists with JavaScript and Bootstrap

I have collected all 387 regions for the current date and now I want to dynamically populate a bootstrap dropdown with these regions using JavaScript. Below is the basic HTML code for a bootstrap dropdown: <div class="dropdown"> <button class ...

What is the best way to divide two ranges that are intersecting?

Seeking a method to divide two overlapping ranges when they intersect. This is my current progress using typescript, type Range = { start: number; end: number; }; function splitOverlap(a: Range, b: Range): Range[][] { let result = []; const inters ...

`Using Twitter Bootstrap in mobile app development with javascript`

I have been utilizing Twitter Bootstrap 2.3 on one of my websites and I appreciate its responsiveness and use of media queries for mobile devices. However, I have noticed a lack of mobile-specific features, particularly linked listviews. In order to addres ...

What is the best way to establish a global constant that can be accessed by multiple controllers in AngularJS?

Imagine I need to create a constant variable that can be shared between controllers in Angularjs; $webroot = "localhost/webroot/app" After some research, it appears that services are the recommended approach. But which one should I use? Should I implemen ...

The properties defined in the typescript model become inaccessible once the data is transferred to a different webpage

I've created a TypeScript model within my Angular application and initialized an object with that model. However, when passing the object through routing to the second component (UserComponent), the associated types are not available as shown in the i ...

"Encountering issues with $http.get() function in my controller while trying to

Currently, I am working on an Application that utilizes Angularjs. I am trying to call an API and retrieve data using $http.get(). However, I am facing an issue where my API url does not seem to work properly. Interestingly, when I use a URL from a tutoria ...

Launch a new Windows form upon clicking an HTML button using DotNetBrowser

I attempted to open a Windows form using the DotNetBrowser control with specific HTML content as shown in the code below. Upon clicking a button on the HTML page, I want to hide the loaded form and then display the second Windows form. Here is the C# cod ...

Determine the number of rows in the Tabulator's table

Can anyone tell me how to retrieve the number of rows in a table created using Tabulator on a website? Is there a method like table.size or table.length that I can use for this purpose? The table has been initialized with the following code: table = new T ...

Various ways to utilize Apollo's Query property

There are a couple of ways I've come across to utilize the new Query and Mutation props from Apollo. However, I've only been able to successfully implement one of them. First, defining the query within the Query prop directly like this: <Qu ...

Utilizing the $scope variable within an event in the Google Maps API

I am having an issue using $scope within this function. Where should I define the argument $scope so that it works properly? Thank you Below is the basic structure of my code with key lines included: myApp.controller('myCtrl', ['$scope&ap ...

What are the steps to gather user data and generate a roster of individuals currently online?

I am currently working on a way to gather information about the users who are currently logged into my website. Here's how it works: When a user enters my website, they have the option to choose a nickname using an input box. Then, there are five diff ...

Incorporate external JavaScript libraries not built with Angular

Our project utilizes NPM in conjunction with Browserify for managing third-party dependencies, which pairs well with AngularJS due to the CommonJS-modules. Below is a code snippet showcasing the dependency structure that integrates seamlessly with Angular ...

What is the best way to assign attributes to multiple HTML elements using an array?

Seeking assistance to hide various sections in my HTML file upon button click, with the exception of one specific section. Encountered an error message: Uncaught TypeError: arr[i].setAttribute is not a function Here's a snippet of my code: const hide ...

Setting up dynamic routes in a Vue.js Express application

I am currently working on a project that involves creating a basic Vue.js Express profile interface. This interface is responsible for retrieving profile information of a specific user based on a unique ID assigned to each user. The .get() request in Vue.j ...

Ensuring Form Accuracy - Mandatory Selection from Group

Currently, in the project I am working on, there are three textboxes that need to be validated to ensure at least one of them has been filled out. I have been researching custom validation with Angular directives and found that it is possible to set the v ...

A guide to updating a button in Angular:

Currently, I have implemented a directive that displays 3 tabs at the bottom. However, I am curious to know if it is possible to swap out "exterior" for "interior" based on whether I am on the exterior or interior page. For example, when on the exterior ...

Adjust the CSS content using the data-content attribute to include line breaks

My current coding setup includes: <div id="mydiv" data-content="Loading..."></div> This is how I style it with CSS: #mydiv:after{ content: attr(data-content); height: 100%; opacity: 1; position: absolute; text-align: center; ...

State changes are not being properly reflected in the function within Next.Js

I am currently working on a functional component that displays an array of products. The products are received as props and the component utilizes the useEffect and useState hooks to manage its state. One of the functionalities I am trying to implement is ...

Is it necessary to continue utilizing PropTypes when incorporating Typescript into a React application?

Typescript brings significant advantages in terms of type validation. Does it completely replace the necessity of using PropTypes? Or do PropTypes still offer unique benefits? ...