Skip to content

Fix TIA JS module graph for Vue and Svelte projects - #1893

Open
m0shiurX wants to merge 1 commit into
pestphp:5.xfrom
m0shiurX:fix/tia-sfc-module-graph
Open

Fix TIA JS module graph for Vue and Svelte projects#1893
m0shiurX wants to merge 1 commit into
pestphp:5.xfrom
m0shiurX:fix/tia-sfc-module-graph

Conversation

@m0shiurX

Copy link
Copy Markdown

What:

  • Bug Fix
  • New Feature

Description:

bin/pest-tia-vite-deps.mjs runs rolldown over the page files, but none of its three plugins can read a .vue or .svelte file. Every single file component fails to parse, so the build exits non zero:

node vendor/pestphp/pest/bin/pest-tia-vite-deps.mjs .
Error: Build failed with 367 errors:
[PARSE_ERROR] HTML comments are not allowed in modules
[PARSE_ERROR] Unexpected JSX expression

JsModuleGraph::resolve() swallows that, so build() hands Tia.php an empty map on every run and buildStrict() shows the Vite resolver unavailable warning. TIA keeps working, it just loses all frontend precision for the whole Inertia layer, silently, on every Laravel + Inertia + Vue project.

The fix is a load hook that returns the component's <script> blocks in place of the raw file. Every import edge lives in a script block, so the graph is the same one the real compiler would produce, with no framework plugin, no new dependency and no compile step. That matches how assetStub already stubs CSS and images rather than processing them.

Two more things showed up once the components parsed, and both are in the same helper:

  • TypeScript drops an import whose bindings the emitted code never uses. A component that only appears in a <template> is exactly that, so every lang="ts" page came back with zero edges. transform.typescript.onlyRemoveTypeImports keeps the value imports.
  • Rolldown no longer bundles CSS, so assetStub has to return moduleType: 'js' for the file it replaces. Without it any page that imports a stylesheet fails the build, single file component or not.

Verified against a real Inertia + Vue app: the helper went from exit 1 with 367 parse errors to exit 0 with a full page map. Tests cover the extraction as a pure function (extractSfcScript) plus an end to end rolldown build over a fixture component tree, skipped when rolldown is not installed.

Two alternatives I did not take. Loading @vitejs/plugin-vue or @sveltejs/vite-plugin-svelte from the project's node_modules means resolving and version matching arbitrary plugins and pulling a full component compile into a pre pass that is meant to be fast, for output the graph never reads. Importing the project's vite.config.* and reusing its plugins is something the file already rejects on purpose, see the comment above loadAliasFromViteConfig().

The vite deps helper ran rolldown over the page files with no plugin that
could read a single file component, so every .vue and .svelte file failed
to parse and the whole build exited non zero. TIA then got an empty JS to
component map on every run and quietly fell back to coarse selection.

The helper now hands rolldown the script blocks of a component instead of
the raw file. That is all the graph needs, since every import edge lives
in a script block, so there is no framework plugin and no compile step.

Two things surfaced once the components parsed. TypeScript drops an import
whose bindings the emitted code never uses, and a component used only in a
template is exactly that, so the typed pages lost their edges until the
transform kept value imports. Rolldown also refuses to bundle CSS now, so
the asset stub has to claim the js module type for the file it replaces.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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.

1 participant