ERR_ABORTED 504 (Gateway Timeout) while importing a Stencil library in Vite in a Vue application

Question

I am trying to import a custom web component from a web component 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 component removes all errors. This is the link to the library (which I created) I am trying to import from: https://github.com/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 components) 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

restarting the server
deleting and re-installing node_modules
deleting the .vite folder from the node_modules, but this would reappear anyway after a restart
running this command 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 found two related issues in the vite repo: https://github.com/vitejs/vite/discussions/8146 and https://github.com/vitejs/vite/discussions/8749 — Nico Gräf, Mar 09 '23 at 15:41
Out of curiousity, why did you not want to work with CRA again? — U. Watt, May 31 '23 at 05:39

score 2 · Answer 1 · answered Mar 09 '23 at 15:53

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

In the latter issue github user allowing commented 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).

ERR_ABORTED 504 (Gateway Timeout) while importing a Stencil library in Vite in a Vue application

1 Answers1