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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
sebastiandedeynecommented, Mar 16, 2021

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>
1reaction
RichardWeugcommented, Feb 12, 2021

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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Vite js yarn build command fails with styled components in ssg ...
Description. When running yarn build. with babel-plugin-styled-components it fails with error: [vite-plugin-ssr:autoFullBuild] Cannot read ...
Read more >
How To Use React Styled Components Efficiently - Copycat
Learn how to set up organized React styled components in your project through examples, comprehensive explanations, and tips and tricks!
Read more >
Create a React component library with Vite and Typescript
First, we have to install a vite plugin to help us generate the type definitions for our components. yarn add --dev vite-plugin-dts.
Read more >
styled-components ? getting started - freeCodeCamp
We're going to style the basic create react app with styled-components to look something like this: But first, preamble✨: I have always ...
Read more >
Why I moved from Styled Components to (S)CSS modules
Styled Components is a radical, new way of writing CSS for your React components. ... Something was going wrong with Vite's plugin running....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found