Vite: Revert: "Improve handling of preview annotations"

[JReinhold]

Reverts #28798

That PR introduced a critical problem, that causes all Svelte stories to never load in dev mode (works fine in a built Storybook).

The Preview would have an infinite loading spinner, and the console would have an error:

Uncaught SyntaxError: The requested module '/node_modules/axobject-query/lib/index.js?v=c3c74dce' does not provide an export named 'AXObjectRoles' (at a11y.js?v=c3c74dce:6:21)

I'm still not sure why this happens, nor how to fix it, so for now we just have to revert the PR.

cc @tobiasdiez

Additional Context

axobject-query is a dependency of Svelte:

yarn why -R axobject-query
└─ before-storybook@workspace:.
   └─ svelte@npm:5.22.6::__archiveUrl=https%3A%2F%2Fregistry.npmjs.org%2Fsvelte%2F-%2Fsvelte-5.22.6.tgz (via npm:^5.22.6)
      └─ axobject-query@npm:4.1.0::__archiveUrl=https%3A%2F%2Fregistry.npmjs.org%2Faxobject-query%2F-%2Faxobject-query-4.1.0.tgz (via npm:^4.1.0)   

This problem has shown up in other places too, but with no clear solution:

• axobject-query/lib/index.js?v=c984d6da' does not provide an export named 'AXObjectRoles' withastro/astro#11912
• axobject-query doest not provide an export named 'AXObjectRoles'  A11yance/axobject-query#353

Diving into the Network request in the browser, this is the content of '/node_modules/axobject-query/lib/index.js?v=d4376a8f':

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.elementAXObjects = exports.AXObjects = exports.AXObjectRoles = exports.AXObjectElements = void 0;
var _AXObjectElementMap = _interopRequireDefault(require("./AXObjectElementMap"));
var _AXObjectRoleMap = _interopRequireDefault(require("./AXObjectRoleMap"));
var _AXObjectsMap = _interopRequireDefault(require("./AXObjectsMap"));
var _elementAXObjectMap = _interopRequireDefault(require("./elementAXObjectMap"));
function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
var AXObjectElements = _AXObjectElementMap.default;
exports.AXObjectElements = AXObjectElements;
var AXObjectRoles = _AXObjectRoleMap.default;
exports.AXObjectRoles = AXObjectRoles;
var AXObjects = _AXObjectsMap.default;
exports.AXObjects = AXObjects;
var elementAXObjects = _elementAXObjectMap.default;
exports.elementAXObjects = elementAXObjects;

My hunch says this might be a CJS/ESM issue, but I could be wrong.

Greptile Summary

This PR reverts changes to preview annotation handling in the Vite builder due to critical issues causing Svelte stories to fail loading in development mode.

• Reverted changes in code/builders/builder-vite/src/codegen-modern-iframe-script.ts to use dynamic imports instead of static imports
• Removed CSF4-specific handling and simplified preview annotation processing in Vite builder
• Fixed module resolution issue with axobject-query dependency that caused infinite loading spinner
• Modified code/builders/builder-vite/src/optimizeDeps.ts to remove 'react-dom/test-utils' and 'semver' from pre-bundling
• Reverted path handling changes to use relative URLs instead of absolute paths for module resolution

[greptile-apps]

_{7 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile}

[greptile-apps]

logic: Moving these variables outside the loader function could cause issues if they're needed before the window object is fully initialized

[nx-cloud]

View your CI Pipeline Execution ↗ for commit d57b0a4.

Command	Status	Duration	Result
nx affected -t check -c production --parallel=7	✅ Succeeded	<1s	View ↗
nx run-many -t build -c production --parallel=3	✅ Succeeded	1m 18s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-03-11 08:48:08 UTC

[tobiasdiez]

My hunch says this might be a CJS/ESM issue, but I could be wrong.

Does it work if you explicitly transpile it to esm?

How does one reproduce this error?

[kasperpeulen]

@tobiasdiez You can create svelte sandbox in the monorepo with this command:

yarn task sandbox --template 'svelte-vite/default-ts' --no-link --debug

Or open it in stackblitz:
https://stackblitz.com/github/storybookjs/sandboxes/tree/next/svelte-vite/default-ts/after-storybook?file=package.json&preset=node

[kasperpeulen]

@tobiasdiez This seems to fix it:
#30792

It seems that we are now forced to add all CJS dependencies to optimizeDeps. While before #28798 we only needed that as a perf optimization.
Do you understand why this is the case @tobiasdiez? And how to avoid that?

[tobiasdiez]

Since this code is generated by a plugin, it makes sense that vite cannot find these imported packages during the initial screening of the dependencies. Thus, in either case, it is a good idea to add these dependencies to optimizeDeps. Normally, if you don't add them then vite should recognize on-the-fly that it's cjs and then transpile it. No idea why this is not working here.

Is this behavior particular to the axobject-query package, or does it happen with all cjs dependencies? Sometimes packages declare exports not quite correctly, which may lead to vite erroneously inferring that it's a esm package. But if it happens with every cjs dependency, something else is off.

[kasperpeulen]

Thus, in either case, it is a good idea to add these dependencies to optimizeDeps.
I agree with that.

Is this behavior particular to the axobject-query package, or does it happen with all cjs dependencies?

It seems with all, I also had to add:

• @ampproject/remapping
• @jridgewell/sourcemap-codec
• aria-query

So because we only test one sandbox (react-vite) in dev mode, I'm afraid this will easily regress, if someone adds a dependency.