Repository: pmndrs/zustand
Pull request #1514 (2023-01-07 14:33:17)

feat: deprecate default export
close #1506 

codesandbox-ci[bot]: This pull request is automatically built and testable in [CodeSandbox](https://codesandbox.io).

  To see build info of the built libraries, click [here](https://ci.codesandbox.io/status/pmndrs/zustand/pr/1514/builds/333121) or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6fdac4654acb66f634bb47a2a776fb1c34e6223f:

|Sandbox| Source |
|--|--|
|[React](https://codesandbox.io/s/react-46wkgx)| Configuration |
|[React Typescript](https://codesandbox.io/s/react-typescript-99i0el)| Configuration |
|[React Browserify](https://codesandbox.io/s/react-browserify-nex6wn)| Configuration |
|[React Snowpack](https://codesandbox.io/s/react-snowpack-5onpie)| Configuration |
|[React Parcel](https://codesandbox.io/s/react-parcel-gqwm61)| Configuration |
|[Next.js](https://codesandbox.io/s/next-js-yg0jxe)| Configuration |
|[@pavlobu/zustand demo](https://codesandbox.io/s/pavlobu-zustand-demo-8r59sn)| Configuration |

github-actions[bot]: **Size Change:** +1.61 kB (+4%) 

**Total Size:** 38.6 kB

| Filename | Size | Change |  |
| :--- | :---: | :---: | :---: |
| `dist/esm/index.js` | 474 B | +60 B (+14%) | ⚠️ |
| `dist/esm/shallow.js` | 469 B | +96 B (+26%) | 🚨 |
| `dist/esm/vanilla.js` | 479 B | +78 B (+19%) | ⚠️ |
| `dist/index.js` | 634 B | +69 B (+12%) | ⚠️ |
| `dist/shallow.js` | 1.06 kB | +91 B (+9%) | 🔍 |
| `dist/system/index.development.js` | 662 B | +72 B (+12%) | ⚠️ |
| `dist/system/index.production.js` | 468 B | +77 B (+20%) | 🚨 |
| `dist/system/shallow.development.js` | 545 B | +101 B (+23%) | 🚨 |
| `dist/system/shallow.production.js` | 415 B | +93 B (+29%) | 🚨 |
| `dist/system/vanilla.development.js` | 547 B | +79 B (+17%) | ⚠️ |
| `dist/system/vanilla.production.js` | 370 B | +79 B (+27%) | 🚨 |
| `dist/umd/index.development.js` | 784 B | +66 B (+9%) | 🔍 |
| `dist/umd/index.production.js` | 595 B | +69 B (+13%) | ⚠️ |
| `dist/umd/shallow.development.js` | 1.22 kB | +134 B (+12%) | ⚠️ |
| `dist/umd/shallow.production.js` | 947 B | +117 B (+14%) | ⚠️ |
| `dist/umd/vanilla.development.js` | 685 B | +132 B (+24%) | 🚨 |
| `dist/umd/vanilla.production.js` | 466 B | +117 B (+34%) | 🚨 |
| `dist/vanilla.js` | 518 B | +84 B (+19%) | ⚠️ |

<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `dist/context.js` | 605 B |
| `dist/esm/context.js` | 422 B |
| `dist/esm/middleware.js` | 3.78 kB |
| `dist/esm/middleware/immer.js` | 210 B |
| `dist/middleware.js` | 4.36 kB |
| `dist/middleware/immer.js` | 328 B |
| `dist/system/context.development.js` | 549 B |
| `dist/system/context.production.js` | 365 B |
| `dist/system/middleware.development.js` | 3.91 kB |
| `dist/system/middleware.production.js` | 2.71 kB |
| `dist/system/middleware/immer.development.js` | 292 B |
| `dist/system/middleware/immer.production.js` | 187 B |
| `dist/umd/context.development.js` | 734 B |
| `dist/umd/context.production.js` | 533 B |
| `dist/umd/middleware.development.js` | 4.49 kB |
| `dist/umd/middleware.production.js` | 3.02 kB |
| `dist/umd/middleware/immer.development.js` | 472 B |
| `dist/umd/middleware/immer.production.js` | 337 B |

</details>



<a href="https://github.com/preactjs/compressed-size-action"><sub>compressed-size-action</sub></a>

Patch:
diff --git a/docs/getting-started/comparison.md b/docs/getting-started/comparison.md
index 1a779a0..adcae06 100644
--- a/docs/getting-started/comparison.md
+++ b/docs/getting-started/comparison.md
@@ -20,7 +20,7 @@ immutable state model. However, Redux, requires your app to be wrapped in
 context providers; Zustand does not.
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 
 type State = {
   count: number
@@ -39,7 +39,7 @@ const useCountStore = create<State & Actions>((set) => ({
 ```
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 
 type State = {
   count: number
@@ -129,7 +129,7 @@ recommended that you manually apply render optimizations by using selectors.
 **Zustand**
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 
 type State = {
   count: number
@@ -234,7 +234,7 @@ Zustand is based on the **immutable** state model, while Valtio is based on the
 **Zustand**
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 
 type State = {
   obj: { count: number }
@@ -264,7 +264,7 @@ that you manually apply render optimizations by using selectors.
 **Zustand**
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 
 type State = {
   count: number
@@ -307,7 +307,7 @@ suitable when access outside of React is required.
 **Zustand**
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 
 type State = {
   count: number
@@ -343,7 +343,7 @@ selectors.
 **Zustand**
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 
 type State = {
   count: number
@@ -392,7 +392,7 @@ identities, additionally, Recoil needs to wrap your app in a context provider.
 **Zustand**
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 
 type State = {
   count: number
@@ -429,7 +429,7 @@ manually apply render optimizations by using selectors.
 **Zustand**
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 
 type State = {
   count: number
diff --git a/docs/getting-started/introduction.mdx b/docs/getting-started/introduction.mdx
index f525d9b..d65591d 100644
--- a/docs/getting-started/introduction.mdx
+++ b/docs/getting-started/introduction.mdx
@@ -36,7 +36,7 @@ yarn add zustand
 Your store is a hook! You can put anything in it: primitives, objects, functions. The `set` function _merges_ state.
 
 ```jsx
-import create from 'zustand'
+import { create } from 'zustand'
 
 const useStore = create((set) => ({
   bears: 0,
diff --git a/docs/guides/connect-to-state-with-url-hash.md b/docs/guides/connect-to-state-with-url-hash.md
index fc1bddf..967e768 100644
--- a/docs/guides/connect-to-state-with-url-hash.md
+++ b/docs/guides/connect-to-state-with-url-hash.md
@@ -8,7 +8,7 @@ nav: 12
 If you want to connect state of a store to URL hash, you can create your own hash storage.
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 import { persist, StateStorage } from 'zustand/middleware'
 
 const hashStorage: StateStorage = {
diff --git a/docs/guides/how-to-reset-state.md b/docs/guides/how-to-reset-state.md
index b7257ed..65dbe4f 100644
--- a/docs/guides/how-to-reset-state.md
+++ b/docs/guides/how-to-reset-state.md
@@ -6,7 +6,7 @@ nav: 13
 The following pattern can be used to reset the state to its initial value.
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 
 // define types for state values and actions separately
 type State = {
@@ -47,7 +47,7 @@ const useSlice = create<State & Actions>()((set, get) => ({
 Resetting multiple stores at once
 
 ```ts
-import _create, { StateCreator } from 'zustand'
+import { create: _create, StateCreator } from 'zustand'
 
 const resetters: (() => void)[] = []
 
diff --git a/docs/guides/immutable-state-and-merging.md b/docs/guides/immutable-state-and-merging.md
index 4cc86bd..aa74ad0 100644
--- a/docs/guides/immutable-state-and-merging.md
+++ b/docs/guides/immutable-state-and-merging.md
@@ -8,7 +8,7 @@ Like with React's `useState`, we need to update state immutably.
 Here's a typical example:
 
 ```jsx
-import create from 'zustand'
+import { create } from 'zustand'
 
 const useCountStore = create((set) => ({
   count: 0,
@@ -36,7 +36,7 @@ The `set` function merges state at only one level.
 If you have a nested object, you need to merge them explicitly. You will use the spread operator pattern like so:
 
 ```jsx
-import create from 'zustand'
+import { create } from 'zustand'
 
 const useCountStore = create((set) => ({
   nested: { count: 0 },
diff --git a/docs/guides/maps-and-sets-usage.md b/docs/guides/maps-and-sets-usage.md
index 4ae4722..dbf04a1 100644
--- a/docs/guides/maps-and-sets-usage.md
+++ b/docs/guides/maps-and-sets-usage.md
@@ -9,7 +9,7 @@ you do it by calling `setState` on it:
 **You can view a codesandbox here: https://codesandbox.io/s/late-https-bxz9qy**
 
 ```js
-import create from 'zustand'
+import { create } from 'zustand'
 
 const useFooBar = create(() => ({ foo: new Map(), bar: new Set() }))
 
diff --git a/docs/guides/slices-pattern.md b/docs/guides/slices-pattern.md
index 2244548..0c4b425 100644
--- a/docs/guides/slices-pattern.md
+++ b/docs/guides/slices-pattern.md
@@ -31,7 +31,7 @@ export const createBearSlice = (set) => ({
 You can now combine both the stores into **one bounded store**:
 
 ```js
-import create from 'zustand'
+import { create } from 'zustand'
 import { createBearSlice } from './bearSlice'
 import { createFishSlice } from './fishSlice'
 
@@ -81,7 +81,7 @@ export const createBearFishSlice = (set) => ({
 Combining all the stores together is the same as before.
 
 ```js
-import create from 'zustand'
+import { create } from 'zustand'
 import { createBearSlice } from './bearSlice'
 import { createFishSlice } from './fishSlice'
 import { createBearFishSlice } from './createBearFishSlice'
@@ -100,7 +100,7 @@ Adding middlewares to a combined store is the same as with other normal stores.
 Adding `persist` middleware to our `useBoundStore`:
 
 ```js
-import create from 'zustand'
+import { create } from 'zustand'
 import { createBearSlice } from './bearSlice'
 import { createFishSlice } from './fishSlice'
 import { persist } from 'zustand/middleware'
diff --git a/docs/guides/typescript.md b/docs/guides/typescript.md
index 51b9972..a16ad3f 100644
--- a/docs/guides/typescript.md
+++ b/docs/guides/typescript.md
@@ -8,7 +8,7 @@ nav: 8
 The difference when using TypeScript is that instead of writing `create(...)`, you have to write `create<T>()(...)` (notice the extra parenthesis `()` too along with the type parameter) where `T` is the type of the state to annotate it. For example:
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 
 interface BearState {
   bears: number
@@ -71,7 +71,7 @@ So what we're saying is, the inference failure in case of `createFoo` is not rea
 Zustand lies that it implemented `create`'s type, it implemented only the most part of it. Here's a simple proof by showing unsoundness. Consider the following code:
 
 ```ts
-import create from 'zustand/vanilla'
+import { create } from 'zustand'
 
 const useBoundStore = create<{ foo: number }>()((_, get) => ({
   foo: get().foo,
@@ -136,7 +136,7 @@ This way, `T` gets inferred and you get to annotate `E`. Zustand has the same us
 Alternatively, you can also use `combine`, which infers the state so that you do not need to type it.
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 import { combine } from 'zustand/middleware'
 
 const useBearStore = create(
@@ -166,7 +166,7 @@ Note that we don't use the curried version when using `combine` because `combine
 You do not have to do anything special to use middlewares in TypeScript.
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 import { devtools, persist } from 'zustand/middleware'
 
 interface BearState {
@@ -187,7 +187,7 @@ const useBearStore = create<BearState>()(
 Just make sure you are using them immediately inside `create` so as to make the contextual inference work. Doing something even remotely fancy like the following `myMiddlewares` would require more advanced types.
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 import { devtools, persist } from 'zustand/middleware'
 
 const myMiddlewares = (f) => devtools(persist(f))
@@ -212,7 +212,7 @@ Also, we recommend using `devtools` middleware as last as possible. For example,
 Imagine you had to write this hypothetical middleware.
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 
 const foo = (f, bar) => (set, get, store) => {
   store.foo = bar
@@ -234,7 +234,7 @@ If you are eager to know what the answer is to this particular problem then you
 ### Middleware that doesn't change the store type
 
 ```ts
-import create, { State, StateCreator, StoreMutatorIdentifier } from 'zustand'
+import { create, State, StateCreator, StoreMutatorIdentifier } from 'zustand'
 
 type Logger = <
   T extends State,
@@ -279,7 +279,8 @@ const useBearStore = create<BearState>()(
 ### Middleware that changes the store type
 
 ```ts
-import create, {
+import {
+  create,
   State,
   StateCreator,
   StoreMutatorIdentifier,
@@ -334,7 +335,7 @@ console.log(useBearStore.foo.toUpperCase())
 The recommended way to use `create` is using the curried workaround like so: `create<T>()(...)`. This is because it enables you to infer the store type. But if for some reason you do not want to use the workaround, you can pass the type parameters like the following. Note that in some cases, this acts as an assertion instead of annotation, so we don't recommend it.
 
 ```ts
-import create from "zustand"
+import { create } from "zustand"
 
 interface BearState {
   bears: number
@@ -356,7 +357,7 @@ const useBearStore = create<
 ### Slices pattern
 
 ```ts
-import create, { StateCreator } from 'zustand'
+import { create, StateCreator } from 'zustand'
 
 interface BearSlice {
   bears: number
diff --git a/docs/integrations/immer-middleware.md b/docs/integrations/immer-middleware.md
index c455a92..c8c9c10 100644
--- a/docs/integrations/immer-middleware.md
+++ b/docs/integrations/immer-middleware.md
@@ -22,7 +22,7 @@ npm install immer
 Updating simple states
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 import { immer } from 'zustand/middleware/immer'
 
 type State = {
@@ -52,7 +52,7 @@ export const useCountStore = create(
 Updating complex states
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 import { immer } from 'zustand/middleware/immer'
 
 interface Todo {
diff --git a/docs/integrations/persisting-store-data.md b/docs/integrations/persisting-store-data.md
index 7a92db3..2947009 100644
--- a/docs/integrations/persisting-store-data.md
+++ b/docs/integrations/persisting-store-data.md
@@ -18,7 +18,7 @@ for more details.
 ## Simple example
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 import { persist, createJSONStorage } from 'zustand/middleware'
 
 export const useBearStore = create(
@@ -483,7 +483,7 @@ const useHydration = () => {
 If the storage you want to use does not match the expected API, you can create your own storage:
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 import { persist, StateStorage } from 'zustand/middleware'
 import { get, set, del } from 'idb-keyval' // can use anything: IndexedDB, Ionic Storage, etc.
 
@@ -549,7 +549,7 @@ Basic typescript usage doesn't require anything special
 except for writing `create<State>()(...)` instead of `create(...)`.
 
 ```tsx
-import create from 'zustand'
+import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
 interface MyState {
diff --git a/docs/recipes/recipes.mdx b/docs/recipes/recipes.mdx
index 442d633..7bb664f 100644
--- a/docs/recipes/recipes.mdx
+++ b/docs/recipes/recipes.mdx
@@ -35,7 +35,7 @@ const treats = useStore(
 For instance, if you want to construct a single object with multiple state-picks inside, similar to redux's mapStateToProps, you can tell zustand that you want the object to be diffed shallowly by passing the `shallow` equality function.
 
 ```jsx
-import shallow from 'zustand/shallow'
+import { shallow } from 'zustand/shallow'
 
 // Object pick, re-renders the component when either state.nuts or state.honey change
 const { nuts, honey } = useStore(
@@ -131,7 +131,7 @@ subscribe(selector, callback, options?: { equalityFn, fireImmediately }): Unsubs
 ```
 
 ```jsx
-import create from 'zustand';
+import { create } from 'zustand';
 import { subscribeWithSelector, shallow } from 'zustand/middleware'
 const useStore = create(subscribeWithSelector(() => ({ paw: true, snout: true, fur: true })))
 
@@ -173,17 +173,17 @@ function Component() {
 Zustands core can be imported and used without the React dependency. The only difference is that the create function does not return a hook, but the api utilities.
 
 ```jsx
-import create from 'zustand/vanilla'
+import { createStore } from 'zustand/vanilla'
 
-const store = create(() => ({ ... }))
+const store = createStore(() => ({ ... }))
 const { getState, setState, subscribe, destroy } = store
 ```
 
 You can even consume an existing vanilla store with React:
 
 ```jsx
-import create from 'zustand'
-import vanillaStore from './vanillaStore'
+import { create } from 'zustand'
+import { vanillaStore } from './vanillaStore'
 
 const useStore = create(vanillaStore)
 ```
@@ -258,7 +258,7 @@ const useStore = create(
 <summary>How to pipe middlewares</summary>
 
 ```js
-import create from 'zustand'
+import { create } from 'zustand'
 import produce from 'immer'
 import pipe from 'ramda/es/pipe'
 
@@ -309,7 +309,7 @@ const immer =
 You can persist your store's data using any kind of storage.
 
 ```jsx
-import create from 'zustand'
+import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
 export const useStore = create(
diff --git a/readme.md b/readme.md
index f5fdeb1..4395e65 100644
--- a/readme.md
+++ b/readme.md
@@ -25,7 +25,7 @@ npm install zustand # or yarn add zustand
 Your store is a hook! You can put anything in it: primitives, objects, functions. State has to be updated immutably and the `set` function [merges state](./docs/guides/immutable-state-and-merging.md) to help it.
 
 ```jsx
-import create from 'zustand'
+import { create } from 'zustand'
 
 const useBearStore = create((set) => ({
   bears: 0,
@@ -87,7 +87,7 @@ const honey = useBearStore((state) => state.honey)
 If you want to construct a single object with multiple state-picks inside, similar to redux's mapStateToProps, you can tell zustand that you want the object to be diffed shallowly by passing the `shallow` equality function.
 
 ```jsx
-import shallow from 'zustand/shallow'
+import { shallow } from 'zustand/shallow'
 
 // Object pick, re-renders the component when either state.nuts or state.honey change
 const { nuts, honey } = useBearStore(
@@ -220,7 +220,7 @@ const unsub5 = useDogStore.subscribe((state) => state.paw, console.log, {
 Zustand core can be imported and used without the React dependency. The only difference is that the create function does not return a hook, but the API utilities.
 
 ```jsx
-import createStore from 'zustand/vanilla'
+import { createStore } from 'zustand/vanilla'
 
 const store = createStore(() => ({ ... }))
 const { getState, setState, subscribe } = store
@@ -232,7 +232,7 @@ You can use a vanilla store with `useStore` hook available since v4.
 
 ```jsx
 import { useStore } from 'zustand'
-import vanillaStore from './vanillaStore'
+import { vanillaStore } from './vanillaStore'
 
 const useBoundStore = (selector) => useStore(vanillaStore, selector)
 ```
@@ -309,7 +309,7 @@ const useBeeStore = create(
 You can persist your store's data using any kind of storage.
 
 ```jsx
-import create from 'zustand'
+import { create } from 'zustand'
 import { persist, createJSONStorage } from 'zustand/middleware'
 
 const useFishStore = create(
@@ -333,7 +333,7 @@ const useFishStore = create(
 Immer is available as middleware too.
 
 ```jsx
-import create from 'zustand'
+import { create } from 'zustand'
 import { immer } from 'zustand/middleware/immer'
 
 const useBeeStore = create(
@@ -482,7 +482,7 @@ const Component = () => {
 Basic typescript usage doesn't require anything special except for writing `create<State>()(...)` instead of `create(...)`...
 
 ```ts
-import create from 'zustand'
+import { create } from 'zustand'
 import { devtools, persist } from 'zustand/middleware'
 
 interface BearState {
diff --git a/src/index.ts b/src/index.ts
index bfca890..b4d7737 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,3 @@
 export * from './vanilla'
 export * from './react'
-export { default as createStore } from './vanilla'
 export { default } from './react'
diff --git a/src/react.ts b/src/react.ts
index bebe084..ac22100 100644
--- a/src/react.ts
+++ b/src/react.ts
@@ -4,7 +4,7 @@ import { useDebugValue } from 'react'
 // See: https://github.com/pmndrs/valtio/issues/452
 // The following is a workaround until ESM is supported.
 import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'
-import createStore from './vanilla'
+import { createStore } from './vanilla'
 import type {
   Mutate,
   StateCreator,
@@ -84,7 +84,15 @@ const createImpl = <T>(createState: StateCreator<T, [], []>) => {
   return useBoundStore
 }
 
-const create = (<T>(createState: StateCreator<T, [], []> | undefined) =>
+export const create = (<T>(createState: StateCreator<T, [], []> | undefined) =>
   createState ? createImpl(createState) : createImpl) as Create
 
-export default create
+/**
+ * @deprecated Use `import { create } from 'zustand'`
+ */
+export default ((createState: any) => {
+  console.warn(
+    "[DEPRECATED] default export is deprecated, instead import { create } from'zustand'"
+  )
+  return create(createState)
+}) as Create
diff --git a/src/shallow.ts b/src/shallow.ts
index 0e7f59e..98ae05c 100644
--- a/src/shallow.ts
+++ b/src/shallow.ts
@@ -1,4 +1,4 @@
-function shallow<T>(objA: T, objB: T) {
+export function shallow<T>(objA: T, objB: T) {
   if (Object.is(objA, objB)) {
     return true
   }
@@ -48,4 +48,12 @@ function shallow<T>(objA: T, objB: T) {
   return true
 }
 
-export default shallow
+/**
+ * @deprecated Use `import { shallow } from 'zustand/shallow'`
+ */
+export default ((objA, objB) => {
+  console.warn(
+    "[DEPRECATED] default export is deprecated, instead import { shallow } from'zustand/shallow'"
+  )
+  return shallow(objA, objB)
+}) as typeof shallow
diff --git a/src/vanilla.ts b/src/vanilla.ts
index b4aeb7b..d07dfe5 100644
--- a/src/vanilla.ts
+++ b/src/vanilla.ts
@@ -102,10 +102,18 @@ const createStoreImpl: CreateStoreImpl = (createState) => {
   return api as any
 }
 
-const createStore = ((createState) =>
+export const createStore = ((createState) =>
   createState ? createStoreImpl(createState) : createStoreImpl) as CreateStore
 
-export default createStore
+/**
+ * @deprecated Use `import { createStore } from ...`
+ */
+export default ((createState) => {
+  console.warn(
+    '[DEPRECATED] default export is deprecated, instead import { createStore } ...'
+  )
+  return createStore(createState)
+}) as CreateStore
 
 // ---------------------------------------------------------
 


Test patch:
diff --git a/docs/guides/testing.mdx b/docs/guides/testing.mdx
index 33008f3..eb142ca 100644
--- a/docs/guides/testing.mdx
+++ b/docs/guides/testing.mdx
@@ -11,7 +11,7 @@ When running tests, the stores are not automatically reset before each test run.
 Thus, there can be cases where the state of one test can affect another. To make sure all tests run with a pristine store state, you can mock `zustand` during testing and use the following code to create your store:
 
 ```jsx
-import actualCreate from 'zustand'
+import { create: actualCreate } from 'zustand'
 // const actualCreate = jest.requireActual('zustand') // if using jest
 import { act } from 'react-dom/test-utils'
 
@@ -43,7 +43,7 @@ In [jest](https://jestjs.io/), you can create a `__mocks__/zustand.js` and place
 If you are using zustand, as documented in [TypeScript Guide](./typescript.md), use the following code:
 
 ```tsx
-import actualCreate, { StateCreator } from 'zustand'
+import { create: actualCreate, StateCreator } from 'zustand'
 // const actualCreate = jest.requireActual('zustand') // if using jest
 import { act } from 'react-dom/test-utils'
 
diff --git a/tests/basic.test.tsx b/tests/basic.test.tsx
index 41aec90..21c4ba9 100644
--- a/tests/basic.test.tsx
+++ b/tests/basic.test.tsx
@@ -8,7 +8,8 @@ import {
 } from 'react'
 import { act, fireEvent, render } from '@testing-library/react'
 import ReactDOM from 'react-dom'
-import create, { StoreApi } from 'zustand'
+import { create } from 'zustand'
+import type { StoreApi } from 'zustand'
 
 const consoleError = console.error
 afterEach(() => {
diff --git a/tests/context.test.tsx b/tests/context.test.tsx
index 2f41f10..39705fa 100644
--- a/tests/context.test.tsx
+++ b/tests/context.test.tsx
@@ -7,7 +7,8 @@ import {
   useState,
 } from 'react'
 import { render } from '@testing-library/react'
-import create, { StoreApi } from 'zustand'
+import { create } from 'zustand'
+import type { StoreApi } from 'zustand'
 import createContext from 'zustand/context'
 import { subscribeWithSelector } from 'zustand/middleware'
 
diff --git a/tests/devtools.test.tsx b/tests/devtools.test.tsx
index ea133d0..30827d1 100644
--- a/tests/devtools.test.tsx
+++ b/tests/devtools.test.tsx
@@ -2,8 +2,8 @@ import { StoreApi } from 'zustand/vanilla'
 
 const getImports = async () => {
   const { devtools } = await import('zustand/middleware')
-  const create = (await import('zustand/vanilla')).default
-  return { create, devtools }
+  const { createStore } = await import('zustand/vanilla')
+  return { createStore, devtools }
 }
 
 type TupleOfEqualLengthH<
@@ -125,10 +125,10 @@ beforeEach(() => {
 })
 
 it('connects to the extension by passing the options and initializes', async () => {
-  const { devtools, create } = await getImports()
+  const { devtools, createStore } = await getImports()
   const options = { name: 'test', foo: 'bar' }
   const initialState = { count: 0 }
-  create(devtools(() => initialState, { enabled: true, ...options }))
+  createStore(devtools(() => initialState, { enabled: true, ...options }))
 
   expect(extensionConnector.connect).toHaveBeenLastCalledWith(options)
 
@@ -152,48 +152,48 @@ describe('If there is no extension installed...', () => {
   })
 
   it('does not throw', async () => {
-    const { devtools, create } = await getImports()
+    const { devtools, createStore } = await getImports()
     expect(() => {
-      create(devtools(() => ({ count: 0 })))
+      createStore(devtools(() => ({ count: 0 })))
     }).not.toThrow()
   })
 
   it('does not warn if not enabled', async () => {
-    const { devtools, create } = await getImports()
-    create(devtools(() => ({ count: 0 })))
+    const { devtools, createStore } = await getImports()
+    createStore(devtools(() => ({ count: 0 })))
     expect(console.warn).not.toBeCalled()
   })
 
   it('[DEV-ONLY] warns if enabled in dev mode', async () => {
-    const { devtools, create } = await getImports()
+    const { devtools, createStore } = await getImports()
     __DEV__ = true
-    create(devtools(() => ({ count: 0 }), { enabled: true }))
+    createStore(devtools(() => ({ count: 0 }), { enabled: true }))
     expect(console.warn).toBeCalled()
   })
 
   it('[PRD-ONLY] does not warn if not in dev env', async () => {
-    const { devtools, create } = await getImports()
+    const { devtools, createStore } = await getImports()
     __DEV__ = false
-    create(devtools(() => ({ count: 0 })))
+    createStore(devtools(() => ({ count: 0 })))
     expect(console.warn).not.toBeCalled()
   })
 
   it('[PRD-ONLY] does not warn if not in dev env even if enabled', async () => {
-    const { devtools, create } = await getImports()
+    const { devtools, createStore } = await getImports()
     __DEV__ = false
-    create(devtools(() => ({ count: 0 }), { enabled: true }))
+    createStore(devtools(() => ({ count: 0 }), { enabled: true }))
     expect(console.warn).not.toBeCalled()
   })
 })
 
 describe('When state changes...', () => {
   it("sends { type: setStateName || 'anonymous`, ...rest } as the action with current state", async () => {
-    const { devtools, create } = await getImports()
+    const { devtools, createStore } = await getImports()
     const options = {
       name: 'testOptionsName',
       enabled: true,
     }
-    const api = create(devtools(() => ({ count: 0, foo: 'bar' }), options))
+    const api = createStore(devtools(() => ({ count: 0, foo: 'bar' }), options))
 
     api.setState({ count: 10 }, false, 'testSetStateName')
     const [connection] = getNamedConnectionApis(options.name)
@@ -222,9 +222,9 @@ describe('When state changes...', () => {
 describe('when it receives a message of type...', () => {
   describe('ACTION...', () => {
     it('does nothing', async () => {
-      const { devtools, create } = await getImports()
+      const { devtools, createStore } = await getImports()
       const initialState = { count: 0 }
-      const api = create(devtools(() => initialState, { enabled: true }))
+      const api = createStore(devtools(() => initialState, { enabled: true }))
       const setState = jest.spyOn(api, 'setState')
 
       const [subscriber] = getNamedConnectionSubscribers(undefined)
@@ -238,9 +238,9 @@ describe('when it receives a message of type...', () => {
     })
 
     it('unless action type is __setState', async () => {
-      const { devtools, create } = await getImports()
+      const { devtools, createStore } = await getImports()
       const initialState = { count: 0 }
-      const api = create(devtools(() => initialState, { enabled: true }))
+      const api = createStore(devtools(() => initialState, { enabled: true }))
 
       const [connectionSubscriber] = getNamedConnectionSubscribers(undefined)
       connectionSubscriber({
@@ -252,9 +252,9 @@ describe('when it receives a message of type...', () => {
     })
 
     it('does nothing even if there is `api.dispatch`', async () => {
-      const { devtools, create } = await getImports()
+      const { devtools, createStore } = await getImports()
       const initialState = { count: 0 }
-      const api = create(devtools(() => initialState, { enabled: true }))
+      const api = createStore(devtools(() => initialState, { enabled: true }))
       ;(api as any).dispatch = jest.fn()
       const setState = jest.spyOn(api, 'setState')
 
@@ -270,9 +270,9 @@ describe('when it receives a message of type...', () => {
     })
 
     it('dispatches with `api.dispatch` when `api.dispatchFromDevtools` is set to true', async () => {
-      const { devtools, create } = await getImports()
+      const { devtools, createStore } = await getImports()
       const initialState = { count: 0 }
-      const api = create(devtools(() => initialState, { enabled: true }))
+      const api = createStore(devtools(() => initialState, { enabled: true }))
       ;(api as any).dispatch = jest.fn()
       ;(api as any).dispatchFromDevtools = true
       const setState = jest.spyOn(api, 'setState')
@@ -291,9 +291,9 @@ describe('when it receives a message of type...', () => {
     })
 
     it('does not throw for unsupported payload', async () => {
-      const { devtools, create } = await getImports()
+      const { devtools, createStore } = await getImports()
       const initialState = { count: 0 }
-      const api = create(devtools(() => initialState, { enabled: true }))
+      const api = createStore(devtools(() => initialState, { enabled: true }))
       ;(api as any).dispatch = jest.fn()
       ;(api as any).dispatchFromDevtools = true
       const setState = jest.spyOn(api, 'setState')
@@ -340,9 +340,9 @@ describe('when it receives a message of type...', () => {
 
   describe('DISPATCH and payload of type...', () => {
     it('RESET, it inits with initial state', async () => {
-      const { devtools, create } = await getImports()
+      const { devtools, createStore } = await getImports()
       const initialState = { count: 0 }
-      const api = create(devtools(() => initialState, { enabled: true }))
+      const api = createStore(devtools(() => initialState, { enabled: true }))
       api.setState({ count: 1 })
 
       const [connection] = getNamedConnectionApis(undefined)
@@ -359,9 +359,9 @@ describe('when it receives a message of type...', () => {
     })
 
     it('COMMIT, it inits with current state', async () => {
-      const { devtools, create } = await getImports()
+      const { devtools, createStore } = await getImports()
       const initialState = { count: 0 }
-      const api = create(devtools(() => initialState, { enabled: true }))
+      const api = createStore(devtools(() => initialState, { enabled: true }))
       api.setState({ count: 2 })
       const currentState = api.getState()
 
@@ -379,9 +379,9 @@ describe('when it receives a message of type...', () => {
 
     describe('ROLLBACK...', () => {
       it('it updates state without recording and inits with `message.state`', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const initialState = { count: 0, increment: () => {} }
-        const api = create(devtools(() => initialState, { enabled: true }))
+        const api = createStore(devtools(() => initialState, { enabled: true }))
         const newState = { foo: 'bar' }
 
         const [connection] = getNamedConnectionApis(undefined)
@@ -402,10 +402,10 @@ describe('when it receives a message of type...', () => {
       })
 
       it('does not throw for unparsable `message.state`', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const increment = () => {}
         const initialState = { count: 0, increment }
-        const api = create(devtools(() => initialState, { enabled: true }))
+        const api = createStore(devtools(() => initialState, { enabled: true }))
         const originalConsoleError = console.error
         console.error = jest.fn()
 
@@ -440,9 +440,9 @@ describe('when it receives a message of type...', () => {
     describe('JUMP_TO_STATE...', () => {
       const increment = () => {}
       it('it updates state without recording with `message.state`', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const initialState = { count: 0, increment }
-        const api = create(devtools(() => initialState, { enabled: true }))
+        const api = createStore(devtools(() => initialState, { enabled: true }))
         const newState = { foo: 'bar' }
 
         const [connection] = getNamedConnectionApis(undefined)
@@ -458,9 +458,9 @@ describe('when it receives a message of type...', () => {
       })
 
       it('does not throw for unparsable `message.state`', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const initialState = { count: 0, increment: () => {} }
-        const api = create(devtools(() => initialState, { enabled: true }))
+        const api = createStore(devtools(() => initialState, { enabled: true }))
         const originalConsoleError = console.error
         console.error = jest.fn()
 
@@ -492,9 +492,9 @@ describe('when it receives a message of type...', () => {
 
     describe('JUMP_TO_ACTION...', () => {
       it('it updates state without recording with `message.state`', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const initialState = { count: 0, increment: () => {} }
-        const api = create(devtools(() => initialState, { enabled: true }))
+        const api = createStore(devtools(() => initialState, { enabled: true }))
         const newState = { foo: 'bar' }
 
         const [connection] = getNamedConnectionApis(undefined)
@@ -510,10 +510,10 @@ describe('when it receives a message of type...', () => {
       })
 
       it('does not throw for unparsable `message.state`', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const increment = () => {}
         const initialState = { count: 0, increment }
-        const api = create(devtools(() => initialState, { enabled: true }))
+        const api = createStore(devtools(() => initialState, { enabled: true }))
         const originalConsoleError = console.error
         console.error = jest.fn()
 
@@ -544,9 +544,9 @@ describe('when it receives a message of type...', () => {
     })
 
     it('IMPORT_STATE, it updates state without recording and inits the last computedState', async () => {
-      const { devtools, create } = await getImports()
+      const { devtools, createStore } = await getImports()
       const initialState = { count: 0, increment: () => {} }
-      const api = create(devtools(() => initialState, { enabled: true }))
+      const api = createStore(devtools(() => initialState, { enabled: true }))
       const nextLiftedState = {
         computedStates: [{ state: { count: 4 } }, { state: { count: 5 } }],
       }
@@ -569,8 +569,8 @@ describe('when it receives a message of type...', () => {
     })
 
     it('PAUSE_RECORDING, it toggles the sending of actions', async () => {
-      const { devtools, create } = await getImports()
-      const api = create(devtools(() => ({ count: 0 }), { enabled: true }))
+      const { devtools, createStore } = await getImports()
+      const api = createStore(devtools(() => ({ count: 0 }), { enabled: true }))
 
       api.setState({ count: 1 }, false, 'increment')
       const [connection] = getNamedConnectionApis(undefined)
@@ -613,8 +613,8 @@ describe('with redux middleware', () => {
 
   it('works as expected', async () => {
     const { devtools, redux } = await import('zustand/middleware')
-    const create = (await import('zustand/vanilla')).default
-    api = create(
+    const { createStore } = await import('zustand/vanilla')
+    api = createStore(
       devtools(
         redux(
           (
@@ -660,32 +660,32 @@ describe('with redux middleware', () => {
 })
 
 it('works in non-browser env', async () => {
-  const { devtools, create } = await getImports()
+  const { devtools, createStore } = await getImports()
   const originalWindow = global.window
   global.window = undefined as any
 
   expect(() => {
-    create(devtools(() => ({ count: 0 }), { enabled: true }))
+    createStore(devtools(() => ({ count: 0 }), { enabled: true }))
   }).not.toThrow()
 
   global.window = originalWindow
 })
 
 it('works in react native env', async () => {
-  const { devtools, create } = await getImports()
+  const { devtools, createStore } = await getImports()
   const originalWindow = global.window
   global.window = {} as any
 
   expect(() => {
-    create(devtools(() => ({ count: 0 }), { enabled: true }))
+    createStore(devtools(() => ({ count: 0 }), { enabled: true }))
   }).not.toThrow()
 
   global.window = originalWindow
 })
 
 it('preserves isRecording after setting from devtools', async () => {
-  const { devtools, create } = await getImports()
-  const api = create(devtools(() => ({ count: 0 }), { enabled: true }))
+  const { devtools, createStore } = await getImports()
+  const api = createStore(devtools(() => ({ count: 0 }), { enabled: true }))
   const [connection] = getNamedConnectionApis(undefined)
   const [connectionSubscriber] = getNamedConnectionSubscribers(undefined)
   connectionSubscriber({
@@ -716,28 +716,28 @@ it('preserves isRecording after setting from devtools', async () => {
 
 describe('when redux connection was called on multiple stores with `name` undefined in `devtools` options', () => {
   it('should create separate connection for each devtools store with .connect call', async () => {
-    const { devtools, create } = await getImports()
+    const { devtools, createStore } = await getImports()
     const options1 = { foo: 'bar', testConnectionId: 'asdf' }
     const options2 = { foo: 'barr', testConnectionId: '123asd' }
     const initialState1 = { count: 0 }
     const initialState2 = { count1: 1 }
 
-    create(devtools(() => initialState1, { enabled: true, ...options1 }))
-    create(devtools(() => initialState2, { enabled: true, ...options2 }))
+    createStore(devtools(() => initialState1, { enabled: true, ...options1 }))
+    createStore(devtools(() => initialState2, { enabled: true, ...options2 }))
 
     expect(extensionConnector.connect).toHaveBeenNthCalledWith(1, options1)
     expect(extensionConnector.connect).toHaveBeenNthCalledWith(2, options2)
   })
 
   it('should call .init on each different connection object', async () => {
-    const { devtools, create } = await getImports()
+    const { devtools, createStore } = await getImports()
     const options1 = { foo: 'bar', testConnectionId: 'asdf' }
     const options2 = { foo: 'barr', testConnectionId: '123asd' }
     const initialState1 = { count: 0 }
     const initialState2 = { count1: 1 }
 
-    create(devtools(() => initialState1, { enabled: true, ...options1 }))
-    create(devtools(() => initialState2, { enabled: true, ...options2 }))
+    createStore(devtools(() => initialState1, { enabled: true, ...options1 }))
+    createStore(devtools(() => initialState2, { enabled: true, ...options2 }))
 
     const [conn1, conn2] = getUnnamedConnectionApis(
       options1.testConnectionId,
@@ -749,14 +749,14 @@ describe('when redux connection was called on multiple stores with `name` undefi
 
   describe('when `store` property was provided in `devtools` call in options', () => {
     it('should create single connection for all indernal calls of .connect and `store` is not passed to .connect', async () => {
-      const { devtools, create } = await getImports()
+      const { devtools, createStore } = await getImports()
       const options1 = { store: 'store1123', foo: 'bar1' }
       const options2 = { store: 'store2313132', foo: 'bar2' }
       const initialState1 = { count: 0 }
       const initialState2 = { count1: 1 }
 
-      create(devtools(() => initialState1, { enabled: true, ...options1 }))
-      create(devtools(() => initialState2, { enabled: true, ...options2 }))
+      createStore(devtools(() => initialState1, { enabled: true, ...options1 }))
+      createStore(devtools(() => initialState2, { enabled: true, ...options2 }))
 
       expect(extensionConnector.connect).toHaveBeenCalledTimes(1)
       expect(extensionConnector.connect).toHaveBeenCalledWith({
@@ -765,14 +765,14 @@ describe('when redux connection was called on multiple stores with `name` undefi
     })
 
     it('should call `.init` on single connection with combined states after each `create(devtools` call', async () => {
-      const { devtools, create } = await getImports()
+      const { devtools, createStore } = await getImports()
       const options1 = { store: 'store12' }
       const options2 = { store: 'store21' }
       const initialState1 = { count1: 0 }
       const initialState2 = { count2: 1 }
 
-      create(devtools(() => initialState1, { enabled: true, ...options1 }))
-      create(devtools(() => initialState2, { enabled: true, ...options2 }))
+      createStore(devtools(() => initialState1, { enabled: true, ...options1 }))
+      createStore(devtools(() => initialState2, { enabled: true, ...options2 }))
 
       expect(extensionConnector.connect).toHaveBeenCalledTimes(1)
       const [connection] = getNamedConnectionApis(undefined)
@@ -791,15 +791,15 @@ describe('when redux connection was called on multiple stores with `name` undefi
 describe('when redux connection was called on multiple stores with `name` provided in `devtools` options', () => {
   describe('when same `name` is provided to all stores in devtools options', () => {
     it('should call .connect of redux extension with `name` that was passed from `devtools` options', async () => {
-      const { devtools, create } = await getImports()
+      const { devtools, createStore } = await getImports()
       const connectionName = 'test'
       const options1 = { name: connectionName, store: 'store1123', foo: 'bar1' }
       const options2 = { name: connectionName, store: 'store1414', foo: 'bar1' }
       const initialState1 = { count: 0 }
       const initialState2 = { count: 2 }
 
-      create(devtools(() => initialState1, { enabled: true, ...options1 }))
-      create(devtools(() => initialState2, { enabled: true, ...options2 }))
+      createStore(devtools(() => initialState1, { enabled: true, ...options1 }))
+      createStore(devtools(() => initialState2, { enabled: true, ...options2 }))
 
       expect(extensionConnector.connect).toHaveBeenCalledTimes(1)
       expect(extensionConnector.connect).toHaveBeenCalledWith({
@@ -811,7 +811,7 @@ describe('when redux connection was called on multiple stores with `name` provid
 
   describe('when different `name` props were provided for different group of stores in devtools options', () => {
     it('should call .connect of redux extension with `name` that was passed from `devtools` options', async () => {
-      const { devtools, create } = await getImports()
+      const { devtools, createStore } = await getImports()
       const connectionNameGroup1 = 'test1'
       const connectionNameGroup2 = 'test2'
       const options1 = {
@@ -839,10 +839,10 @@ describe('when redux connection was called on multiple stores with `name` provid
       const initialState3 = { count: 5 }
       const initialState4 = { count: 7 }
 
-      create(devtools(() => initialState1, { enabled: true, ...options1 }))
-      create(devtools(() => initialState2, { enabled: true, ...options2 }))
-      create(devtools(() => initialState3, { enabled: true, ...options3 }))
-      create(devtools(() => initialState4, { enabled: true, ...options4 }))
+      createStore(devtools(() => initialState1, { enabled: true, ...options1 }))
+      createStore(devtools(() => initialState2, { enabled: true, ...options2 }))
+      createStore(devtools(() => initialState3, { enabled: true, ...options3 }))
+      createStore(devtools(() => initialState4, { enabled: true, ...options4 }))
 
       expect(extensionConnector.connect).toHaveBeenCalledTimes(2)
       expect(extensionConnector.connect).toHaveBeenNthCalledWith(1, {
@@ -856,7 +856,7 @@ describe('when redux connection was called on multiple stores with `name` provid
     })
 
     it('should call `.init` on single connection with combined states after each `create(devtools` call', async () => {
-      const { devtools, create } = await getImports()
+      const { devtools, createStore } = await getImports()
       const connectionNameGroup1 = 'test1'
       const connectionNameGroup2 = 'test2'
       const options1 = {
@@ -884,10 +884,10 @@ describe('when redux connection was called on multiple stores with `name` provid
       const initialState3 = { count: 5 }
       const initialState4 = { count: 7 }
 
-      create(devtools(() => initialState1, { enabled: true, ...options1 }))
-      create(devtools(() => initialState2, { enabled: true, ...options2 }))
-      create(devtools(() => initialState3, { enabled: true, ...options3 }))
-      create(devtools(() => initialState4, { enabled: true, ...options4 }))
+      createStore(devtools(() => initialState1, { enabled: true, ...options1 }))
+      createStore(devtools(() => initialState2, { enabled: true, ...options2 }))
+      createStore(devtools(() => initialState3, { enabled: true, ...options3 }))
+      createStore(devtools(() => initialState4, { enabled: true, ...options4 }))
 
       expect(extensionConnector.connect).toHaveBeenCalledTimes(2)
       const [connection1, connection2] = getNamedConnectionApis(
@@ -913,13 +913,15 @@ describe('when redux connection was called on multiple stores with `name` provid
     })
 
     it('preserves isRecording after setting from devtools on proper connection subscriber', async () => {
-      const { devtools, create } = await getImports()
+      const { devtools, createStore } = await getImports()
       const options1 = { name: 'asdf1' }
       const options2 = { name: 'asdf2' }
-      const api1 = create(
+      const api1 = createStore(
         devtools(() => ({ count: 0 }), { enabled: true, ...options1 })
       )
-      create(devtools(() => ({ count: 0 }), { enabled: true, ...options2 }))
+      createStore(
+        devtools(() => ({ count: 0 }), { enabled: true, ...options2 })
+      )
       const connections = getNamedConnectionApis(options1.name, options2.name)
       const [connectionSubscriber] = getNamedConnectionSubscribers(
         options1.name
@@ -953,10 +955,10 @@ describe('when redux connection was called on multiple stores with `name` provid
 
       it('works as expected', async () => {
         const { devtools, redux } = await import('zustand/middleware')
-        const create = (await import('zustand/vanilla')).default
+        const { createStore } = await import('zustand/vanilla')
         const options1 = { testConnectionId: 'asdf' }
         const options2 = { testConnectionId: '2f' }
-        api1 = create(
+        api1 = createStore(
           devtools(
             redux(
               (
@@ -970,7 +972,7 @@ describe('when redux connection was called on multiple stores with `name` provid
             { enabled: true, ...options1 }
           )
         )
-        api2 = create(
+        api2 = createStore(
           devtools(
             redux(
               (
@@ -1028,7 +1030,7 @@ describe('when redux connection was called on multiple stores with `name` provid
 describe('when create devtools was called multiple times with `name` option undefined', () => {
   describe('When state changes...', () => {
     it("sends { type: setStateName || 'anonymous`, ...rest } as the action with current state, isolated from other connections", async () => {
-      const { devtools, create } = await getImports()
+      const { devtools, createStore } = await getImports()
       const options1 = {
         enabled: true,
         testConnectionId: '123',
@@ -1041,9 +1043,11 @@ describe('when create devtools was called multiple times with `name` option unde
         enabled: true,
         testConnectionId: '412',
       }
-      const api1 = create(devtools(() => ({ count: 0, foo: 'bar' }), options1))
-      create(devtools(() => ({ count: 0, foo: 'bar1' }), options2))
-      create(devtools(() => ({ count: 0, foo: 'bar2' }), options3))
+      const api1 = createStore(
+        devtools(() => ({ count: 0, foo: 'bar' }), options1)
+      )
+      createStore(devtools(() => ({ count: 0, foo: 'bar1' }), options2))
+      createStore(devtools(() => ({ count: 0, foo: 'bar2' }), options3))
 
       api1.setState({ count: 10 }, false, 'testSetStateName')
       const [connection1, connection2, connection3] = getUnnamedConnectionApis(
@@ -1082,26 +1086,26 @@ describe('when create devtools was called multiple times with `name` option unde
   describe('when it receives a message of type...', () => {
     describe('ACTION...', () => {
       it('does nothing, connections isolated from each other', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const options1 = { testConnectionId: '123' }
         const options2 = { testConnectionId: '231' }
         const options3 = { testConnectionId: '4342' }
         const initialState1 = { count: 0 }
         const initialState2 = { count: 2 }
         const initialState3 = { count: 3 }
-        const api1 = create(
+        const api1 = createStore(
           devtools(() => initialState1, {
             enabled: true,
             ...options1,
           })
         )
-        const api2 = create(
+        const api2 = createStore(
           devtools(() => initialState2, {
             enabled: true,
             ...options2,
           })
         )
-        const api3 = create(
+        const api3 = createStore(
           devtools(() => initialState3, {
             enabled: true,
             ...options3,
@@ -1128,20 +1132,20 @@ describe('when create devtools was called multiple times with `name` option unde
       })
 
       it('unless action type is __setState, connections isolated from each other', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const options1 = { testConnectionId: 'asdf' }
         const options2 = { testConnectionId: '2f' }
         const options3 = { testConnectionId: 'd2e' }
         const initialState1 = { count: 0 }
         const initialState2 = { count: 2 }
         const initialState3 = { count: 5 }
-        const api1 = create(
+        const api1 = createStore(
           devtools(() => initialState1, { enabled: true, ...options1 })
         )
-        const api2 = create(
+        const api2 = createStore(
           devtools(() => initialState2, { enabled: true, ...options2 })
         )
-        const api3 = create(
+        const api3 = createStore(
           devtools(() => initialState3, { enabled: true, ...options3 })
         )
 
@@ -1159,20 +1163,20 @@ describe('when create devtools was called multiple times with `name` option unde
       })
 
       it('does nothing even if there is `api.dispatch`, connections isolated from each other', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const options1 = { testConnectionId: 'asdf' }
         const options2 = { testConnectionId: '2f' }
         const options3 = { testConnectionId: 'd2e' }
         const initialState1 = { count: 0 }
         const initialState2 = { count: 2 }
         const initialState3 = { count: 5 }
-        const api1 = create(
+        const api1 = createStore(
           devtools(() => initialState1, { enabled: true, ...options1 })
         )
-        const api2 = create(
+        const api2 = createStore(
           devtools(() => initialState2, { enabled: true, ...options2 })
         )
-        const api3 = create(
+        const api3 = createStore(
           devtools(() => initialState3, { enabled: true, ...options3 })
         )
         ;(api1 as any).dispatch = jest.fn()
@@ -1205,20 +1209,20 @@ describe('when create devtools was called multiple times with `name` option unde
       })
 
       it('dispatches with `api.dispatch` when `api.dispatchFromDevtools` is set to true, connections are isolated from each other', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const options1 = { testConnectionId: 'asdf' }
         const options2 = { testConnectionId: '2f' }
         const options3 = { testConnectionId: 'd2e' }
         const initialState1 = { count: 0 }
         const initialState2 = { count: 2 }
         const initialState3 = { count: 5 }
-        const api1 = create(
+        const api1 = createStore(
           devtools(() => initialState1, { enabled: true, ...options1 })
         )
-        const api2 = create(
+        const api2 = createStore(
           devtools(() => initialState2, { enabled: true, ...options2 })
         )
-        const api3 = create(
+        const api3 = createStore(
           devtools(() => initialState3, { enabled: true, ...options3 })
         )
         ;(api1 as any).dispatch = jest.fn()
@@ -1260,20 +1264,20 @@ describe('when create devtools was called multiple times with `name` option unde
       })
 
       it('does not throw for unsupported payload, connections are isolated from each other', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const options1 = { testConnectionId: 'asdf' }
         const options2 = { testConnectionId: '2f' }
         const options3 = { testConnectionId: 'd2e' }
         const initialState1 = { count: 0 }
         const initialState2 = { count: 2 }
         const initialState3 = { count: 5 }
-        const api1 = create(
+        const api1 = createStore(
           devtools(() => initialState1, { enabled: true, ...options1 })
         )
-        const api2 = create(
+        const api2 = createStore(
           devtools(() => initialState2, { enabled: true, ...options2 })
         )
-        const api3 = create(
+        const api3 = createStore(
           devtools(() => initialState3, { enabled: true, ...options3 })
         )
         ;(api1 as any).dispatch = jest.fn()
@@ -1398,20 +1402,20 @@ describe('when create devtools was called multiple times with `name` option unde
 
     describe('DISPATCH and payload of type...', () => {
       it('RESET, it inits with initial state, connections are isolated from each other', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const options1 = { testConnectionId: 'asdf' }
         const options2 = { testConnectionId: '2f' }
         const options3 = { testConnectionId: 'd2e' }
         const initialState1 = { count: 0 }
         const initialState2 = { count: 2 }
         const initialState3 = { count: 5 }
-        const api1 = create(
+        const api1 = createStore(
           devtools(() => initialState1, { enabled: true, ...options1 })
         )
-        const api2 = create(
+        const api2 = createStore(
           devtools(() => initialState2, { enabled: true, ...options2 })
         )
-        const api3 = create(
+        const api3 = createStore(
           devtools(() => initialState3, { enabled: true, ...options3 })
         )
         api1.setState({ count: 1 })
@@ -1446,20 +1450,20 @@ describe('when create devtools was called multiple times with `name` option unde
       })
 
       it('COMMIT, it inits with current state, connections are isolated from each other', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const options1 = { testConnectionId: 'asdf' }
         const options2 = { testConnectionId: '2f' }
         const options3 = { testConnectionId: 'd2e' }
         const initialState1 = { count: 0 }
         const initialState2 = { count: 2 }
         const initialState3 = { count: 5 }
-        const api1 = create(
+        const api1 = createStore(
           devtools(() => initialState1, { enabled: true, ...options1 })
         )
-        const api2 = create(
+        const api2 = createStore(
           devtools(() => initialState2, { enabled: true, ...options2 })
         )
-        const api3 = create(
+        const api3 = createStore(
           devtools(() => initialState3, { enabled: true, ...options3 })
         )
         api1.setState({ count: 1 })
@@ -1496,20 +1500,20 @@ describe('when create devtools was called multiple times with `name` option unde
 
     describe('ROLLBACK...', () => {
       it('it updates state without recording and inits with `message.state, connections are isolated from each other`', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const options1 = { testConnectionId: 'asdf' }
         const options2 = { testConnectionId: '2f' }
         const options3 = { testConnectionId: 'd2e' }
         const initialState1 = { count: 0, increment: () => {} }
         const initialState2 = { count: 2, increment: () => {} }
         const initialState3 = { count: 5, increment: () => {} }
-        const api1 = create(
+        const api1 = createStore(
           devtools(() => initialState1, { enabled: true, ...options1 })
         )
-        const api2 = create(
+        const api2 = createStore(
           devtools(() => initialState2, { enabled: true, ...options2 })
         )
-        const api3 = create(
+        const api3 = createStore(
           devtools(() => initialState3, { enabled: true, ...options3 })
         )
         const newState1 = { foo: 'bar1' }
@@ -1576,7 +1580,7 @@ describe('when create devtools was called multiple times with `name` option unde
       })
 
       it('does not throw for unparsable `message.state`, connections are isolated from each other', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const increment1 = () => {}
         const increment2 = () => {}
         const increment3 = () => {}
@@ -1586,13 +1590,13 @@ describe('when create devtools was called multiple times with `name` option unde
         const initialState1 = { count: 0, increment: increment1 }
         const initialState2 = { count: 2, increment: increment2 }
         const initialState3 = { count: 5, increment: increment3 }
-        const api1 = create(
+        const api1 = createStore(
           devtools(() => initialState1, { enabled: true, ...options1 })
         )
-        const api2 = create(
+        const api2 = createStore(
           devtools(() => initialState2, { enabled: true, ...options2 })
         )
-        const api3 = create(
+        const api3 = createStore(
           devtools(() => initialState3, { enabled: true, ...options3 })
         )
         const originalConsoleError = console.error
@@ -1678,20 +1682,20 @@ describe('when create devtools was called multiple times with `name` option unde
       const increment3 = () => {}
 
       it('it updates state without recording with `message.state`, connections are isolated from each other', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const options1 = { testConnectionId: 'asdf' }
         const options2 = { testConnectionId: '2f' }
         const options3 = { testConnectionId: 'd2e' }
         const initialState1 = { count: 0, increment: increment1 }
         const initialState2 = { count: 2, increment: increment2 }
         const initialState3 = { count: 5, increment: increment3 }
-        const api1 = create(
+        const api1 = createStore(
           devtools(() => initialState1, { enabled: true, ...options1 })
         )
-        const api2 = create(
+        const api2 = createStore(
           devtools(() => initialState2, { enabled: true, ...options2 })
         )
-        const api3 = create(
+        const api3 = createStore(
           devtools(() => initialState3, { enabled: true, ...options3 })
         )
         const newState1 = { foo: 'bar1' }
@@ -1745,20 +1749,20 @@ describe('when create devtools was called multiple times with `name` option unde
       })
 
       it('does not throw for unparsable `message.state`, connections are isolated from each other', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const options1 = { testConnectionId: 'asdf' }
         const options2 = { testConnectionId: '2f' }
         const options3 = { testConnectionId: 'd2e' }
         const initialState1 = { count: 0, increment: increment1 }
         const initialState2 = { count: 2, increment: increment2 }
         const initialState3 = { count: 5, increment: increment3 }
-        const api1 = create(
+        const api1 = createStore(
           devtools(() => initialState1, { enabled: true, ...options1 })
         )
-        const api2 = create(
+        const api2 = createStore(
           devtools(() => initialState2, { enabled: true, ...options2 })
         )
-        const api3 = create(
+        const api3 = createStore(
           devtools(() => initialState3, { enabled: true, ...options3 })
         )
         const originalConsoleError = console.error
@@ -1841,20 +1845,20 @@ describe('when create devtools was called multiple times with `name` option unde
       const increment3 = () => {}
 
       it('it updates state without recording with `message.state`, connections are isolated from each other', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const options1 = { testConnectionId: 'asdf' }
         const options2 = { testConnectionId: '2f' }
         const options3 = { testConnectionId: 'd2e' }
         const initialState1 = { count: 0, increment: increment1 }
         const initialState2 = { count: 2, increment: increment2 }
         const initialState3 = { count: 5, increment: increment3 }
-        const api1 = create(
+        const api1 = createStore(
           devtools(() => initialState1, { enabled: true, ...options1 })
         )
-        const api2 = create(
+        const api2 = createStore(
           devtools(() => initialState2, { enabled: true, ...options2 })
         )
-        const api3 = create(
+        const api3 = createStore(
           devtools(() => initialState3, { enabled: true, ...options3 })
         )
         const newState1 = { foo: 'bar1' }
@@ -1909,20 +1913,20 @@ describe('when create devtools was called multiple times with `name` option unde
       })
 
       it('does not throw for unparsable `message.state`, connections are isolated from each other', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const options1 = { testConnectionId: 'asdf' }
         const options2 = { testConnectionId: '2f' }
         const options3 = { testConnectionId: 'd2e' }
         const initialState1 = { count: 0, increment: increment1 }
         const initialState2 = { count: 2, increment: increment2 }
         const initialState3 = { count: 5, increment: increment3 }
-        const api1 = create(
+        const api1 = createStore(
           devtools(() => initialState1, { enabled: true, ...options1 })
         )
-        const api2 = create(
+        const api2 = createStore(
           devtools(() => initialState2, { enabled: true, ...options2 })
         )
-        const api3 = create(
+        const api3 = createStore(
           devtools(() => initialState3, { enabled: true, ...options3 })
         )
         const originalConsoleError = console.error
@@ -1998,20 +2002,20 @@ describe('when create devtools was called multiple times with `name` option unde
       })
 
       it('IMPORT_STATE, it updates state without recording and inits the last computedState, connections are isolated from each other', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const options1 = { testConnectionId: 'asdf' }
         const options2 = { testConnectionId: '2f' }
         const options3 = { testConnectionId: 'd2e' }
         const initialState1 = { count: 0, increment: increment1 }
         const initialState2 = { count: 2, increment: increment2 }
         const initialState3 = { count: 5, increment: increment3 }
-        const api1 = create(
+        const api1 = createStore(
           devtools(() => initialState1, { enabled: true, ...options1 })
         )
-        const api2 = create(
+        const api2 = createStore(
           devtools(() => initialState2, { enabled: true, ...options2 })
         )
-        const api3 = create(
+        const api3 = createStore(
           devtools(() => initialState3, { enabled: true, ...options3 })
         )
         const nextLiftedState1 = {
@@ -2090,17 +2094,17 @@ describe('when create devtools was called multiple times with `name` option unde
       })
 
       it('PAUSE_RECORDING, it toggles the sending of actions, connections are isolated from each other', async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const options1 = { testConnectionId: 'asdf' }
         const options2 = { testConnectionId: '2f' }
         const options3 = { testConnectionId: 'd2e' }
-        const api1 = create(
+        const api1 = createStore(
           devtools(() => ({ count: 0 }), { enabled: true, ...options1 })
         )
-        const api2 = create(
+        const api2 = createStore(
           devtools(() => ({ count: 2 }), { enabled: true, ...options2 })
         )
-        const api3 = create(
+        const api3 = createStore(
           devtools(() => ({ count: 4 }), { enabled: true, ...options3 })
         )
 
@@ -2204,13 +2208,15 @@ describe('when create devtools was called multiple times with `name` and `store`
   describe('when `type` was provided in store state methods as option', () => {
     describe('When state changes...', () => {
       it("sends { type: setStateName || 'anonymous`, ...rest } as the action with current state", async () => {
-        const { devtools, create } = await getImports()
+        const { devtools, createStore } = await getImports()
         const options = {
           name: 'testOptionsName',
           store: 'someStore',
           enabled: true,
         }
-        const api = create(devtools(() => ({ count: 0, foo: 'bar' }), options))
+        const api = createStore(
+          devtools(() => ({ count: 0, foo: 'bar' }), options)
+        )
 
         const testStateActionType = 'testSetStateName'
 
@@ -2241,32 +2247,32 @@ describe('when create devtools was called multiple times with `name` and `store`
     describe('when it receives a message of type...', () => {
       describe('ACTION...', () => {
         it('does nothing, connections isolated from each other', async () => {
-          const { devtools, create } = await getImports()
+          const { devtools, createStore } = await getImports()
           const options1 = { testConnectionId: '123', store: 'store1' }
           const options2 = { testConnectionId: '231', store: 'store2' }
           const initialState1 = { count: 0 }
           const initialState2 = { count: 2 }
           const initialState3 = { count: 5 }
           const initialState4 = { count: 6 }
-          const api1 = create(
+          const api1 = createStore(
             devtools(() => initialState1, {
               enabled: true,
               ...options1,
             })
           )
-          const api2 = create(
+          const api2 = createStore(
             devtools(() => initialState2, {
               enabled: true,
               ...options1,
             })
           )
-          const api3 = create(
+          const api3 = createStore(
             devtools(() => initialState3, {
               enabled: true,
               ...options2,
             })
           )
-          const api4 = create(
+          const api4 = createStore(
             devtools(() => initialState4, {
               enabled: true,
               ...options2,
@@ -2296,7 +2302,7 @@ describe('when create devtools was called multiple times with `name` and `store`
         })
 
         it('unless action type is __setState, connections isolated from each other', async () => {
-          const { devtools, create } = await getImports()
+          const { devtools, createStore } = await getImports()
           const name1 = 'name1'
           const name2 = 'name2'
           const store1 = 'someStore1'
@@ -2313,10 +2319,10 @@ describe('when create devtools was called multiple times with `name` and `store`
           }
           const initialState1 = { count: 0 }
           const initialState2 = { count: 2 }
-          const api1 = create(
+          const api1 = createStore(
             devtools(() => initialState1, { enabled: true, ...options1 })
           )
-          const api2 = create(
+          const api2 = createStore(
             devtools(() => initialState2, { enabled: true, ...options2 })
           )
           const originalConsoleError = console.error
@@ -2353,7 +2359,7 @@ describe('when create devtools was called multiple times with `name` and `store`
         })
 
         it('does nothing even if there is `api.dispatch`, connections isolated from each other', async () => {
-          const { devtools, create } = await getImports()
+          const { devtools, createStore } = await getImports()
           const name1 = 'name1'
           const name2 = 'name2'
           const store1 = 'someStore1'
@@ -2370,10 +2376,10 @@ describe('when create devtools was called multiple times with `name` and `store`
           }
           const initialState1 = { count: 0 }
           const initialState2 = { count: 2 }
-          const api1 = create(
+          const api1 = createStore(
             devtools(() => initialState1, { enabled: true, ...options1 })
           )
-          const api2 = create(
+          const api2 = createStore(
             devtools(() => initialState2, { enabled: true, ...options2 })
           )
           ;(api1 as any).dispatch = jest.fn()
@@ -2400,7 +2406,7 @@ describe('when create devtools was called multiple times with `name` and `store`
         })
 
         it('dispatches with `api.dispatch` when `api.dispatchFromDevtools` is set to true, connections are isolated from each other', async () => {
-          const { devtools, create } = await getImports()
+          const { devtools, createStore } = await getImports()
           const name1 = 'name1'
           const name2 = 'name2'
           const store1 = 'someStore1'
@@ -2417,10 +2423,10 @@ describe('when create devtools was called multiple times with `name` and `store`
           }
           const initialState1 = { count: 0 }
           const initialState2 = { count: 2 }
-          const api1 = create(
+          const api1 = createStore(
             devtools(() => initialState1, { enabled: true, ...options1 })
           )
-          const api2 = create(
+          const api2 = createStore(
             devtools(() => initialState2, { enabled: true, ...options2 })
           )
           ;(api1 as any).dispatch = jest.fn()
diff --git a/tests/middlewareTypes.test.tsx b/tests/middlewareTypes.test.tsx
index a1bcc6e..200132d 100644
--- a/tests/middlewareTypes.test.tsx
+++ b/tests/middlewareTypes.test.tsx
@@ -1,4 +1,5 @@
-import create, { StoreApi } from 'zustand'
+import { create } from 'zustand'
+import type { StoreApi } from 'zustand'
 import {
   combine,
   devtools,
@@ -7,7 +8,7 @@ import {
   subscribeWithSelector,
 } from 'zustand/middleware'
 import { immer } from 'zustand/middleware/immer'
-import createVanilla from 'zustand/vanilla'
+import { createStore } from 'zustand/vanilla'
 
 type CounterState = {
   count: number
@@ -63,7 +64,7 @@ describe('counter state spec (single middleware)', () => {
     }
     TestComponent
 
-    const _testSubtyping: StoreApi<object> = createVanilla(
+    const _testSubtyping: StoreApi<object> = createStore(
       immer(() => ({ count: 0 }))
     )
   })
@@ -91,7 +92,7 @@ describe('counter state spec (single middleware)', () => {
     }
     TestComponent
 
-    const _testSubtyping: StoreApi<object> = createVanilla(
+    const _testSubtyping: StoreApi<object> = createStore(
       redux((x) => x, { count: 0 })
     )
   })
@@ -119,7 +120,7 @@ describe('counter state spec (single middleware)', () => {
     }
     TestComponent
 
-    const _testSubtyping: StoreApi<object> = createVanilla(
+    const _testSubtyping: StoreApi<object> = createStore(
       devtools(() => ({ count: 0 }))
     )
   })
@@ -146,7 +147,7 @@ describe('counter state spec (single middleware)', () => {
     }
     TestComponent
 
-    const _testSubtyping: StoreApi<object> = createVanilla(
+    const _testSubtyping: StoreApi<object> = createStore(
       subscribeWithSelector(() => ({ count: 0 }))
     )
   })
@@ -168,7 +169,7 @@ describe('counter state spec (single middleware)', () => {
     }
     TestComponent
 
-    const _testSubtyping: StoreApi<object> = createVanilla(
+    const _testSubtyping: StoreApi<object> = createStore(
       combine({ count: 0 }, () => ({}))
     )
   })
@@ -195,7 +196,7 @@ describe('counter state spec (single middleware)', () => {
     }
     TestComponent
 
-    const _testSubtyping: StoreApi<object> = createVanilla(
+    const _testSubtyping: StoreApi<object> = createStore(
       persist(() => ({ count: 0 }), { name: 'prefix' })
     )
   })
diff --git a/tests/persistAsync.test.tsx b/tests/persistAsync.test.tsx
index 684de6e..ae6f1db 100644
--- a/tests/persistAsync.test.tsx
+++ b/tests/persistAsync.test.tsx
@@ -1,6 +1,6 @@
 import { StrictMode, useEffect } from 'react'
 import { act, render, waitFor } from '@testing-library/react'
-import create from 'zustand'
+import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
 const createPersistantStore = (initialValue: string | null) => {
diff --git a/tests/persistSync.test.tsx b/tests/persistSync.test.tsx
index 7bbd2b3..3e2a7a1 100644
--- a/tests/persistSync.test.tsx
+++ b/tests/persistSync.test.tsx
@@ -1,4 +1,4 @@
-import create from 'zustand'
+import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
 const createPersistentStore = (initialValue: string | null) => {
diff --git a/tests/shallow.test.tsx b/tests/shallow.test.tsx
index a60008e..6f45206 100644
--- a/tests/shallow.test.tsx
+++ b/tests/shallow.test.tsx
@@ -1,5 +1,5 @@
-import create from 'zustand'
-import shallow from 'zustand/shallow'
+import { create } from 'zustand'
+import { shallow } from 'zustand/shallow'
 
 describe('shallow', () => {
   it('compares primitive values', () => {
diff --git a/tests/subscribe.test.tsx b/tests/subscribe.test.tsx
index 154aa12..fa5a5db 100644
--- a/tests/subscribe.test.tsx
+++ b/tests/subscribe.test.tsx
@@ -1,4 +1,4 @@
-import create from 'zustand'
+import { create } from 'zustand'
 import { subscribeWithSelector } from 'zustand/middleware'
 
 describe('subscribe()', () => {
diff --git a/tests/types.test.tsx b/tests/types.test.tsx
index 2b78749..a24317c 100644
--- a/tests/types.test.tsx
+++ b/tests/types.test.tsx
@@ -1,4 +1,4 @@
-import create from 'zustand'
+import { create } from 'zustand'
 import type {
   StateCreator,
   StoreApi,