search

bcakmakoglu / vue-flow

A highly customizable Flowchart component for Vue 3. Features seamless zoom & pan 🔎, additional components like a Minimap 🗺 and utilities to interact with state and graph.
https://vueflow.dev/
MIT License
3.89k stars 253 forks source link

🐛 [BUG]: build vue-flow error, no such file or directory, open '.../vue-flow/examples/vite/node_modules/@vue-flow/core/dist/style.css' #1643

Open LincZero opened 2 hours ago

LincZero commented 2 hours ago

Is there an existing issue for this?

Current Behavior

Since I need to use the canvas on my website like the vue-flow website, I want to try building the vue-flow documentation first.

Here are all my actions：

(Windows11 PowerShell in VSCode)
PS H:\Git\Public\Group_FrontEnd> node -v  
v20.10.0
PS H:\Git\Public\Group_FrontEnd> pnpm -v
9.12.2
PS H:\Git\Public\Group_FrontEnd> npm -v
10.2.3
> git clone https://github.com/bcakmakoglu/vue-flow.git
> cd .\vue-flow\
> pnpm i
Scope: all 16 workspace projects
Lockfile is up to date, resolution step is skipped
Packages: +1497
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 1497, reused 1481, downloaded 0, added 1497, done

devDependencies:
+ @changesets/changelog-github 0.5.0
+ @changesets/cli 2.27.5
+ shx 0.3.4
+ turbo 2.0.4

Done in 11.3s
> pnpm dev
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Error !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

> pnpm run build
@vue-flow/monorepo@0.0.0 build H:\Git\Public\Group_FrontEnd\vue-flow
turbo build --filter='./packages/*'
• Packages in scope: 
• Running build in 0 packages
• Remote caching disabled

When I execute pnpm dev, I get an error accessing the page (There are errors on both console and web page)

图片

Expected Behavior

I wanted the site to work, but it didn't.

图片

error message：

Unable to resolve `@import "node_modules/@vue-flow/core/dist/style.css"` from H:/Git/Public/Group_FrontEnd/vue-flow/examples/vite
[vite] Internal server error: [postcss] ENOENT: no such file or directory, open '...'

A similar question: #1102, but I can't get a solution out of it.

Steps To Reproduce

No response

Relevant log output

No response

Anything else?

No response

LincZero commented 2 hours ago

I am now trying to use an ubuntu virtual machine to see if the same problem exists. The process is exactly the same, it is still compiling, it seems normal (there are more tasks in the 'Task' list)

图片

（The Task list have many item in the ubuntu version, but task list only have one item in the windows11 version）

Let me try to figure out the difference.

Supplement everything I do in the ubuntu virtual machine：

