Production build using @swc/plugin-emotion produces "ReferenceError: React is not defined" in 3.1.0

[jacobcarpenter]

Possibly related to #50

I have an app that uses theme-ui/core to enable an sx prop for css-in-js component styling; this requires configuring a jsxImportSource.

Theme UI delegates to Emotion for the actual css generation and injection. Emotion highly recommends configuring a plugin for some build-time optimizations to the generated css. I'm using the "official swc plugin"—which, sadly doesn't seem to be mentioned in the core babel-plugin docs anywhere.

Here is my complete vite.config.js:

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        react({
            jsxImportSource: '@theme-ui/core',
            plugins: [['@swc/plugin-emotion', {}]],
        }),
    ],
    base: '/not-relevant',
});

With @vitejs/plugin-react-swc @ 3.0.1, the build output looked like the following and resulted in a functional react app:

» yarn build  
yarn run v1.22.19
$ vite build
vite v4.1.1 building for production...
✓ 75 modules transformed.
dist/index.html                           0.46 kB
dist/assets/index-05d9906c.css            1.00 kB │ gzip:  0.54 kB
dist/assets/server.browser-eeae90bd.js   70.62 kB │ gzip: 22.80 kB
dist/assets/index-e441a4c7.js           174.79 kB │ gzip: 57.03 kB
✨  Done in 1.71s.

After upgrading to 3.1.0 without modifying the config, the build output now looks like:

» yarn build
yarn run v1.22.19
$ vite build
vite v4.1.1 building for production...
✓ 39 modules transformed.
dist/index.html                           0.46 kB
dist/assets/index-05d9906c.css            1.00 kB │ gzip:  0.54 kB
dist/assets/server.browser-ecc0b40e.js   70.62 kB │ gzip: 22.80 kB
dist/assets/index-55ec4c4f.js           150.29 kB │ gzip: 48.43 kB
✨  Done in 1.53s.

Note some pretty dramatic differences in "# of modules transformed" and the bundle size for dist/assets/index.

The built site, when run under yarn preview produces a script error: ReferenceError: React is not defined.

---

If I comment out plugins: [['@swc/plugin-emotion', {}]], the build output stats are closer to the 3.0.1 version, and it produces a functional build:

» yarn build
yarn run v1.22.19
$ vite build
vite v4.1.1 building for production...
✓ 75 modules transformed.
dist/index.html                           0.47 kB
dist/assets/index-05d9906c.css            1.00 kB │ gzip:  0.54 kB
dist/assets/server.browser-615c286e.js   70.62 kB │ gzip: 22.80 kB
dist/assets/index-759bb9e3.js           174.79 kB │ gzip: 57.04 kB
✨  Done in 1.92s.

[ArnaudBarre]

Hi!

Can you provide a small repo?

I tried a small one: https://github.com/vitejs/vite-plugin-react-swc/blob/emotion-plugin/playground/emotion-plugin/src/App.tsx#L6-L9, it works in dev and prod.

The build jumped from 174kb to around 181kb when I added the Theme provider.

[jacobcarpenter]

Sure thing @ArnaudBarre! Here you go: https://github.com/jacobcarpenter/swc-plugin-error

There are two branches: main and working-in-3.0.1.

To see the error:

1) clone and checkout main 2) yarn 3) yarn build then yarn preview ... you should see an empty page and the message ReferenceError: React is not defined in the console

Contrast with yarn dev which works.

To see that the error is new to 3.1.0:

1) checkout working-in-3.0.1 2) yarn (you must install the version rollback after switching branches) 3) yarn build then yarn preview ... the page should work.

[ArnaudBarre]

Fixed in v3.2!