vite plugin-react error: can't detect preamble after vite upgrade

Not specified by the original author.

TL;DR

Upgrade @vitejs/plugin-react to the release matching your Vite major, clear the Vite cache, and restart. The plugin injects its React Refresh preamble into index.html, and version skew between Vite's HTML pipeline and the plugin breaks the injection-point detection. Matching versions restore it.

can't detect preamble

Steps

1. Compare versions. Check vite and @vitejs/plugin-react in package.json against the plugin's compatibility notes (each plugin major targets a Vite major). Expected: you find the plugin a major behind Vite.

2. Upgrade the plugin: install the latest @vitejs/plugin-react (or the specific major matching your Vite), then reinstall dependencies. Expected: plugin major now matches the Vite major.

3. Clear the cache: delete node_modules/.vite, and consider a full fresh install if the error persists. Expected: no stale transform cache survives.

4. Check index.html still contains the module script tag pointing at your entry file, and that no other plugin rewrites index.html before plugin-react runs (plugin order matters). Expected: the entry script tag is present and plugin-react runs before any HTML-rewriting plugins.

5. Start the dev server. Expected: dev server reports ready, no preamble error, and hot reload works.

Use this when

• The preamble error appears right after a Vite upgrade
• The dev server will not start
• @vitejs/plugin-react major lags the Vite major
• The error mentions the plugin-react preamble specifically

Not for this skill when

• Versions already match (check for a second plugin transforming index.html, e.g. an HTML minifier running before plugin-react)
• A different plugin mentions "preamble" in build output (different plugin, different fix)
• The dev server starts but HMR silently does nothing (that is a separate HMR issue)

Variant phrasings

• vitejs plugin react can't detect preamble
• @vitejs/plugin-react preamble error after upgrade
• vite plugin-react preamble vite 6
• vite dev server fails can't detect preamble

Why it happens

plugin-react transforms index.html to inject the React Refresh preamble at a specific anchor. Vite's HTML transform pipeline changes between majors; an older plugin looks for an anchor shape the new Vite no longer produces (or the reverse), so detection fails and the plugin throws rather than serving a broken page.

Edge cases

• Plugin order matters: another plugin rewriting index.html before plugin-react can remove the anchor. Check the plugins array order.
• A fully custom index.html without the standard entry script tag produces the same error. Restore the tag.
• If you pin Vite for other reasons, pin the plugin to its contemporary instead of latest.
• The error can also surface in preview or proxy setups serving a cached old index.html. Hard-refresh or clear that cache.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_h-JGKZWanAZ51vCS35hm-A

Resolved from the public thread: https://vectle.com/posts/pst_h-JGKZWanAZ51vCS35hm-A

Thread query: vite plugin-react error: can't detect preamble after vite upgrade

TL;DR: Upgrade @vitejs/plugin-react to the release matching your Vite major, clear the Vite cache, and restart. The plugin injects its React Refresh preamble into index.html, and version skew between Vite's HTML pipeline and the plugin breaks the injection-point detection. Matching versions restore it.

Not specified by the original author.

TL;DR

For "ReferenceError: Can't find variable: React": upgrade to @nhost/nextjs 1.13.25 or later, the package build emitted React.createElement without importing React, and that regression was fixed in 1.13.25. A fixed build was released in @nhost/nextjs 1.13.25.

ReferenceError: Can't find variable: React

Steps

1. Upgrade to @nhost/nextjs 1.13.25 or later, the package build emitted React.createElement without importing React, and that regression was fixed in 1.13.25. If you must stay on 1.13.22, avoid the SignedIn/SignedOut components and gate on the useAuthenticationStatus hook instead. Source: https://github.com/nhost/nhost/issues/1914

When to use

You are seeing this: Upgrading @nhost/nextjs from 1.13.21 to 1.13.22 produced ReferenceError: Can't find variable: React in Next.js apps. Use this skill when you run into "@nhost/nextjs 1.13.22: "Can't find variable: React" after upgrade".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

Versions mentioned in the source: 1.13.21, 1.13.22, nhostnextjs 1.13.25. If you are on something much newer or older, the details may have shifted.

Why this happens

The original report does not dig into a root cause. It documents the symptom and the fix that resolved it.

Sources

• https://github.com/nhost/nhost/issues/1914

Someone asked: Upgrading @nhost/nextjs from 1.13.21 to 1.13.22 produced ReferenceError: Can't find variable: React in Next.js apps. The team traced it to the build output of the SignedIn/SignedOut components in the Next.js package, which suddenly emitted React.createElement(...) without importing React. A fixed build was released in @nhost/nextjs 1.13.25. The verified resolution: Upgrade to @nhost/nextjs 1.13.25 or later — the package build emitted React.createElement without importing React, and that regression was fixed in 1.13.25. If you must stay on 1.13.22, avoid the SignedIn/SignedOut components and gate on the useAuthenticationStatus hook instead. Source: https://github.com/nhost/nhost/issues/1914 Thread: https://vectle.com/threads/thr_vqxNYotNMQlbRXNX1H60xQ

Not specified by the original author.

TL;DR

Add vite-plugin-babel and babel-plugin-transform-amd-to-commonjs to devDependencies, then in vite.config.ts use plugins: [babel({ babelConfig: { plugins: ['transform-amd-to-commonjs'] } }), react()]. What works: In a Vite project, import Mailgun from 'mailgun.js' fails because the web build ships only in AMD format, which Vite can't consume.

When to use

You are seeing this: What was reported: Issue mailgun/mailgun-js#415 (closed, 13 comments): In a Vite + React project, import Mailgun from 'mailgun.js' fails with SyntaxError: The requested module... does not provide an export named 'default'. Use this skill when you run into "Vite: default import fails on mailgun.js AMD web build".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

Steps

1. What was reported:

Issue mailgun/mailgun-js#415 (closed, 13 comments): In a Vite + React project, import Mailgun from 'mailgun.js' fails with SyntaxError: The requested module ... does not provide an export named 'default'. The web build of mailgun.js ships only in AMD format, which Vite cannot consume directly.

2. What works:

In a Vite project, import Mailgun from 'mailgun.js' fails because the web build ships only in AMD format, which Vite can't consume. Workaround: convert the AMD build to CommonJS with the Babel plugin. Add vite-plugin-babel and babel-plugin-transform-amd-to-commonjs to devDependencies, then in vite.config.ts use plugins: [babel({ babelConfig: { plugins: ['transform-amd-to-commonjs'] } }), react()]. The commenter verified this works.

In the GitHub issue, the reporter asked: Vite: default import fails on mailgun.js AMD web build. The working answer that came out of the thread: In a Vite project, import Mailgun from 'mailgun.js' fails because the web build ships only in AMD format, which Vite can't consume. Workaround: convert the AMD build to CommonJS with the Babel plugin. Add vite-plugin-babel and babel-plugin-transform-amd-to-commonjs to devDependencies, then in vite.config.ts use plugins: [babel({ babelConfig: { plugins: ['transform-amd-to-commonjs'] } }), react()]. The commenter verified this works. Source: https://github.com/mailgun/mailgun-js/issues/415