vagrant@ubuntu-jammy:/vagrant/Git$ node -v
v20.17.0
vagrant@ubuntu-jammy:/vagrant/Git$ pnpm -v
9.12.0
vagrant@ubuntu-jammy:/vagrant/Git$ npm -v
10.8.2
vagrant@ubuntu-jammy:/vagrant/Git$ git clone https://github.com/bcakmakoglu/vue-flow.git
Cloning into 'vue-flow'...
remote: Enumerating objects: 34810, done.
remote: Counting objects: 100% (2550/2550), done.
remote: Compressing objects: 100% (1162/1162), done.
remote: Total 34810 (delta 1683), reused 1905 (delta 1339), pack-reused 32260 (from 1)
Receiving objects: 100% (34810/34810), 15.90 MiB | 6.44 MiB/s, done.
Resolving deltas: 100% (24538/24538), done.
Updating files: 100% (630/630), done.
vagrant@ubuntu-jammy:/vagrant/Git$ cd vue-flow/
vagrant@ubuntu-jammy:/vagrant/Git/vue-flow$ pnpm i
Scope: all 16 workspace projects
Lockfile is up to date, resolution step is skipped
Packages: +1501
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 WARN  GET https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz error (ECONNRESET). Will retry in 10 seconds. 2 retries left.
 ERR_PNPM_META_FETCH_FAIL  GET https://registry.npmjs.org/pnpm: request to https://registry.npmjs.org/pnpm failed, reason: read ECONNRESET
 WARN  GET https://registry.npmjs.org/@algolia/client-search/-/client-search-5.1.1.tgz error (ECONNRESET). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.11.0.tgz error (ECONNRESET). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.1.1.tgz error (ECONNRESET). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/@vercel/analytics/-/analytics-1.3.1.tgz error (ECONNRESET). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/@algolia/client-common/-/client-common-5.1.1.tgz error (ECONNRESET). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz error (ECONNRESET). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/react/-/react-18.2.0.tgz error (ECONNRESET). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/@babel/parser/-/parser-7.24.7.tgz error (ECONNRESET). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz error (ECONNRESET). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/vue/-/vue-3.4.38.tgz error (ECONNRESET). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz error (ECONNRESET). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.38.tgz error (ECONNRESET). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.38.tgz error (ECONNRESET). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-1.0.12.tgz error (ECONNRESET). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz error (ECONNRESET). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/@babel/parser/-/parser-7.24.7.tgz error (ETIMEDOUT). Will retry in 1 minute. 1 retries left.
 WARN  GET https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz error (ETIMEDOUT). Will retry in 1 minute. 1 retries left.
 WARN  GET https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.38.tgz error (ETIMEDOUT). Will retry in 1 minute. 1 retries left.
 WARN  GET https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.38.tgz error (ETIMEDOUT). Will retry in 1 minute. 1 retries left.
 WARN  GET https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-1.0.12.tgz error (ETIMEDOUT). Will retry in 1 minute. 1 retries left.
 WARN  GET https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz error (ETIMEDOUT). Will retry in 1 minute. 1 retries left.
 WARN  GET https://registry.npmjs.org/@algolia/client-search/-/client-search-5.1.1.tgz error (ECONNRESET). Will retry in 1 minute. 1 retries left.
 WARN  GET https://registry.npmjs.org/@vercel/analytics/-/analytics-1.3.1.tgz error (ECONNRESET). Will retry in 1 minute. 1 retries left.
 WARN  GET https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.1.1.tgz error (ECONNRESET). Will retry in 1 minute. 1 retries left.
 WARN  GET https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.11.0.tgz error (ECONNRESET). Will retry in 1 minute. 1 retries left.
 WARN  GET https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz error (ECONNRESET). Will retry in 1 minute. 1 retries left.
 WARN  GET https://registry.npmjs.org/react/-/react-18.2.0.tgz error (ECONNRESET). Will retry in 1 minute. 1 retries left.
 WARN  GET https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz error (ECONNRESET). Will retry in 1 minute. 1 retries left.
 WARN  GET https://registry.npmjs.org/@algolia/client-common/-/client-common-5.1.1.tgz error (ERR_SOCKET_TIMEOUT). Will retry in 1 minute. 1 retries left.
 ETIMEDOUT  request to https://registry.npmjs.org/@babel/parser/-/parser-7.24.7.tgz failed, reason:

