Infinite refresh running vite with SvelteKit #2021

mmarchois · 2021-07-27T14:18:05Z

Describe the bug

I have an inifinite refresh when opened in the browser with vitejs and sveltekit

[vite] new dependencies found: js-cookie, updating...
[vite] ✨ dependencies updated, reloading page...

Reproduction

Install dependencies with npm install
Start app using npm run dev or yarn dev
Open the app in a browser

Logs

No response

System Info

vite version: 2.4.3
sveltekit: 1.0.0-next.137
@sveltejs/vite-plugin-svelte: 1.0.0-next.14
Operating System: ubuntu
Node version: v14.17
Package manager: npm 7.20.1

Severity

blocking all usage of SvelteKit

Additional Information

No response

The text was updated successfully, but these errors were encountered:

Conduitry · 2021-07-27T14:22:27Z

What URL are you visiting to see the app? I'm seeing this refreshing with http://127.0.0.1:3000/ but it works fine with http://localhost:3000/

mmarchois · 2021-07-27T14:24:32Z

@Conduitry I'm trying both, randomly it works :(

Conduitry · 2021-07-27T14:27:27Z

2.4.4 is the most recent version of Vite now, by the way, not 2.4.3.

mmarchois · 2021-07-27T14:29:37Z

I have setup the project 4 days ago with the command npm init svelte@next . I'll try vite 2.4.4.

mmarchois · 2021-07-27T14:33:32Z

@Conduitry i have npm ERR! notarget No matching version found for [email protected].

dominikg · 2021-07-28T12:07:24Z

@mmarchois i noticed you have filed a similar issue on vites repository vitejs/vite#4406 please don't cross-post or at least mention the other issues if you do. Not everyone is following both repos and missing information from one side may cause extra work.

If you are not sure where to file an issue, you can ask on svelte discord

dominikg · 2021-07-28T13:11:56Z

Can't reproduce with pnpm init svelte@next

Please provide a repository and detailed steps on how to reproduce the issue if possible.
It would also help if you posted debug logs from while it's happening.
To enable debug logging, start it like this: DEBUG="vite:*" npm run dev

Flave · 2021-08-03T10:40:59Z

I'm experiencing the same issue. I have no possible explanation but it occurs after a clean install with npm init svelte@next my-app and then installing and importing d3-scale (import {scaleLinear} from 'd3-scale';) into src/routes/index.svelte. I tried other node modules but so far only d3-scale caused this issue.

dominikg · 2021-08-03T19:57:22Z

adding d3-scale to a fresh skeleton project's index.svelte does not cause ininite reload for me, it causes a http 500 error.

@Flave , @mmarchois

Please provide a link to a repository where this problem is reproducible. It would also help if you provided logs of when it's happening. You can use DEBUG="vite:*" npm run dev to start the devserver and don't forget to also include browser console output.

this may be a vite issue, see vitejs/vite#4463

mmarchois · 2021-08-06T10:30:26Z

@dominikg
It is noted that the production build works perfectly...
I don't have access to the browser console, it runs indefinitely then ends on a 504

dominikg · 2021-08-06T10:47:43Z

504 hints at a network setup issue though i wonder how that could happen on localhost.

I also find it hard to believe that you don't have access to console logs or browser logs during dev. Unless you start to provide the information i've asked for twice, i'm not going to respond here anymore.

frederikhors · 2021-08-07T15:09:13Z

Same here. If you add a dep or event change package.json or package-lock.json manually it re-compile all "temp" files.

For it to work I need to stop and restart npm run dev many times!

mmarchois · 2021-08-09T08:20:51Z

@dominikg For privacy reasons I can't share code :(
It's like the nodejs event loop is not responding anymore.
I can share the logs of the DEBUG="vite:*" npm run dev command

mmarchois · 2021-08-09T08:27:36Z

We always have this kind of logs dependencies updated, reloading page

10:25:53 [vite] new dependencies found: uuid, rfplayer-plugin-hls-adapter, rfplayer-plugin-html5-sound-adapter/src/index, rfplayer-plugin-live-api, rfplayer-plugin-kirby, rfplayer-plugin-smarttag, rfplayer/dist/rfplayer, updating...
10:25:53 [vite] ✨ dependencies updated, reloading page...

Does this have anything to do with https://vitejs.dev/guide/dep-pre-bundling.html

frederikhors · 2021-08-09T09:14:22Z

