javascript - ERR_ABORTED 504 (Gateway Timeout) while importing a Stencil library in Vite in a Vue application - Stack Overflow

admin管理员组

文章数量:1416631

I am trying to import a custom web ponent from a web ponent library built with StencilJS in my Vue application created with Vite (version 4.0.4). This is the code in my main.js file:

import { createApp } from 'vue';
import App from './App.vue';
import { defineCustomElements } from '@arnab7/cheesejs/loader';

createApp(App).mount('#app');

defineCustomElements(window);

In my App.vue, this is what is ausing the issue:

<template>
  <div id="body">
    <checker-board></checker-board>
  </div>
</template>

The <checker-board></checker-board> is causing the error. The full error text is:

"GET http://localhost:5174/node_modules/.vite/deps/checker-board.entry.js?import net::ERR_ABORTED 504 (Gateway Timeout) TypeError: Failed to fetch dynamically imported module: http://localhost:5174/node_modules/.vite/deps/checker-board.entry.js?import undefined index-e0c21bd2.js:917 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isProxied') at initializeComponent (index-e0c21bd2.js:917:23)"

Removing the web ponent removes all errors. This is the link to the library (which I created) I am trying to import from: I have followed all the instrutions from Stencil docs while building it and do not see any issue with the library itself. I have seen some similar issues with other libraries as well. However, this library is lazy loaded (Stencil lazy loads all the ponents) which might be causing the issue with Vite.

I have looked at many similar issues and tried multiple solutions with no success

There are some similar issues on Github where Vite throws this error for other dependencies as well. I followed the suggested solutions but none of them worked. I tried

1. restarting the server

2. deleting and re-installing node_modules

3. deleting the .vite folder from the node_modules, but this would reappear anyway after a restart

4. running this mand which I found on github that solved someone's issue: node ./node_modules/esbuild/install.js

I have also seen this very similar question: Importing Bootstrap to Vue 3 causes net::ERR_ABORTED 504 (Gateway Timeout) where restarting and re-installing node_modules fixed the issues. I have tried the solutions but it does not work for me.

I don't know what else to do. Someone please help me.

Edit:

Just to make sure that the problem was on Vite's end and not the library's end, I quickly created a Create React App and tested it there. It works perfectly. So at least I have a solution, but unfortunately it seems like I have to use CRA now which I really didn't want to touch ever again. Anyone have any solution for Vite please?

I am trying to import a custom web ponent from a web ponent library built with StencilJS in my Vue application created with Vite (version 4.0.4). This is the code in my main.js file:

import { createApp } from 'vue';
import App from './App.vue';
import { defineCustomElements } from '@arnab7/cheesejs/loader';

createApp(App).mount('#app');

defineCustomElements(window);

In my App.vue, this is what is ausing the issue:

<template>
  <div id="body">
    <checker-board></checker-board>
  </div>
</template>

The <checker-board></checker-board> is causing the error. The full error text is:

"GET http://localhost:5174/node_modules/.vite/deps/checker-board.entry.js?import net::ERR_ABORTED 504 (Gateway Timeout) TypeError: Failed to fetch dynamically imported module: http://localhost:5174/node_modules/.vite/deps/checker-board.entry.js?import undefined index-e0c21bd2.js:917 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isProxied') at initializeComponent (index-e0c21bd2.js:917:23)"

Removing the web ponent removes all errors. This is the link to the library (which I created) I am trying to import from: https://github./arnab4477/CheeseJS I have followed all the instrutions from Stencil docs while building it and do not see any issue with the library itself. I have seen some similar issues with other libraries as well. However, this library is lazy loaded (Stencil lazy loads all the ponents) which might be causing the issue with Vite.

I have looked at many similar issues and tried multiple solutions with no success

There are some similar issues on Github where Vite throws this error for other dependencies as well. I followed the suggested solutions but none of them worked. I tried

1. restarting the server

2. deleting and re-installing node_modules

3. deleting the .vite folder from the node_modules, but this would reappear anyway after a restart

4. running this mand which I found on github that solved someone's issue: node ./node_modules/esbuild/install.js

I have also seen this very similar question: Importing Bootstrap to Vue 3 causes net::ERR_ABORTED 504 (Gateway Timeout) where restarting and re-installing node_modules fixed the issues. I have tried the solutions but it does not work for me.

I don't know what else to do. Someone please help me.

Edit:

Just to make sure that the problem was on Vite's end and not the library's end, I quickly created a Create React App and tested it there. It works perfectly. So at least I have a solution, but unfortunately it seems like I have to use CRA now which I really didn't want to touch ever again. Anyone have any solution for Vite please?

• javascript
• vue.js
• vite
• stenciljs
• http-status-code-504

Share Improve this question Follow edited Jan 27, 2023 at 22:50 arnab4477 asked Jan 27, 2023 at 21:54 arnab4477arnab4477 3111 silver badge33 bronze badges 3

• 1 do you found a solution for that? I have the same problem – Saeid Doroudi Commented Mar 8, 2023 at 14:38
• I found two related issues in the vite repo: github./vitejs/vite/discussions/8146 and github./vitejs/vite/discussions/8749 – Nico Gräf Commented Mar 9, 2023 at 15:41
• Out of curiousity, why did you not want to work with CRA again? – U. Watt Commented May 31, 2023 at 5:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Here are two related issues/discussions on vite's github repo:

1. Intermittent HTTP 504 Gateway timeouts fixed by restarts
2. Error: spawn C:..\node_modules\esbuild\esbuild.exe ENOENT

In the latter issue github user allowing mented a solution (link):

Run node ./node_modules/esbuild/install.js

and github user evanw added (link):

It turns out npm v7 has a bug that corrupts package-lock.json files: npm/cli#2606. When this happens, packages like esbuild with post install scripts can break. You may be experiencing this bug. A workaround is to delete and recreate your package-lock.json file.

This solved it for me (and others).

本文标签：