Project build failed with "import.meta.env" Vite

[aaronzomback]

We are receiving project build errors when deploying our application

Specifically in Zustand's node_module files, esm/index.mjs, esm/vanilla.mjs, and esm/shallow.mjs
with statements like the code block below where it seems that the code is trying to assert the truthiness of import.meta.env

const createImpl = (createState) => {
  if ((import.meta.env && import.meta.env.MODE) !== "production" && typeof createState !== "function") {
    console.warn(
      "[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`."
    );
  }

However it is undefined which seems to cause the following error trace.

[vite-plugin-pwa:build] Expecting Unicode escape sequence \uXXXX (Note that you need plugins to import files that are not JavaScript)
file: /home/runner/work/..../node_modules/zustand/esm/index.mjs:19:22
17: }
18: const createImpl = (createState) => {
19:   if ((import.meta.env && import.meta.env.MODE) !== "production" && typeof createState !== "function") {
                          ^
20:     console.warn(
21:       "[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore }...
error during build:

Here is a link to a brief but relevant article regarding this error message

If instead we refactor to remove the initial import.meta.env with just the below, i believe it then builds succesfully.

... if ( import.meta.env.MODE !== "production" && typeof createState !== "function") ...

Has anyone else encountered these messages before with Vite ?

Vite: 4.3.8
Zustand: 4.3.8
Zustand-Computed: 1.3.5

[dai-shi]

We have a related discussion in Jotai: pmndrs/jotai#1974
I will make the same fix in Zustand, however, I'm not sure if the issue is the same or not. cc @maxsbelt

[aaronzomback]

@dai-shi I've tried it locally, and unfortunately this doesn't seem to solve the problem. I still receive the same error regarding the import.meta.env which it still seems to be checking for its truthiness.

What I've done is added a patch to the package in my local repo that removes this truthy check altogether, i.e.

... if (import.meta.env.MODE !== "production") ...

instead of

if ((import.meta.env && import.meta.env.MODE) !== "production")

and

... if (import.meta.env.MODE !== "production" && typeof createState !== "function") ...

instead of

if ((import.meta.env && import.meta.env.MODE) !== "production" && typeof createState !== "function")

And it builds with no errors

[dai-shi]

Please check the latest #1845. It uses ternary.

[aaronzomback]

@dai-shi I just tried the latest commit with the ternary

I unfortunately receive the same error as before 😅

[dai-shi]

Okay, it sounds like the issue is different from pmndrs/jotai#1974.
I'll merge #1845 anyway, but curious about this issue too.

If import.meta.env is undefined, the code should still work in an ideal way.

[dai-shi]

https://github.com/pmndrs/zustand/releases/tag/v4.3.9 is released.

[dai-shi]

I'm trying to reproduce the issue with minimal vite setup:

$ yarn create vite
✔ Project name: … vite-react-zustand
✔ Select a framework: › React
✔ Select a variant: › TypeScript
$ cd vite-react-zustand
$ yarn
$ yarn add zustand
$ nvim src/App.tsx # Modify it like the diff below
$ yarn build
$ ag -Q '[DEPRECATED] The `destroy` method' dist/assets/

--- src/App.tsx.bak     2023-06-10 13:48:21.000000000 +0900
+++ src/App.tsx 2023-06-10 13:49:43.000000000 +0900
@@ -1,10 +1,15 @@
-import { useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import './App.css'
+import { create } from 'zustand'
+
+const useCountStore = create<{ count:number; inc:()=>void }>((set) => ({
+  count: 0,
+  inc: () => set((state) => ({ count: state.count + 1 })),
+}))
 
 function App() {
-  const [count, setCount] = useState(0)
+  const { count, inc } = useCountStore()
 
   return (
     <>
@@ -18,7 +23,7 @@
       </div>
       <h1>Vite + React</h1>
       <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
+        <button onClick={inc}>
           count is {count}
         </button>
         <p>

Found this in the asset dir: destroy:()=>{({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0,SSR:!1}&&"production")!=="production"&&console.warn("[DEPRECATED] The `destroy` method

Then:

$ yarn add https://pkg.csb.dev/pmndrs/zustand/commit/d908d1ad/zustand
$ yarn build
$ ag -Q '[DEPRECATED] The `destroy` method' dist/assets/

Not bound the console.warn statement.

This confirms #1845 fixes the simple case.

[oussamachah2020]

i get [Passing vanilla store will be unsupported, instead use import { useStore } from 'zustand'
how can i solve that ?

[dbritto-dev]

@oussamachah2020 would you mind using use-zustand package?

[dai-shi]

@dbritto-dev Why do you suggest use-zustand for this? I think import { useStore } from 'zustand' is fine.

@oussamachah2020 Please provide more details with some code snippets.

[dbritto-dev]

@dai-shi just to double check something I feel that sometimes use-zustand performs better since you don't need to relay on use-sync-external-store

[MrgSub]

I'm running into this issue. import.meta isn't supported by the build service I'm using and it's causing builds to fail.
Why not use process.env ?

[dai-shi]

Maybe related: pmndrs/jotai#2431

I guess the safe bet is to provide two bundles for production and development (like React does), but this change is breaking. What is your build service? Is there a workaround to replace string in the build pipeline?