Power-Playground / app

Code. Share. Empower.
https://pplay.vercel.app
MIT License
55 stars 12 forks source link

Bug: Errors when run `yarn serve` #26

Closed kainstar closed 1 year ago

kainstar commented 1 year ago

When run yarn serve, I get some errors in my terminal, but the url http://localhost:5174/app/ can be access normally.

Is there any additional operation need to do after install node_modules?

Logs

yarn run v1.22.19
$ vite
Adding plugin: ./core/src/plugins/urlCache.ts
Adding plugin: ./core/src/plugins/about/index.ts
Adding plugin: ./core/src/plugins/comment-queries/index.ts
Adding plugin: ./core/src/plugins/copilot/index.ts
Adding plugin: ./core/src/plugins/edit-utils/index.ts
Adding plugin: ./core/src/plugins/history-for-local/index.ts
Adding plugin: ./core/src/plugins/outputs/index.ts
Adding plugin: ./core/src/plugins/typescript/index.ts
Adding plugin: ./src/plugins/remove-left-toolbar-items.ts
Adding plugin: ./src/plugins/dock-mode-switcher/index.ts
Port 5173 is in use, trying another one...

  VITE v4.4.8  ready in 965 ms

  ➜  Local:   http://localhost:5174/app/
  ➜  Network: use --host to expose
  ➜  press h to show help
Error:   Failed to scan for dependencies from entries:
  /Users/zsk/code/github.com/Power-Playground/app/index.html
