When trying to use graphql-voyager component render fail with message: Failed to load resource: the server responded with a status of 404 (Not Found)

[LizGabriela-RY]

Describe the bug

We are migrating our UI from webpack": "4.41.2" ("node": "^16") to use "vite": "~5.1.4" ("node": "^20",). We have migrated almost all the functionality and components without any issue except "graphql-voyager", we use this as schema visualizer tool running with version "graphql-voyager": "1.0.0-rc.31" however in the vite version we cant make this tool to run due to message mentioned above.
In first instance we tried importing module directly in the component:
import {Voyager} from 'graphql-voyager';
This makes the all app to failed as it did not find a specific library: http://localhost:3000/node_modules/.vite/deps/graphql-voyager.js?v=5ad894e5

After some investigation we try an workaround using vite-plugin-legacy. Adding the following configuration to vite:
import legacy from '@vitejs/plugin-legacy' export default { plugins: [ legacy({ targets: ['defaults', 'not IE 11'] }) ] }
And using dynamic import:
import('graphql-voyager').then((Voyager) => { // Use Voyager here })
This solved the issue of the all app failing however still thrown similar imessage when trying to navigate to the specific component that use Voyager. Message in this case will be:
Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:3000/node_modules/.vite/deps/graphql-voyager.js?v=488bd6e1

Note in both cases file and folder exist in node_modules but it seems it is not recognise or process by vite. We have tried from "graphql-voyager": "1.0.0-rc.31" to lates available "graphql-voyager": "^2.0.0".

Reproduction

https://stackblitz.com/edit/vitejs-vite-uvwuz8?file=main.js

Steps to reproduce

Try adding directly the import to the graphql-voyager or import dynamically after setting vite-plugin-legacy

System Info

System:
    OS: Windows Server 2016 10.0.14393
    CPU: (8) x64 Intel(R) Xeon(R) CPU E3-1565L v5 @ 2.50GHz
    Memory: 43.55 GB / 63.87 GB
  npmPackages:
    @fortawesome/fontawesome-svg-core: ^6.5.1 => 6.5.1
    @fortawesome/free-brands-svg-icons: ^6.5.1 => 6.5.1
    @fortawesome/free-regular-svg-icons: ^6.5.1 => 6.5.1
    @fortawesome/free-solid-svg-icons: ^6.5.1 => 6.5.1
    @fortawesome/react-fontawesome: ^0.2.0 => 0.2.0
    @graphiql/plugin-explorer: ^1.0.3 => 1.0.3
    @graphiql/react: ^0.20.3 => 0.20.3
    @graphiql/toolkit: ^0.9.1 => 0.9.1
    @moneta/moneta-bootstrap: ~5.3.1 => 5.3.1
    @moneta/moneta-web-react: ~18.1.1 => 18.1.1
    @testing-library/jest-dom: ~6.4.2 => 6.4.2
    @testing-library/react: ~14.2.1 => 14.2.1
    @testing-library/user-event: ~14.5.2 => 14.5.2
    @vitejs/plugin-legacy: ^5.3.2 => 5.3.2
    @vitejs/plugin-react: ~4.2.1 => 4.2.1
    @vitest/coverage-v8: ~1.3.1 => 1.3.1
    axios: ^1.6.7 => 1.6.7
    babel-loader: ^9.1.3 => 9.1.3
    babel-plugin-macros: ^3.1.0 => 3.1.0
    codemirror: ^5.65.15 => 5.65.15
    codemirror-graphql: ^2.0.10 => 2.0.10
    cross-env: ~7.0.3 => 7.0.3
    cuid: ^2.1.8 => 2.1.8
    eslint: ~8.56.0 => 8.56.0
    eslint-plugin-react: ~7.33.2 => 7.33.2
    eslint-plugin-react-hooks: ~4.6.0 => 4.6.0
    eslint-plugin-react-refresh: ~0.4.5 => 0.4.5
    eslint-plugin-vitest-globals: ~1.4.0 => 1.4.0
    file-saver: ^2.0.5 => 2.0.5
    graphiql: ^3.1.1 => 3.1.1
    graphql: ^16.8.1 => 16.8.1
    graphql-voyager: ^2.0.0 => 2.0.0
    highlight.js: ^11.9.0 => 11.9.0
    jsdom: ~24.0.0 => 24.0.0
    lodash: ^4.17.21 => 4.17.21
    markdown-to-jsx: 7.4.4 => 7.4.4
    moment: ^2.30.1 => 2.30.1
    object-hash: 3.0.0 => 3.0.0
    query-string: ^8.2.0 => 8.2.0
    react: ~18.2.0 => 18.2.0
    react-csv: ^2.2.2 => 2.2.2
    react-datetime: 3.2.0 => 3.2.0
    react-dom: ~18.2.0 => 18.2.0
    react-redux: ^9.1.0 => 9.1.0
    react-router-dom: ~6.22.0 => 6.22.0
    react-stars: ^2.2.5 => 2.2.5
    react-syntax-highlighter: ^15.5.0 => 15.5.0
    react-tabs: ^5.1.0 => 5.1.0
    react-toastify: ^10.0.4 => 10.0.4
    reactstrap: ~9.2.1 => 9.2.1
    sass: ~1.71.0 => 1.71.0
    styled-components: ^6.1.8 => 6.1.8
    vite: ~5.1.4 => 5.1.4
    vite-plugin-babel-macros: ^1.0.6 => 1.0.6
    vite-plugin-markdown: ^2.2.0 => 2.2.0
    vitest: ~1.3.1 => 1.3.1
    vitest-fetch-mock: ~0.2.2 => 0.2.2
    vitest-sonar-reporter: ~1.1.0 => 1.1.0

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-uvwuz8 (Open reproduction)

[sapphi-red]

I opened the reproduction but no error happened.

[github-actions]

Hello @LizGabriela-RY. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs reproduction will be closed if they have no activity within 3 days.