vitejs / vite

Next generation frontend tooling. It's fast!
http://vite.dev
MIT License
68.55k stars 6.19k forks source link

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) #16681

Open LizGabriela-RY opened 6 months ago

LizGabriela-RY commented 6 months ago

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

stackblitz[bot] commented 6 months ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

sapphi-red commented 2 days ago

I opened the reproduction but no error happened.

github-actions[bot] commented 2 days ago

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.