Dynamic import not working with (group) routing

[shinokada]

Describe the bug

I put this issue to Svelte, but they think it might be a Vite bug.

I use the following code for [slug] dir:

// [slug]/+page.js
/** @type {import('./$types').PageLoad} */
export async function load({ params }) {
  const post = await import(`../${params.slug}.svelte`);
  const content = post.default;
  // console.log('dir-2', content)
  return {
    content
  };
}

// +page.svelte
<script lang="ts">
  import type { PageData } from './$types';
  export let data: PageData;
</script>

<svelte:component this={data.content} />

I have exactly the same directories except one has a group routing:

├── (app)
│   └── dir-1
│       ├── [slug]
│       │   ├── +page.js
│       │   └── +page.svelte
│       └── test.svelte
├── +page.svelte
└── dir-2
    ├── [slug]
    │   ├── +page.js
    │   └── +page.svelte
    └── test.svelte

dir-2 works but dir-1 returns the following error:

Error: Unknown variable dynamic import: ../../../(app)/dir-1/test.svelte
    at dynamic-import-helper.js:7:96
    at new Promise (<anonymous>)
    at default (dynamic-import-helper.js:6:12)
    at load (+page.js:3:22)
    at load_node (client.js?v=c8e2c5a3:717:39)

Reproduction

https://www.sveltelab.dev/7h5wu99oqiwukqn?files=.%2Fbuilt%2Foutput%2Fserver%2Fentries%2Fpages%2F%28app%29%2Fdir-1%2F_slug_%2F_page.ts.js%2C.%2Fbuilt%2Foutput%2Fserver%2Fentries%2Fpages%2Fdir-2%2F_slug_%2F_page.ts.js

Steps to reproduce

Reproduction method 1

Use the above reproduction:

1. Click dir-2 to see it is working.
2. Click dir-1 to see the error.

Reproduction method 2

git clone [email protected]:shinokada/svelte-issue.git
pnpm i && pnpm dev

Go to http://localhost:5173/dir-2/test to see it is working.
Go to http://localhost:5173/dir-1/test to see the error.

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M2 Pro
    Memory: 221.25 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
    pnpm: 9.3.0 - /opt/homebrew/bin/pnpm
    bun: 1.1.8 - ~/.bun/bin/bun
  Browsers:
    Chrome: 126.0.6478.57
    Edge: 125.0.2535.92
    Safari: 17.5

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• 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 instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bluwy]

Using vite-plugin-inspect, the dynamic import was transform from:

  const post = await import(`../${params.slug}.svelte`);

  const post = await __variableDynamicImportRuntimeHelper((import.meta.glob("../*.svelte")), `../../../\(app\)/dir-1/${params.slug}.svelte`, 6);

The second parameter is likely incorrect, and the (app) probably interferes with it. The relevant code is at here.

[hi-ogawa]

It looks like a similar issue was reported here and this is still open:

• Dynamic import fails in route with brackets or parenthesis #11824

[sapphi-red]

Duplicate of #11824