No atoms found when lazy loading

[min-ben]

I have this pattern I use for DevTools extensions - I load based on environment variables (which i validate with zod). I've noticed that when I do this, the extension loads file, but I get no atoms. As soon as I move it out of the lazy, I can see it does work and find all atoms

import React, { Suspense } from "react";
import { env } from "#env.ts";
import { jotaiStore } from "#store/atoms/jotaiStore.ts";

const LazyDevTools =
  import.meta.env.PROD || !env.enableJotaiDevtools
    ? () => null
    : React.lazy(() =>
        Promise.all([
          import("jotai-devtools"),
          import("jotai-devtools/styles.css?inline"),
        ]).then(([{ DevTools }, jotaiCss]) => ({
          default: () => {
            return (
              <>
                <style>{jotaiCss.default}</style>
                <DevTools
                  store={jotaiStore}
                  position="bottom-right"
                  theme="dark"
                  options={{
                    // It defaults to infinity which will cause the extension to crash when storing a lot of data
                    snapshotHistoryLimit: 30,
                  }}
                />
              </>
            );
          },
        })),
      );

export const JotaiDevTools = () => (
  <Suspense fallback={null}>
    <LazyDevTools store={jotaiStore} />
  </Suspense>
);

[igas89]

Now you need to import jotai-devtools before executing createStore

// store.tsx
export const JotaiDevtools: FC<DevToolsProps> = (props) => {
  useLayoutEffect(() => {
    import('jotai-devtools/styles.css' as const);
  }, []);

  return <DevTools {...props} />;
};

export const store = createStore();

// StoreProvider.tsx
render env.enableJotaiDevtools && <JotaiDevtools />

[min-ben]

@igas89, createStore still runs first in your code before the import. Unless you're missing an import line at top of your code? There is no benefit in lazy loading only css files.

But now I see, i need to import jotai-devtools first. This isn't great since now I'm installing and importing it in production (or once that is fixed/supported, Id be doing that. Unless i want to defer createStore later, making the usage of store more painful.

So I can't actually do lazy loading?

import { createStore } from "jotai";
import { DevTools } from "jotai-devtools";
import "jotai-devtools/styles.css";
import { env } from "#env.ts";

// jotai-devtools must be imported before createStore is called
export const jotaiStore = createStore();

export const JotaiDevTools = ({ store }: { store: typeof jotaiStore }) => {
  if (import.meta.env.PROD || !env.enableJotaiDevtools) {
    return null;
  }

  return (
    <DevTools
      store={store}
      position="bottom-right"
      theme="dark"
      options={{
        snapshotHistoryLimit: 30,
      }}
    />
  );
};

[min-ben]

So will reopen because I think lazy loading is not supported

[planttheidea]

Thanks for this, I just discovered this same issue myself. Considering the focus on tree-shaking (both in the README and in console warnings), it seems like a gap that such a convenient mechanism to perform it is not supported.