Zustand 3.5.8 broke next.js with webpack 5.

I’m using next.js with zustand for state management.

I’m not sure what’s in the 3.5.8 version of this package. But when I upgraded from 3.5.7 to 3.5.8 every single page I have is broken in development / hot reloading mode.

I’m getting a completely unrelated error that makes it look like it’s a problem with my component imports.

Server Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

This error happened while generating the page. Any console logs will be displayed in the terminal window.

^ Red herring.

Note: If I make a production build everything works as expected and there are no errors. The errors only occur when I run next in development / hot reloading mode with webpack 5.

After spending hours trying to fix what looked to be random new problems with circular dependencies that was introduced by upgrading zustand somehow. I made it to a component where the only thing that was wrong with it, or broke it was importing useStore from zustand…

At that point I realized it wasn’t so much a component issue. But something introduced by Zustand.

I checked the release note of the latest version and it says:

#507 fix(build): Improved ESM support for most used bundlers with fallbacks for older bundlers

And suddenly it all makes sense. I’m no expert in bundlers, but this “improved ESM support” to zustand must have caused a change in how next.js handles my files, and broken not just the zustand useStore I have, but also created circular dependencies issues.

It definitely does not seem to be compatible with 3.5.7 for me.

My next.config.js file is pretty simple:

const withAntdLess = require('next-plugin-antd-less')
const { withPlausibleProxy } = require('next-plausible')

module.exports = withPlausibleProxy()(
  withAntdLess({
    modifyVars: { '@primary-color': '#3366ff' },
    lessVarsFilePathAppendToEndOfContent: false,
    cssLoaderOptions: {},

    webpack(config) {
      return config
    },
  })
)

And here is my .babelrc

module.exports = {
  presets: [['next/babel']],
  plugins: [['import', { libraryName: 'antd', style: true }]],
}

I’m using "next": "11.1.0", with webpack 5 enabled.

I hope you can help figure out either what went wrong with Zustand in this patch update. Or if I need to make some changes to my project to support future versions of zustand. (I love this state management library, it’s amazing!)

For now the only change I made to get it to work again was downgrading to 3.5.7

[barelyhuman]

@MarkLyck could you try using the below version and confirm that it works?

yarn add https://pkg.csb.dev/barelyhuman/zustand/commit/76d40ffb/zustand
npm i https://pkg.csb.dev/barelyhuman/zustand/commit/76d40ffb/zustand

@dai-shi https://github.com/barelyhuman/zustand/pull/4 for you to refer the change that was made

[barelyhuman]

@MarkLyck that works, I’ll update you with the needed fix in a bit