failed for vite template `vanilla-ts`

shuizhongyueming commented 1 month ago

I'm just creating a project using the vite's official template vanilla-ts with command:

pnpm create vite vite-deno --template vanilla-ts

cd vite-deno

pnpm install

pnpm run dev

the server runs successfully, and every thing is ok.

Then I'm trying to add deno.json and scripts/ follow Usage section in our project readme. Except that I comment out server port in vite.ts which cause permission problem in my environment.

import { pluginDeno } from "@deno-plc/vite-plugin-deno";
import type { InlineConfig } from "vite";

export const config: InlineConfig = {
    configFile: false, // configuration is inlined here
    // server: {
    //     port: 80,
    // },
    plugins: [
        pluginDeno({
            // see configuration docs
        }),
    ],
};

then, I'm trying to run command deno run -A scripts/dev.ts in project root, but failed with error:

 deno run -A scripts/dev.ts
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
Error:   Failed to scan for dependencies from entries:
  /Users/xxx/project/vite-deno/index.html

  ✘ [ERROR] invalid output of deno info file:///Users/xxx/project/vite-deno/index.html [plugin vite:dep-scan]

    html:/Users/xxx/project/vite-deno/index.html:1:7:
      1 │ import "/src/main.ts"
        ╵        ~~~~~~~~~~~~~~

    at failureErrorWithLog (file:///Users/xxx/project/vite-deno/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:1472:15)
    at file:///Users/xxx/project/vite-deno/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:945:25
    at runOnEndCallbacks (file:///Users/xxx/project/vite-deno/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:1315:45)
    at buildResponseToResult (file:///Users/xxx/project/vite-deno/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:943:7)
    at file:///Users/xxx/project/vite-deno/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:955:9
    at new Promise (<anonymous>)
    at requestCallbacks.on-end (file:///Users/xxx/project/vite-deno/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:954:54)
    at handleRequest (file:///Users/xxx/project/vite-deno/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:647:17)
    at handleIncomingPacket (file:///Users/xxx/project/vite-deno/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:672:7)
    at Readable.readFromStdout (file:///Users/xxx/project/vite-deno/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:600:7)

I can't figure out whats wrong

raaymax commented 1 month ago

Not working for me eider

Error:   Failed to scan for dependencies from entries:
  /Users/xxx/Workspace/Project/app/index.html

  ✘ [ERROR] failed to look up module graph of file:///Users/xxx/Workspace/Project/app/index.html:
file://users/xxx/Workspace/Project/app/index.html: The module's source code could not be parsed: Expected ';', '}' or <eof> at file:///Users/xxx/Workspace/Project/app/index.html:1:11

  <!DOCTYPE html>
            ~~~~ [plugin vite:dep-scan]

    html:/Users/xxx/Workspace/Project/app/index.html:1:7:
      1 │ import "./src/index.ts"
        ╵        ~~~~~~~~~~~~~~~~

    at failureErrorWithLog (file:///Users/xxx/Workspace/Project/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:1472:15)
    at file:///Users/xxx/Workspace/Project/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:945:25
    at runOnEndCallbacks (file:///Users/xxx/Workspace/Project/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:1315:45)
    at buildResponseToResult (file:///Users/xxx/Workspace/Project/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:943:7)
    at file:///Users/xxx/Workspace/Project/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:955:9
    at new Promise (<anonymous>)
    at requestCallbacks.on-end (file:///Users/xxx/Workspace/Project/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:954:54)
    at handleRequest (file:///Users/xxx/Workspace/Project/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:647:17)
    at handleIncomingPacket (file:///Users/xxx/Workspace/Project/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:672:7)
    at Readable.readFromStdout (file:///Users/xxx/Workspace/Project/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:600:7)

❯ deno --version
deno 2.0.0 (stable, release, aarch64-apple-darwin)
v8 12.9.202.13-rusty
typescript 5.6.2

hansSchall commented 1 month ago

I have to apologize for the late reply, but for some reason I didn't get any notification about this issue.

The error message is a bit confusing, it is reported as [plugin vite:dep-scan], but actually it is an error thrown by Deno because it is trying to parse index.html as JS/TS source code. (This is Vite's error handling...)

I will investigate this during the next few days, the transition between the modules handled by vite (html files) and the ones handled by deno is unfortunately still a critical point

hansSchall commented 4 weeks ago

It should be fixed in v2.1.8...

The plugin accidentially tried to obtain information about the module graph of the html entrypoint, resulting in calling deno info <...>.html. This throws an error, because HTML is obviously not valid JS...

Please let me know if the fix works

shuizhongyueming commented 3 weeks ago

@hansSchall thanks for the update.

I have upgrade the plugin to v2.1.8, it can scan the html correctly, but failed for processing .css and .svg file.

deno --version
deno 2.0.2 (stable, release, aarch64-apple-darwin)
v8 12.9.202.13-rusty
typescript 5.6.2

deno run dev
Task dev deno run -A scripts/dev.ts
Re-optimizing dependencies because vite config has changed
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
Error:   Failed to scan for dependencies from entries:
  /Users/xxx/project/vite-deno/index.html

  ✘ [ERROR] failed to look up module graph of file:///Users/xxx/project/vite-deno/src/main.ts:
file://users/xxx/project/vite-deno/src/style.css: Expected a JavaScript or TypeScript module, but identified a Unknown module. Importing these types of modules is currently not supported.
  Specifier: file:///Users/xxx/project/vite-deno/src/style.css
file://users/xxx/project/vite-deno/src/typescript.svg: Expected a JavaScript or TypeScript module, but identified a Unknown module. Importing these types of modules is currently not supported.
  Specifier: file:///Users/xxx/project/vite-deno/src/typescript.svg
file://vite.svg/: Module not found "file:///vite.svg". [plugin vite:dep-scan]

    html:/Users/xxx/project/vite-deno/index.html:1:7:
      1 │ import "/src/main.ts"
        ╵        ~~~~~~~~~~~~~~

    at failureErrorWithLog (file:///Users/xxx/project/vite-deno/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:1472:15)
    at file:///Users/xxx/project/vite-deno/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:945:25
    at runOnEndCallbacks (file:///Users/xxx/project/vite-deno/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:1315:45)
    at buildResponseToResult (file:///Users/xxx/project/vite-deno/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:943:7)
    at file:///Users/xxx/project/vite-deno/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:955:9
    at new Promise (<anonymous>)
    at requestCallbacks.on-end (file:///Users/xxx/project/vite-deno/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:954:54)
    at handleRequest (file:///Users/xxx/project/vite-deno/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:647:17)
    at handleIncomingPacket (file:///Users/xxx/project/vite-deno/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:672:7)
    at Readable.readFromStdout (file:///Users/xxx/project/vite-deno/node_modules/.deno/esbuild@0.21.5/node_modules/esbuild/lib/main.js:600:7)

hansSchall commented 3 weeks ago

I have added a notice to the readme just a few days ago:

https://github.com/deno-plc/vite-plugin-deno?tab=readme-ov-file#asset-imports

Currently there is no way to exclude some files from Deno, so non-JS files must not show up in the module graph :-(

Blame on me, the notice should be in a more prominent place... (I will fix this during the next days)

deno-plc / vite-plugin-deno

failed for vite template `vanilla-ts` #1