Vite ignoring external files during Pre-transform

[Hecatron]

Describe the bug

Hi,
I've recently tried setting up storybook with the latest vite / vue template.
But it seems to be ignoring the build / rollupOptions / external setting during the pre-transform stage

Reproduction

As below

Steps to reproduce

# Create basic vite / vue template
npm create vue@latest
npm install
# Setup storybook
npx storybook@latest init
# update everything to latest version
npm-check-updates -i

# run storybook
npm run storybook

This results in vue trying to pick up on /sb-preview/runtime.js

Pre-transform error: Failed to load url /sb-preview/runtime.js (resolved id: /sb-preview/runtime.js). Does the file exist?

Things do work so it's something that can be ignored, but it looks as if the Pre-transform stage is ignoring the config

  build: {
    rollupOptions: {
      external: ['./sb-preview/runtime.js'],
    }
  }

Storybook normally merges this in, but I've also tried adding it manually
with './sb-preview/runtime.js' and '/sb-preview/runtime.js'
but the same result

This might be related to
#11048

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 32.65 GB / 47.68 GB
  Binaries:
    Node: 20.8.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.12.1 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Edge: Spartan (44.19041.3570.0), Chromium (120.0.2210.77)
    Internet Explorer: 11.0.19041.3570
  npmPackages:
    @vitejs/plugin-vue: ^4.5.2 => 4.5.2
    @vitejs/plugin-vue-jsx: ^3.1.0 => 3.1.0
    vite: ^5.0.10 => 5.0.10

### Used Package Manager

npm

### Logs

_No response_

### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitejs/vite/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vitejs.dev/guide).
- [X] Check that there isn't [already an issue](https://github.com/vitejs/vite/issues) that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to [vuejs/core](https://github.com/vuejs/core) instead.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitejs/vite/discussions) or join our [Discord Chat Server](https://chat.vitejs.dev/).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

[Hecatron]

I think this might be related to the new server.warmup feature in vite 5
I tried optimizeDeps.exclude but that didn't seem to work

[XiSenao]

The upper-layer application of Vite automatically handles built-in requests. For Vite, the pre-transform phase is not perceptible. I think Vite may need to expose an interface to help the upper-layer application skip the pre-transform.

[XiSenao]

For the behavior of storybook, you can hack the pre-transform behavior using assetsInclude or config.server.preTransformRequests.

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

// https://vitejs.dev/config/
export default defineConfig({
  assetsInclude: ['/sb-preview/runtime.js'],
  // or
  server: {
    preTransformRequests: false
  }
})

[Hecatron]

I just tested the assetsInclude: ['/sb-preview/runtime.js'], and that does seem to work thanks

[iammary]

I just tested the assetsInclude: ['/sb-preview/runtime.js'], and that does seem to work thanks

this works for me too. thanks

[ChristopherMeek]

Neither have worked for me, the error goes away, the tree of components loads and the docs pages load. However each story on the docs page is empty and the individual story pages just show an infinite spinner. There are no console or network errors and I can see all the right files being requested (including the actual controls themselves).

A the command line I do get an error of "Pre-transform error: No ESLint configuration found in D:\sb-preview."

I'll try to put up a minimal repro

[JReinhold]

I've bisected the Vite versions and have concluded this is introduced somehow with Vite 5.0.8, as anything before that does not produce the error.

https://github.com/vitejs/vite/blob/v5.0.8/packages/vite/CHANGELOG.md#508-2023-12-12

Nothing in that changelog stands out to me though.

I can confirm that adding assetsInclude: ['/sb-preview/**'], "fixes" the issue.

For reference, /sb-preview is handled by the Express router outside of Vite by serving a static asset and Vite should completely ignore it.

https://github.com/storybookjs/storybook/blob/next/code/builders/builder-vite/src/index.ts#L73-L76

https://github.com/storybookjs/storybook/blob/next/code/builders/builder-vite/src/build.ts#L15-L18

[K-zimm]

If anyone using Nuxt 3 ends up here, add this to your Nuxt config:

vite: {
    assetsInclude: ['/sb-preview/runtime.js']
}

[ersi77]

I have added assetsInclude: ['/sb-preview/**'], into my vite.config.js but now I get this error:
[vite] Pre-transform error: No ESLint configuration found in C:\sb-preview.

Im using vite ^5.0.2
any recommendations?

[sapphi-red]

A workaround was landed on storybook side (storybookjs/storybook#25329).
For a more fundamental fix would require #6582.