The devtool is not working in Next.js 14 App router. #125

huraim · 2024-02-23T03:48:06Z

huraim
Feb 23, 2024

Hello,
I'm trying to install devtools in the Next.js 14 app router, but although the UI is displayed properly, when I try to open the devtools, I encounter the following error. What could be the issue?

Uh-oh, something went wrong.
If you believe this to be a bug, please file an issue on [Jotai DevTool's GitHub repo](https://github.com/jotaijs/jotai-devtools/issues) with a minimal reproduction and the following error

TypeError: values.map is not a function
    at ErrorFallback (webpack-internal:///(app-pages-browser)/./node_modules/jotai-devtools/dist/chunk-O6NZVQU4.esm.mjs:8273:204)
    at renderWithHooksAgain (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:9869:28)
    at renderWithHooks (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:9756:32)
    at updateFunctionComponent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:14159:32)
    at beginWork$1 (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:15948:32)

/* next,confing.mjs */

const nextConfig = {
  transpilePackages: ["jotai-devtools"],
  experimental: {
    swcPlugins: [
      ["@swc-jotai/debug-label", {}],
      ["@swc-jotai/react-refresh", {}],
    ],
  },
};

/* layout.tsx */
import JotaiDevtool from "../_components/jotai-devtool";
...
return (
<html lang="en">
  <body>
    <Provider>
      <JotaiDevtool />
      {children}
    </Provider>
  </body>
</html>
)

/* jotai-devtool.tsx */
"use client";

import { DevTools } from "jotai-devtools";

export default function JotaiDevtool() {
  return <DevTools theme="dark" />;
}

arjunvegda · 2024-02-24T15:45:31Z

arjunvegda
Feb 24, 2024
Maintainer

That's strange! I can take a look at it. Could you please create a repro on CodeSandbox?

5 replies

huraim Feb 25, 2024
Author

Please take a look and let me know if I've done something wrong.
Here is the address for CodeSandbox.
CodeSandbox-NextJS14.1-AppRouter-JotaiDevtool

arjunvegda Feb 25, 2024
Maintainer

Thank you! CSB is breaking for me, its not able to find useAtomValue from jotai/react which is strange. I'll take a deep look later.

mnpqraven Feb 25, 2024

I think nextJS 14.1 is also breaking other stuffs for jotai. atomWithStorage also doesn't seem to work properly, I'll try to reproduce it and if successful will cut an issue on the jotai repo

mnpqraven Feb 26, 2024

I have created an issue and provided the reproduction project in #127

arjunvegda Feb 26, 2024
Maintainer

Thanks @mnpqraven — @huraim, let's continue our discussion there #127 (comment)

mnpqraven · 2024-02-24T20:01:56Z

mnpqraven
Feb 24, 2024

I have the same problem with ^14.1 while my other project running 14.0.2 still works so I'd recommend downgrading to 14.0 for now

1 reply

huraim Feb 25, 2024
Author

Oh... Looks like there might be a problem with version 14.1... Thank you for your response. I'll keep it in mind

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

The devtool is not working in Next.js 14 App router. #125

{{title}}

Replies: 2 comments 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

The devtool is not working in Next.js 14 App router. #125

huraim Feb 23, 2024

Replies: 2 comments · 6 replies

arjunvegda Feb 24, 2024 Maintainer

huraim Feb 25, 2024 Author

arjunvegda Feb 25, 2024 Maintainer

mnpqraven Feb 25, 2024

mnpqraven Feb 26, 2024

arjunvegda Feb 26, 2024 Maintainer

mnpqraven Feb 24, 2024

huraim Feb 25, 2024 Author

huraim
Feb 23, 2024

Replies: 2 comments 6 replies

arjunvegda
Feb 24, 2024
Maintainer

huraim Feb 25, 2024
Author

arjunvegda Feb 25, 2024
Maintainer

arjunvegda Feb 26, 2024
Maintainer

mnpqraven
Feb 24, 2024

huraim Feb 25, 2024
Author