"vite-plugin-react can't detect preamble. Something is wrong." when using styled-components

Describe the bug

When I’m rendering a styled component, I get the following error: “Uncaught Error: vite-plugin-react can’t detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201”

Reproduction

When creating a new project I don’t run into this problem. However, I’m trying to integrate vite into my existing project. Everything seems to work fine, but when I render a styled-component it crashes.

System Info

• vite version: “^2.0.0-beta.65”
• Operating System: macOS Big Sur
• Node version: v14.15.5
• Package manager (npm/yarn/pnpm) and version: npm 6.14.11

Logs (Optional if provided reproduction)

vite:cache [304] /@vite/client +0ms vite:time 1ms /@vite/client +25s vite:load 7ms [fs] /assets/js/website.tsx +25s vite:transform 22ms /assets/js/website.tsx +25s vite:time 33ms /assets/js/website.tsx +33ms vite:hmr [file change] var/cache/dev/profiler/index.csv +106ms vite:hmr [no modules matched] var/cache/dev/profiler/index.csv +1ms vite:hmr [file change] var/log/dev.log +0ms vite:hmr [no modules matched] var/log/dev.log +0ms vite:cache [304] /node_modules/vite/dist/client/env.js +172ms vite:time 1ms /node_modules/vite/dist/client/env.js +139ms vite:hmr [file change] var/cache/dev/profiler/index.csv +145ms vite:hmr [no modules matched] var/cache/dev/profiler/index.csv +1ms vite:cache [304] vite/dynamic-import-polyfill +15ms vite:time 1ms /@id/vite/dynamic-import-polyfill +16ms vite:load 2ms [fs] /assets/js/components/dashboard/Dashboard.tsx +181ms vite:hmr [self-accepts] assets/js/components/dashboard/Dashboard.tsx +24ms vite:transform 20ms /assets/js/components/dashboard/Dashboard.tsx +178ms vite:time 23ms /assets/js/components/dashboard/Dashboard.tsx +23ms vite:cache [304] /@react-refresh +29ms vite:time 0ms /@react-refresh +5ms vite:hmr [file change] var/cache/dev/profiler/index.csv +76ms vite:hmr [no modules matched] var/cache/dev/profiler/index.csv +0ms vite:hmr [file change] var/log/dev.log +0ms vite:hmr [no modules matched] var/log/dev.log +0ms vite:time 1ms /node_modules/.vite/chunk.IXVMP6XR.js.map +103ms vite:time 1ms /node_modules/.vite/chunk.IXVMP6XR.js.map +60ms vite:hmr [file change] var/log/dev.log +320ms vite:hmr [no modules matched] var/log/dev.log +0m

[sebastiandedeyne]

Thanks. That fixes it! However, I’m getting a different error now: “Uncaught ReferenceError: global is not defined”. Is there some sort of setup I’m missing?

Declaring a global var before the scripts solved this for me.

<script>var global = window</script>

[RichardWeug]

Thanks. That fixes it! However, I’m getting a different error now: “Uncaught ReferenceError: global is not defined”. Is there some sort of setup I’m missing?