Zustand/middleware - devtools - NextJS 13 w/ Turbopack Error: "Cannot use 'import.meta' outside a module"

[JStuve]

With the announcement at NextJS Conf, I was eager to try out the speeds of Turbopack. I installed and setup the most basic state for Zustand and was presented with the follow error that's specific to 'zustand/middleware' devtools integration:

\\?\..\.next\server\pages\renderer\home\chunks\node_modules_zustand_8c2e96.js:430
            extensionConnector = (enabled != null ? enabled : (import.meta.env && import.meta.env.MODE) !== "production") && window.__REDUX_DEVTOOLS_EXTENSION__;
                                                                      ^^^^

SyntaxError: Cannot use 'import.meta' outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (\\?\D:\Developer\home-x\.next\server\pages\renderer\home\index.js:4:1)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

It's worth noting that the error only occurs using the "Turbopack" command next dev --turbo.

[dai-shi]

Thanks for reporting! Hm, it uses cjs/loader, but picks "esm". I wonder if they use "module" condition or "import" condition, but maybe we shouldn't use import.meta for "module" condition.

[dai-shi]

Can you try this? https://ci.codesandbox.io/status/pmndrs/zustand/pr/1393 See "Local Install Instruction" ☝️

[JStuve]

Tested with and without Turbopack, works great! Thanks for fix!

[crazyxhz]

Thanks for reporting! Hm, it uses cjs/loader, but picks "esm". I wonder if they use "module" condition or "import" condition, but maybe we shouldn't use import.meta for "module" condition.

get the same error on rspack

[dai-shi]

It happens when when a bundler picks "import" condition, but it doesn't let browsers to load as ESM.

In Jotai, we discuss about possible migration paths until all bundlers support ESM fully.

FYI,

maybe we shouldn't use import.meta for "module" condition.

We no longer use import.meta for "module".

[crazyxhz]

It happens when when a bundler picks "import" condition, but it doesn't let browsers to load as ESM.

In Jotai, we discuss about possible migration paths until all bundlers support ESM fully.

FYI,

maybe we shouldn't use import.meta for "module" condition.

We no longer use import.meta for "module".

I'm using the latest zustand, still getting this error. Is there some kind of webpack configuration to bypass this issue?

[dai-shi]

check these:

• https://webpack.js.org/guides/package-exports/
• https://webpack.js.org/configuration/resolve/#resolveconditionnames

module.exports = {
  //...
  resolve: {
    conditionNames: ['module'],
  },
};