react-compiler-runtime with vite

[zeroliu]

Hi all 👋 . I just saw the beta announcement and am super excited about it. I want to try the new compiler runtime since we are on React 18.2. I'm running into issues when starting the vite dev server. I verified that react-compiler-runtime is installed as a direct dependency "react-compiler-runtime": "^19.0.0-beta-6fc168f-20241025",

[0]  ERROR  error when starting dev server:
[0] Error: Missing "./compiler-runtime" specifier in "react" package
[0]     at e (file:///Users/zeroliu/Developer/lumos2/frontend/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:45945:25)
[0]     at n (file:///Users/zeroliu/Developer/lumos2/frontend/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:45945:627)
[0]     at o (file:///Users/zeroliu/Developer/lumos2/frontend/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:45945:1297)
[0]     at resolveExportsOrImports (file:///Users/zeroliu/Developer/lumos2/frontend/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:46566:18)
[0]     at resolveDeepImport (file:///Users/zeroliu/Developer/lumos2/frontend/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:46589:25)
[0]     at tryNodeResolve (file:///Users/zeroliu/Developer/lumos2/frontend/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:46354:16)
[0]     at ResolveIdContext.resolveId (file:///Users/zeroliu/Developer/lumos2/frontend/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:46104:19)
[0]     at PluginContainer.resolveId (file:///Users/zeroliu/Developer/lumos2/frontend/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:48919:17)
[0]     at async file:///Users/zeroliu/Developer/lumos2/frontend/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:66154:15
[0]     at async file:///Users/zeroliu/Developer/lumos2/frontend/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:49824:14

Here's my vite config:

import react from '@vitejs/plugin-react'

import { defineConfig, createLogger } from 'vite'

const ReactCompilerConfig = {
  target: '18',
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],
      },
    }),
  ],
})

Can someone please help me understand what I might be missing? Thanks!

[zeroliu]

Ran into the same issue with the official demo: https://github.com/facebook/react/blob/main/compiler/fixtures/runtime-compat/app-18

[poteto]

Yeah the demo app was originally broken which is why I opened a PR upstream to fix. It should've been released in 4.3.3, could you try checking what version you're on?

[zeroliu]

Thanks Lauren! That's exact it! I was on 4.3.2. So glad to see the memo badge in my component tree

[poteto]

Awesome, thanks for confirming!