Theme Ui on Hydrogen and theme-ui/jsx-runtime

Technical Q&A
1

Hi! I’m trying to implement a Hydrogen store with Theme UI instead of Tailwind. But I have an error like :

Cannot find module 'theme-ui/jsx-runtime' or its corresponding type declarations.

Types for theme-ui were installed.
Vite config here :

export default defineConfig({
  plugins: [hydrogen()],
  resolve: {
    alias: [{find: /^~\/(.*)/, replacement: '/src/$1'}],
  },
  optimizeDeps: {
    include: ['@headlessui/react', 'clsx', 'react-use', 'typographic-base'],
  },
  test: {
    globals: true,
    testTimeout: 10000,
    hookTimeout: 10000,
  },
  esbuild: {
    jsxFactory: 'jsx',
    jsxInject: `import { jsx } from 'theme-ui'`,
  },
});

Here is ts config:

{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "moduleResolution": "node16",
    "lib": ["dom", "dom.iterable", "scripthost", "es2020"],
    "jsx": "react-jsx",
    "types": ["vite/client", "vitest/globals", "theme-ui", "node"],
    "strict": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "jsxImportSource": "theme-ui",
    "noEmit": true,
    "allowJs": true,
    "checkJs": false,
    "paths": {
      "~/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "dist"],
  "include": ["**/*.ts", "**/*.tsx"],
  "jsx": "react",
}

Is there something else that should be added?