jotai + vite + react: Unable to Use jotai-devtools

[takuma-watanabe]

Reproduction Steps:

1. Create a project with vite:

   npm create vite@latest client
   ✔ Select a framework: › React
   ✔ Select a variant: › TypeScript

2. Install the necessary libraries:

   npm i jotai jotai-devtools @emotion/react

3. Add <Devtools /> and start the app.

4. Nothing is displayed in the browser; the following error appears in Chrome Developer Tools console:

   Uncaught ReferenceError: process is not defined
     at node_modules/chalk/index.js (index.js:8:29)
     at __require (chunk-7HP44VBA.js?v=a2bfacf5:8:50)
     at chunk-G6BETQYW.esm.mjs:6935:26

   Expected Behavior: I want to use jotai-devtools.

Environment:

• OS: macOS Ventura 13.4
• Node: 18.17.1
• Npm: 9.6.7
• Google Chrome: 115.0.5790.170

Other Information:

package.json:

{
  "name": "client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "jotai": "^2.3.1",
    "jotai-devtools": "^0.6.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import jotaiDebugLabel from 'jotai/babel/plugin-debug-label'
import jotaiReactRefresh from 'jotai/babel/plugin-react-refresh'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({ babel: { plugins: [jotaiDebugLabel, jotaiReactRefresh] } }),
  ],
})

App.tsx:

import './App.css'
import { DevTools } from 'jotai-devtools';

function App() {
  return (
    <>
      <DevTools />
      <h1>Hello jotai Dev tool</h1>
    </>
  )
}

export default App

[takuma-watanabe]

I realize now that there is a similar topic already discussed in a separate issue. #82 I apologize for not taking the time to thoroughly read through the existing issues before creating a new one.

I will make sure to be more careful in the future and contribute to existing discussions whenever possible.