We always have this kind of logs dependencies updated, reloading page
10:25:53 [vite] new dependencies found: uuid, rfplayer-plugin-hls-adapter, rfplayer-plugin-html5-sound-adapter/src/index, rfplayer-plugin-live-api, rfplayer-plugin-kirby, rfplayer-plugin-smarttag, rfplayer/dist/rfplayer, updating...
10:25:53 [vite] ✨ dependencies updated, reloading page...
Does this have anything to do with https://vitejs.dev/guide/dep-pre-bundling.html

Same here. I need to stop server many times before I can work. Everytime I change a dependency. Very bad.

elfakamal · 2021-08-09T16:51:22Z

@dominikg Same issue here, we have so many 504 errors, it must come from the fact that the event loop is blocked or something, anyway, we can't make requests to the server any more.

when we run it in production mode (svelte-kit build), it works.

ntchou · 2021-08-09T22:14:41Z

Same here. I tried to stop and start server many times. It doesn't work. Like @elfakamal in production mode it works. With DEBUG=vite:* i don't have any more information about the issue

anglol · 2021-08-10T08:41:19Z

Hi,
Same problem here. The application keeps reloading and updating new dependencies with each npm run dev. In the browser, I have infinite loading that ends in 504 error.

Everything is working with npm run build / npm run preview

frederikhors · 2021-08-10T09:18:58Z

1.0.0-next.146 fixes the issue for me (Windows 10).

I think that now I will cry with happiness.

frederikhors · 2021-08-10T09:19:39Z

@mmarchois try 146 and close this issue. It works!

mmarchois · 2021-08-10T09:36:43Z

@frederikhors Same issue with 146. To make it work, I need to comment out the import of an external library

frederikhors · 2021-08-10T09:37:44Z

@mmarchois with 146 it works for me. I'm crying with happiness.

Can you post your svelte.config.js?

mmarchois · 2021-08-10T09:39:15Z

@frederikhors my svelte.config.js :

import preprocess from 'svelte-preprocess';
import svelteKitNodeAdapter from '@sveltejs/adapter-node';
import postcssImport from 'postcss-import';
import postcssMixins from 'postcss-mixins';
import postcssNested from 'postcss-nested';
import postcssCustomMedia from 'postcss-custom-media';
import postcssCustomProperties from 'postcss-custom-properties';
import autoprefixer from 'autoprefixer';
import postcssPresetEnv from 'postcss-preset-env';
import postcssGlobalNested from 'postcss-global-nested';
import cssnano from 'cssnano';
import precompileIntl from 'svelte-intl-precompile/sveltekit-plugin.js';

import { resolve } from 'path';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: preprocess({
    postcss: {
      plugins: [
        postcssImport(),
        postcssMixins,
        autoprefixer,
        postcssCustomMedia({
          importFrom: [
            './src/assets/styles/__customMedia.css',
          ]
        }),
        postcssCustomProperties(),
        postcssPresetEnv({
          stage: 3,
          features: {
            'nesting-rules': true,
          },
        }),
        postcssNested(),
        postcssGlobalNested(),
        cssnano({
          preset: 'default',
        }),
      ],
    }
  }),
  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
    adapter: svelteKitNodeAdapter(),
    vite: {
      plugins: [
        precompileIntl('locales'),
      ],
      resolve: {
        alias: {
          assets: resolve('./src/assets'),
          components: resolve('./src/components'),
          helpers: resolve('./src/helpers'),
          lib: resolve('./src/lib'),
          auth: resolve('./src/auth'),
          pages: resolve('./src/pages'),
          providers: resolve('./src/providers'),
          repositories: resolve('./src/repositories'),
          services: resolve('./src/services'),
          src: resolve('./src'),
          stores: resolve('./src/stores'),
        }
      }
    }
  },
};

export default config;

frederikhors · 2021-08-10T09:42:06Z

I don't know.

Can you please remove everything (node_modules, package-lock.json, svelte dirs)?

You can use git clean -fdx (please be aware this remove everything not commited).

mmarchois · 2021-08-10T10:09:16Z

I remove all of them, but nothing change :(
Can you share your svelte config ?

frederikhors · 2021-08-10T10:46:04Z

It is simple:

import preprocess from "svelte-preprocess";
import adapter from "@sveltejs/adapter-static";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: preprocess(),

  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: "#svelte",

    adapter: adapter({
      fallback: "200.html",
    }),

    vite: {
      optimizeDeps: {
        include: ["broadcast-channel"],
      },
    },

    ssr: false,

    appDir: "app",
  },
};

export default config;

mmarchois · 2021-08-10T10:54:40Z

we removed an external dependency and the project build again. I'm going to dig into this to find out why (esm?)

frederikhors · 2021-08-10T10:55:26Z