FetchError: request to https://registry.npmjs.org/@babel/parser/-/parser-7.24.7.tgz failed, reason:
    at ClientRequest.<anonymous> (/usr/lib/node_modules/pnpm/dist/pnpm.cjs:68502:18)
    at ClientRequest.emit (node:events:519:28)
    at emitErrorEvent (node:_http_client:108:11)
    at TLSSocket.socketErrorListener (node:_http_client:511:5)
    at TLSSocket.emit (node:events:531:35)
    at emitErrorNT (node:internal/streams/destroy:169:8)
    at emitErrorCloseNT (node:internal/streams/destroy:128:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Progress: resolved 1501, reused 469, downloaded 9, added 445
vagrant@ubuntu-jammy:/vagrant/Git/vue-flow$ pnpm i --registry https://registry.npmmirror.com
Scope: all 16 workspace projects
Lockfile is up to date, resolution step is skipped
Packages: +1501
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Downloading typescript@5.4.5: 5.83 MB/5.83 MB, done
Downloading @iconify/json@2.2.241: 72.94 MB/72.94 MB, done
Downloading @quasar/extras@1.16.7: 32.78 MB/32.78 MB, done
Downloading turbo-linux-64@2.0.4: 9.93 MB/9.93 MB, done
Progress: resolved 1501, reused 478, downloaded 1007, added 1054, done
node_modules/.pnpm/@vercel+speed-insights@1.0.12_react@18.2.0_vue-router@4.2.5_vue@3.4.38_typescript@5.4.5___vue@3.4.38_typescript@5.4.5_/node_modules/@vercel/speed-insights: Running postinstall script, done in 390ms
node_modules/.pnpm/esbuild@0.20.1/node_modules/esbuild: Running postinstall script, done in 1.3s
node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild: Running postinstall script, done in 1.3s
node_modules/.pnpm/vue-demi@0.14.10_vue@3.4.38_typescript@5.4.5_/node_modules/vue-demi: Running postinstall script, done in 4.3s
node_modules/.pnpm/esbuild@0.19.4/node_modules/esbuild: Running postinstall script, done in 1.4s
node_modules/.pnpm/esbuild@0.14.51/node_modules/esbuild: Running postinstall script, done in 1.6s
node_modules/.pnpm/vue-demi@0.14.6_vue@3.3.4/node_modules/vue-demi: Running postinstall script, done in 3.8s
node_modules/.pnpm/esbuild@0.18.20/node_modules/esbuild: Running postinstall script, done in 1.4s
node_modules/.pnpm/vue-demi@0.14.10_vue@3.3.4/node_modules/vue-demi: Running postinstall script, done in 3.5s
node_modules/.pnpm/cypress@12.17.4/node_modules/cypress: Running postinstall script, done in 2m 41.1s

devDependencies:
+ @changesets/changelog-github 0.5.0
+ @changesets/cli 2.27.5
+ shx 0.3.4
+ turbo 2.0.4

Done in 9m 10.1s
vagrant@ubuntu-jammy:/vagrant/Git/vue-flow$ pnpm dev
(Seem normal)
LincZero commented 1 hour ago

I tried it again on Windows, and again the results were different from those on ubuntu

Supplement everything I do in the windows powershell：

PS H:\Git\Public\Group_FrontEnd> node -v
v20.10.0
PS H:\Git\Public\Group_FrontEnd> pnpm -v
9.12.2
PS H:\Git\Public\Group_FrontEnd> npm -v
10.2.3
PS H:\Git\Public\Group_FrontEnd> git clone https://github.com/bcakmakoglu/vue-flow.git
Cloning into 'vue-flow'...
remote: Enumerating objects: 34810, done.
remote: Counting objects: 100% (2550/2550), done.
remote: Compressing objects: 100% (1162/1162), done.
remote: Total 34810 (delta 1683), reused 1905 (delta 1339), pack-reused 32260 (from 1)
Receiving objects: 100% (34810/34810), 15.90 MiB | 12.82 MiB/s, done.
Resolving deltas: 100% (24538/24538), done.
PS H:\Git\Public\Group_FrontEnd> cd ./vue-flow
PS H:\Git\Public\Group_FrontEnd\vue-flow> pnpm i --registry https://registry.npmmirror.com
Scope: all 16 workspace projects
Lockfile is up to date, resolution step is skipped
Packages: +1497
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 1497, reused 1481, downloaded 0, added 1497, done

devDependencies:
+ @changesets/changelog-github 0.5.0
+ @changesets/cli 2.27.5
+ shx 0.3.4
+ turbo 2.0.4

Done in 12.8s
PS H:\Git\Public\Group_FrontEnd\vue-flow> pnpm dev
!!!!!!!!!!!!!!!! error !!!!!!!!!!!!!!!!!!!!

what is error:

图片

I have no idea why the same process is not the same as in ubuntu. In particular, the Task List on the left side of the ASCII interface