[plugin-react-refresh] Cannot read properties of undefined (reading 'jotaiAtomCache')

[danielkv]

I'm getting this error when I try to use the plugin jotai/babel/plugin-react-refresh. I migrated recently from CRACO to vite and I've been using Jotai for a while now. Does anyone also have this problem?

vite.config.ts

/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable @typescript-eslint/ban-ts-comment */
/// <reference types="vitest" />
import { defineConfig, loadEnv, PluginOption } from 'vite';

import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import path from 'path';
import svgr from '@svgr/rollup';

import jotaiDebugLabel from 'jotai/babel/plugin-debug-label';
import jotaiReactRefresh from 'jotai/babel/plugin-react-refresh';

const resolveFixup = {
  name: 'resolve-fixup',
  // @ts-ignore
  setup(build) {
    build.onResolve({ filter: /react-virtualized/ }, async () => {
      return {
        path: path.resolve('./node_modules/react-virtualized/dist/umd/react-virtualized.js'),
      };
    });
  },
};

function I18nHotReload(): PluginOption {
  return {
    name: 'i18n-hot-reload',
    handleHotUpdate({ file, server }) {
      if (file.includes('locales') && file.endsWith('.json')) {
        // eslint-disable-next-line no-console
        console.log('Locale file updated');
        server.ws.send({
          type: 'custom',
          event: 'locales-update',
        });
      }
    },
  };
}

// @ts-expect-error
export default defineConfig(({ mode }) => {
  const envs = { ...process.env, ...loadEnv(mode, process.cwd(), ['']) };

  return {
    server: {
      port: (envs.PORT || 3000) as number,
    },
    define: {
      'process.env': envs,
    },
    root: './',
    base: '/',
    build: {
      outDir: 'build',
    },
    publicDir: 'public',
    plugins: [
      react({ babel: { plugins: ['jotai/babel/plugin-react-refresh'] } }),
      tsconfigPaths(),
      svgr({
        include: '**/*.svg',
        exportType: 'named',
        ref: true,
        svgo: false,
        titleProp: true,
      }),
      I18nHotReload(),
    ],
    optimizeDeps: {
      needsInterop: ['react-virtualized-auto-sizer', 'react-virtualized'],
      esbuildOptions: {
        plugins: [resolveFixup],
      },
    },
    test: {
      setupFiles: './vitest.setup.ts',
      environment: 'jsdom',
      include: ['src/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
    },
  };
});

This is where it errors out (it's file from my repo):

globalThis.jotaiAtomCache = globalThis.jotaiAtomCache || {
    cache: new Map(),
    get(name, inst) {
        if (this.cache.has(name)) {
            return this.cache.get(name);
        }
        this.cache.set(name, inst);
        return inst;
    }
};

[...]

BTW, the code above is injected by the jotai plugin.

I can't really share more than this, it's the code from my company`s repository. For now I don't have any reproducible example, for now I'm just wondering if anyone else have something similar.

[dai-shi]

Thanks for reporting.
So, does that mean that globalThis is undefined?

[danielkv]

I'm sorry for the delay. Yes! it's undefined.

[dai-shi]

I wonder if there's a general solution for undefined globalThis with some Vite config.

[danielkv]

The problem happens only when the code is injected, I'm wondering if it's not the vite plugin that is missing something

[dai-shi]

Yeah, we may need someone who is more familiar with vite to help us.
The thing is that we've never heard this issue before from people using vite.