`@compiled/react` compatibility issues with Vite

[bienzaaron]

Describe the bug Not sure if this is necessarily a bug with @compiled/react or if it's an issue with the way Vite pre-bundled dependencies, but I'm seeing my React app failing to render and logging the following console error when attempting to use @compiled/react and @compiled/babel-plugin with Vite:

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@compiled_react_jsx-dev-runtime.js?v=e03c1b82' does not provide an export named 'jsxDEV' (at main.jsx:2:1)

I think it has something to do with the way things are re-exported from react/jsx-dev-runtime (wildcard export), because if I swap out @compiled/react with @emotion/react, everything works as expected - I believe because they explicitly export jsxDEV.

I've tried excluding @compiled/react from vite's pre-bundling as well without success.

To Reproduce Steps to reproduce the behavior: See console error: https://stackblitz.com/edit/vitejs-vite-1z9eeu?file=package.json,vite.config.js,index.html,src%2Fmain.jsx

Expected behavior React app should render and apply styles appropriately.

Desktop:

• OS: [e.g. iOS] MacOS 11.6.6
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] 101

[vidarc]

At least for me, I was able to resolve this by removing the jsxPragma I had specified at the top of my components using compiled and added a "jsxImportSource": "@compiled/react", to my tsconfig

tsconfig:

{
  "extends": "@tsconfig/vite-react/tsconfig.json",
  "include": ["src"],
  "compilerOptions": {
    "baseUrl": "./src/client",
    "jsx": "react-jsx",
    "jsxImportSource": "@compiled/react",
    "skipLibCheck": true
  }
}

vite.config.js

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  root: 'src',
  build: {
    outDir: '../dist/client',
    emptyOutDir: true,
  },
  plugins: [
    react({
      babel: {
        plugins: ['@compiled/babel-plugin'],
      },
    }),
  ],
});

[bienzaaron]

Things seem to work with the latest version of vite, @vitejs/plugin-react, @compiled/react, and @compiled/babel-plugin now 🎉 Didn't take the time to figure out which upgrade fixed things.

I did have to add the following to my vite config:

optimizeDeps: {
  exclude: ["@compiled/react/jsx-dev-runtime"],
},

updated example: https://stackblitz.com/edit/vitejs-vite-bzhsrz