I don't know but 146 fixes all my issues! :)

niketpathak · 2021-08-12T14:34:21Z

When I delete the folders node_modules/.vite as well as .svelte-kit, and then rebuild, it seems to work again. However, I am required to do this each time the inifinite refresh occurs which is quite often and which is pretty frustrating too!

frederikhors · 2021-08-12T17:23:07Z

@niketpathak this was before 146 for me.

niketpathak · 2021-08-13T09:05:01Z

@frederikhors , I am already on SvelteKit v1.0.0-next.146 and that doesn't change anything for me. There are no logs either (neither in the terminal nor in the browser), so unable to pinpoint the cause.

frederikhors · 2021-08-13T09:22:03Z

Windows or what? Node version?

niketpathak · 2021-08-13T13:52:40Z

I'm on Ubuntu 20.04 running Node 14.17 LTS

bluwy · 2021-08-13T14:12:30Z

Please set up a repro (ideally a github repo) to save everyone's time, as requested by dominik many times.

niketpathak · 2021-08-13T14:25:45Z

yep, gonna do that! Thanks!

niketpathak · 2021-08-18T15:35:18Z

hello, a quick update, I tried to create a new repo to try to reproduce the issue, however, I wasn't able to reproduce it. Also, after having updated to SvelteKit v1.0.0-next.151, the problem seems to have gone away! So I won't be digging deeper into it anymore!

benmccann · 2021-08-20T16:48:20Z

Given that there is no reproduction for this issue and multiple people have reported the problem solved I'm going to close this. If you're still hitting the issue please file a new issue with a reproduction. There's no way for us to investigate this bug otherwise

Conduitry added the pending clarification label Jul 27, 2021

benmccann added the vite label Aug 10, 2021

techniq mentioned this issue Aug 20, 2021

Cannot find module @sveltejs/kit/hooks in dev server #2237

Closed

benmccann closed this as completed Aug 20, 2021

Infinite refresh running vite with SvelteKit #2021

Infinite refresh running vite with SvelteKit #2021

Comments

mmarchois commented Jul 27, 2021 • edited Loading

Describe the bug

Reproduction

Logs

System Info

Severity

Additional Information

Conduitry commented Jul 27, 2021

mmarchois commented Jul 27, 2021 • edited Loading

Conduitry commented Jul 27, 2021

mmarchois commented Jul 27, 2021

mmarchois commented Jul 27, 2021

dominikg commented Jul 28, 2021

dominikg commented Jul 28, 2021

Flave commented Aug 3, 2021

dominikg commented Aug 3, 2021

mmarchois commented Aug 6, 2021 • edited Loading

dominikg commented Aug 6, 2021

frederikhors commented Aug 7, 2021

mmarchois commented Aug 9, 2021

mmarchois commented Aug 9, 2021 • edited Loading

frederikhors commented Aug 9, 2021

elfakamal commented Aug 9, 2021 • edited Loading

ntchou commented Aug 9, 2021 • edited Loading

anglol commented Aug 10, 2021 • edited Loading

frederikhors commented Aug 10, 2021

frederikhors commented Aug 10, 2021 • edited Loading

mmarchois commented Aug 10, 2021

frederikhors commented Aug 10, 2021

mmarchois commented Aug 10, 2021

frederikhors commented Aug 10, 2021

mmarchois commented Aug 10, 2021

frederikhors commented Aug 10, 2021

mmarchois commented Aug 10, 2021

frederikhors commented Aug 10, 2021

niketpathak commented Aug 12, 2021

frederikhors commented Aug 12, 2021

niketpathak commented Aug 13, 2021 • edited Loading

frederikhors commented Aug 13, 2021

niketpathak commented Aug 13, 2021

bluwy commented Aug 13, 2021 • edited Loading

niketpathak commented Aug 13, 2021

niketpathak commented Aug 18, 2021

benmccann commented Aug 20, 2021 • edited Loading

mmarchois commented Jul 27, 2021 •

edited

Loading

mmarchois commented Jul 27, 2021 •

edited

Loading

mmarchois commented Aug 6, 2021 •

edited

Loading

mmarchois commented Aug 9, 2021 •

edited

Loading

elfakamal commented Aug 9, 2021 •

edited

Loading

ntchou commented Aug 9, 2021 •

edited

Loading

anglol commented Aug 10, 2021 •

edited

Loading

frederikhors commented Aug 10, 2021 •

edited

Loading

niketpathak commented Aug 13, 2021 •

edited

Loading

bluwy commented Aug 13, 2021 •

edited

Loading

benmccann commented Aug 20, 2021 •

edited

Loading