import zustand in HTML file

[thipages]

Hi,

How can I import zustand in an html file like

    <script type="module" src=" .... "></script>

or

    <script type="importmap">
        {
          "imports": {
            "zustand":   " .... "
          }
        }
    </script>

Thank you

[dai-shi]

Use https://esm.sh

[dbritto-dev]

Hi,
thanks for your quick answer
I just tried it in an esm module with a miminal example and it throws an error
any idea?
Thank you

import {create} from "https://esm.sh/zustand/"
console.log(create) // prints e=>p(e)
const useBearStore = create((set) => ({
    bears: 0
  }))
// throws Uncaught TypeError: Cannot read properties of null (reading 'useRef') in react.production.min.js:25
const bears = useBearStore((state) => state.bears)

Yeah, that's correct since you need react if you are not using zustand/vanilla

[thipages]

ok my bad, I am not using react but "vanilla js"
still got an error :-(

import create from "https://esm.sh/zustand/vanilla" // note : I took the default export that time
console.log(create) // prints t=>b(t)
const useBearStore = create((set) => ({
    bears: 0
}))
// throws Uncaught TypeError: useBearStore is not a function in index.js:9
const bears = useBearStore((state) => state.bears)

[dbritto-dev]

ok my bad, I am not using react but "vanilla js"
still got an error :-(

import create from "https://esm.sh/zustand/vanilla" // note : I took the default export that time
console.log(create) // prints t=>b(t)
const useBearStore = create((set) => ({
    bears: 0
}))
// throws Uncaught TypeError: useBearStore is not a function in index.js:9
const bears = useBearStore((state) => state.bears)

@thipages here you go https://docs.pmnd.rs/zustand/recipes/recipes#using-zustand-without-react

[thipages]

Thank you, this is working fine now. Code example:

import { createStore } from 'https://esm.sh/zustand/vanilla'

const store = createStore((set) => ({
    bears: 0
}))
const { getState, setState, subscribe, destroy } = store
setState((state) => ( {bears : state.bears +1} ) )
console.log(getState((state) => state.bears)) // prints {bears: 1}

from my original question :

• 🙅 adding a reference in an html file (in a script tag either via module or importmap type) is not relevant cause of the dynamic build /external reference of esm.sh.
• 🆗 import can be done directly in an esm module through import { createStore } from 'https://esm.sh/zustand/vanilla'

[thipages]

solved. Thank you