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

Dynamic import not working with (group) routing #17481

Open
7 tasks done
shinokada opened this issue Jun 14, 2024 · 1 comment
Open
7 tasks done

Dynamic import not working with (group) routing #17481

shinokada opened this issue Jun 14, 2024 · 1 comment
Labels
p3-minor-bug An edge case that only affects very specific usage (priority)

Comments

@shinokada
Copy link

shinokada commented Jun 14, 2024

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

@bluwy bluwy added p3-minor-bug An edge case that only affects very specific usage (priority) and removed pending triage labels Jun 17, 2024
@bluwy
Copy link
Member

bluwy commented Jun 17, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
p3-minor-bug An edge case that only affects very specific usage (priority)
Projects
None yet
Development

No branches or pull requests

2 participants