Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: vite plugin assets order #328

Merged
merged 2 commits into from
Jul 10, 2024

Conversation

edivados
Copy link
Contributor

@edivados edivados commented Jul 9, 2024

Assets order returned by dev-server-manifest is not correct. This causes vite:react-refresh preamble script to be inserted after the client runtime. Causing an occasional error. closes #272

Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201
    at app.tsx:33:5

Before sort

[  
  {
    name: 'vite:react-refresh',
    enforce: 'pre',
    config: [Function: config],
    resolveId: [Function: resolveId],
    load: [Function: load],
    transformIndexHtml: [Function: transformIndexHtml]
  },
  {
    name: 'vinxi:inject-client-runtime',
    configResolved: [Function: configResolved],
    apply: 'serve',
    transformIndexHtml: [Function: transformIndexHtml]
  },
]

After sort

[
  {
    name: 'vinxi:inject-client-runtime',
    configResolved: [Function: configResolved],
    apply: 'serve',
    transformIndexHtml: [Function: transformIndexHtml]
  },
  {
    name: 'vite:react-refresh',
    enforce: 'pre',
    config: [Function: config],
    resolveId: [Function: resolveId],
    load: [Function: load],
    transformIndexHtml: [Function: transformIndexHtml]
  }
]

Reproduction

  1. pnpm -F react-ssr-basic dev
  2. Open in Firefox (Chrome works too but you need to refresh a lot of times to see the error occasionaly)
  3. Refresh Browser
  4. Counter doesn't work and the error mentioned above is shown on the console

Solution

Don't sort the plugins taken from the vite server config. Looking at Vite's implementation they should already be filtered and sorted. Correction: Vinxi currently sorts on the hook's order but the result is wrong.

Use Vite's sorting logic to ensure things are in the right order.

Copy link

codesandbox bot commented Jul 9, 2024

Review or Edit in CodeSandbox

Open the branch in Web EditorVS CodeInsiders

Open Preview

Copy link

changeset-bot bot commented Jul 9, 2024

🦋 Changeset detected

Latest commit: ce9c269

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
vinxi Patch
@vinxi/router Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

vercel bot commented Jul 9, 2024

@edivados is attempting to deploy a commit to the Nikhil Saraf's projects Team on Vercel.

A member of the Team first needs to authorize it.

@edivados edivados marked this pull request as draft July 10, 2024 07:58
@edivados
Copy link
Contributor Author

@edivados edivados force-pushed the fix-vite-plugin-assets-order branch 2 times, most recently from ac803ae to 576c157 Compare July 10, 2024 12:16
@edivados edivados force-pushed the fix-vite-plugin-assets-order branch from 576c157 to 6f0cd4d Compare July 10, 2024 12:21
@edivados edivados marked this pull request as ready for review July 10, 2024 16:09
@ryansolid ryansolid merged commit a6a3ed8 into nksaraf:main Jul 10, 2024
5 of 6 checks passed
@ryansolid
Copy link
Collaborator

Thank you

@edivados edivados deleted the fix-vite-plugin-assets-order branch July 10, 2024 20:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Dev server with hot module reload is flaky in Firefox
2 participants