unexpected ?import added to plugin IDs

[benmccann]

⚠️ IMPORTANT ⚠️ Please check the following list before proceeding. If you ignore this issue template, your issue will be directly closed.

• Read the docs.
• Use Vite >=2.0. (1.x is no longer supported)

Describe the bug

I have a regex that looks for files ending in .svelte as suggested by the documentation here: https://vitejs.dev/guide/api-plugin.html#transforming-custom-file-types

That regex fails because ?import is added to the end of files. I believe that the ?import addition is a bug, but it's possible the documentation needs to be updated instead

Reproduction

git clone git@github.com:benmccann/vite-svelte.git
npm install
npm run build
node server

Then visit http://localhost:3000

This will print:

load called with unexpected id /home/bmccann/src/vite-svelte/src/App.svelte?import
transform called with unexpected id /home/bmccann/src/vite-svelte/src/App.svelte?import

I put debug statements in the plugin here: https://github.com/benmccann/vite-plugin-svelte/blob/be10f3b71f7e440dea8a8b644a15a12c97f0df7d/index.js#L105

You should be able to edit the code in node_modules/vite-plugin-svelte/index.js if you want to futz around further

System Info

• vite version: 2.0.0-beta.36
• Operating System: Ubuntu
• Node version: 14.8.0
• Package manager (npm/yarn/pnpm) and version: npm 6.14.11

[yyx990803]

Can't reproduce from your repo. I only get two log messages of dependency imports with version queries.

The ?import should be properly stripped before entering the transform pipeline and it should not show up in plugin hooks.

[benmccann]

Hmm. Can you share the log messages that you get? I didn't quite understand what you're seeing

Here's what I get:

load called with unexpected id src/App.svelte?import
transform called with unexpected id src/App.svelte?import
Error: Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .svelte?import file format.
    at formatError (node_modules/vite/dist/node/chunks/dep-3ee23784.js:53401:46)
    at TransformContext.error (node_modules/vite/dist/node/chunks/dep-3ee23784.js:53397:19)
    at TransformContext.transform (node_modules/vite/dist/node/chunks/dep-3ee23784.js:46274:22)
    at async Object.transform (node_modules/vite/dist/node/chunks/dep-3ee23784.js:53612:30)
    at async transformRequest (node_modules/vite/dist/node/chunks/dep-3ee23784.js:60225:29)
    at async ssrLoadModule (node_modules/vite/dist/node/chunks/dep-3ee23784.js:71391:10)
    at async Promise.all (index 0)
    at async ssrLoadModule (node_modules/vite/dist/node/chunks/dep-3ee23784.js:71397:5)
    at async server.js:53:11
Error: Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .svelte?import file format.
    at formatError (node_modules/vite/dist/node/chunks/dep-3ee23784.js:53401:46)
    at TransformContext.error (node_modules/vite/dist/node/chunks/dep-3ee23784.js:53397:19)
    at TransformContext.transform (node_modules/vite/dist/node/chunks/dep-3ee23784.js:46274:22)
    at async Object.transform (node_modules/vite/dist/node/chunks/dep-3ee23784.js:53612:30)
    at async transformRequest (node_modules/vite/dist/node/chunks/dep-3ee23784.js:60225:29)
    at async ssrLoadModule (node_modules/vite/dist/node/chunks/dep-3ee23784.js:71391:10)
    at async Promise.all (index 0)
    at async ssrLoadModule (node_modules/vite/dist/node/chunks/dep-3ee23784.js:71397:5)
    at async server.js:53:11

It is the first two lines that are meaningful.

Thank you for confirming that the ?import should be stripped. That will help me investigate.

[yyx990803]

These are the only logs I got:

  Vite dev server running at:

  > Local:    http://localhost:3000/
  > Network:  http://10.0.0.65:3000/

  ready in 113ms.

load called with unexpected id /Users/evan/Research/repros/vite-svelte/node_modules/svelte/internal/index.mjs?v=8516a8a1
transform called with unexpected id /Users/evan/Research/repros/vite-svelte/node_modules/svelte/internal/index.mjs?v=8516a8a1

Both logs are expected. In fact, I get the Hello World correctly rendering in the browser.

[benmccann]

I see it says "Vite dev server running" in your logs. Did you perhaps npm run dev or vite instead of node server? I get the same output as you in that case.

I created a server.js based off the one contained in https://github.com/vitejs/vite/tree/main/packages/playground/ssr but my package.json doesn't match that one exactly

[benmccann]

thanks!!

[yyx990803]

Fixed a bunch of other issues, your repo should now run Svelte SSR with beta.39!

[benmccann]

Amazing! Thank you!

Would it make any sense for this plugin to live in https://github.com/vitejs/vite/tree/main/packages after I clean it up?

Also, you had mentioned earlier that I might need to handle CSS differently than rollup-plugin-svelte does. Is there anything in particular I should be on the lookout for there?

[yyx990803]

Cool!

Re package placement: depends on the ownership - putting it inside vite's repo would mean we are committed to maintaining it, which isn't the case, so I think it makes more sense to maybe put it in the Svelte org?

Re CSS: during dev, what Vue is doing is generating an import to a virtual module like this:

import '/path/to/Component.vue?vue&type=style&lang=.css'

The plugin would then check for this request in load and return the previously compiled CSS. This leverages Vite's internal CSS handling for everything, including HMR, PostCSS configs, pre-processors (with &lang=.scss) and CSS modules (with &lang=.module.css).

I think that's kind of what the Svelte plugin is doing but from my previous simple try HMR was not working for CSS, maybe you can figure it out!