/Users/zsk/code/github.com/Power-Playground/app/eval-logs.html
/Users/zsk/code/github.com/Power-Playground/app/core/src/index.ts
/Users/zsk/code/github.com/Power-Playground/app/core/src/plugins/urlCache.ts
/Users/zsk/code/github.com/Power-Playground/app/core/src/plugins/about/index.ts
/Users/zsk/code/github.com/Power-Playground/app/core/src/plugins/comment-queries/index.ts
/Users/zsk/code/github.com/Power-Playground/app/core/src/plugins/copilot/index.ts
/Users/zsk/code/github.com/Power-Playground/app/core/src/plugins/edit-utils/index.ts
/Users/zsk/code/github.com/Power-Playground/app/core/src/plugins/history-for-local/index.ts
/Users/zsk/code/github.com/Power-Playground/app/core/src/plugins/outputs/index.ts
/Users/zsk/code/github.com/Power-Playground/app/core/src/plugins/typescript/index.ts
/Users/zsk/code/github.com/Power-Playground/app/src/plugins/remove-left-toolbar-items.ts
/Users/zsk/code/github.com/Power-Playground/app/src/plugins/dock-mode-switcher/index.ts

  ✘ [ERROR] Invalid glob import syntax: Could only use literals [plugin vite:dep-scan]

    node_modules/esbuild/lib/main.js:1434:21:
      1434 │         let result = await callback({
           ╵                      ^

    at err (file:///Users/zsk/code/github.com/Power-Playground/app/node_modules/vite/dist/node/chunks/dep-75f53616.js:40846:23)
    at validateLiteral (file:///Users/zsk/code/github.com/Power-Playground/app/node_modules/vite/dist/node/chunks/dep-75f53616.js:40907:23)
    at file:///Users/zsk/code/github.com/Power-Playground/app/node_modules/vite/dist/node/chunks/dep-75f53616.js:40916:13
    at Array.map (<anonymous>)
    at parseImportGlob (file:///Users/zsk/code/github.com/Power-Playground/app/node_modules/vite/dist/node/chunks/dep-75f53616.js:40842:27)
    at transformGlobImport (file:///Users/zsk/code/github.com/Power-Playground/app/node_modules/vite/dist/node/chunks/dep-75f53616.js:40960:27)
    at doTransformGlobImport (file:///Users/zsk/code/github.com/Power-Playground/app/node_modules/vite/dist/node/chunks/dep-75f53616.js:44490:30)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///Users/zsk/code/github.com/Power-Playground/app/node_modules/vite/dist/node/chunks/dep-75f53616.js:44731:35
    at async requestCallbacks.on-load (/Users/zsk/code/github.com/Power-Playground/app/node_modules/esbuild/lib/main.js:1434:22)

  This error came from the "onLoad" callback registered here:

    node_modules/esbuild/lib/main.js:1292:20:
      1292 │       let promise = setup({
           ╵                     ^

    at setup (file:///Users/zsk/code/github.com/Power-Playground/app/node_modules/vite/dist/node/chunks/dep-75f53616.js:44718:19)
    at handlePlugins (/Users/zsk/code/github.com/Power-Playground/app/node_modules/esbuild/lib/main.js:1292:21)
    at buildOrContextImpl (/Users/zsk/code/github.com/Power-Playground/app/node_modules/esbuild/lib/main.js:978:5)
    at Object.buildOrContext (/Users/zsk/code/github.com/Power-Playground/app/node_modules/esbuild/lib/main.js:786:5)
    at /Users/zsk/code/github.com/Power-Playground/app/node_modules/esbuild/lib/main.js:2185:68
    at new Promise (<anonymous>)
    at Object.context (/Users/zsk/code/github.com/Power-Playground/app/node_modules/esbuild/lib/main.js:2185:27)
    at Object.context (/Users/zsk/code/github.com/Power-Playground/app/node_modules/esbuild/lib/main.js:2025:58)
    at prepareEsbuildScanner (file:///Users/zsk/code/github.com/Power-Playground/app/node_modules/vite/dist/node/chunks/dep-75f53616.js:44413:26)

  The plugin "vite:dep-scan" was triggered by this import

    src/init.ts:7:22:
      7 │ import configure from './configure'
        ╵                       ~~~~~~~~~~~~~

    at failureErrorWithLog (/Users/zsk/code/github.com/Power-Playground/app/node_modules/esbuild/lib/main.js:1649:15)
    at /Users/zsk/code/github.com/Power-Playground/app/node_modules/esbuild/lib/main.js:1058:25
    at runOnEndCallbacks (/Users/zsk/code/github.com/Power-Playground/app/node_modules/esbuild/lib/main.js:1484:45)
    at buildResponseToResult (/Users/zsk/code/github.com/Power-Playground/app/node_modules/esbuild/lib/main.js:1056:7)
    at /Users/zsk/code/github.com/Power-Playground/app/node_modules/esbuild/lib/main.js:1068:9
    at new Promise (<anonymous>)
    at requestCallbacks.on-end (/Users/zsk/code/github.com/Power-Playground/app/node_modules/esbuild/lib/main.js:1067:54)
    at handleRequest (/Users/zsk/code/github.com/Power-Playground/app/node_modules/esbuild/lib/main.js:729:19)
    at handleIncomingPacket (/Users/zsk/code/github.com/Power-Playground/app/node_modules/esbuild/lib/main.js:755:7)
    at Socket.readFromStdout (/Users/zsk/code/github.com/Power-Playground/app/node_modules/esbuild/lib/main.js:679:7)

Envs

System:
    OS: macOS 12.5
    CPU: (8) arm64 Apple M2
    Memory: 392.64 MB / 24.00 GB
    Shell: 5.8.1 - /bin/zsh
Binaries:
    Node: 18.16.0 - ~/Library/Caches/fnm_multishells/79657_1692950877120/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/79657_1692950877120/bin/yarn
    npm: 9.5.1 - ~/Library/Caches/fnm_multishells/79657_1692950877120/bin/npm
nonzzz commented 1 year ago

https://github.com/vitejs/vite/discussions/13306 .

NWYLZW commented 1 year ago

I can't seem to reproduce this problem, but maybe you can add this configuration after Line:136 in vite.config.ts.

  optimizeDeps: {
    entries: [
      path.resolve(__dirname, 'index.html'),
      path.resolve(__dirname, 'eval-logs.html')
    ]
  },

If this fixes your problem, I'll add it to the project.

Is your problem bound to recur?

kainstar commented 1 year ago

I tried add the optimizeDeps property and console.log in replacer plugin, but don't take any effects.

But after I revert all my changes, the vite don't report error any more. I'm confused with the reason why it report and why it don't report. Maybe the cache, dependencies version or OS?

Anyways, I escape from the strange problem, I will close this issue later.

NWYLZW commented 1 year ago

So strange, Vite.

NWYLZW commented 1 year ago

I found out how to solve it! The error will appear when you not access the application link.

It will resolve when you to access the http://localhost:5173/app.

Vite seem needed cache the external dependency when you access the web application, I think it which wrong resolving by vite-plugin-external.

cc @nonzzz

@AfireHong You can try the resolve method.

pan93412 commented 1 year ago

Here's the reproduce & workaround screencast:

https://github.com/Power-Playground/app/assets/28441561/90985c49-36bf-43f5-b44a-82f6dc8f18f2

nonzzz commented 1 year ago

Now, I find the why. This problem is about to be solved.

nonzzz commented 1 year ago

Let us know what happens with this wrong. First, we run the vite dev server, And vite will create a viteServer us plugin and vite's internal plugin will extract some hook and called on middlewares The first called will happen on function resolveConfig. And each plugin who has config will be trigger then merge the config. Then vite's server has been listen. It will check each plugin state(ensure plugins are ready) and start scan and pre build logic.(Notice it)

Scan & pre build

vite create vite:scan for scan each input. and using esbuild pre build ( Now us config.ts is using import.meta.glob(Variable), but the variable is define on replacer plugin. but it don't be trigger on scan stage. So the esbuild will send panic. But if you open the project. The replacer plugin will work. So it's bind variable success.