Add Vite example

[JustinVoitel]

It would be nice if there would be any reference on how to use svelte-query with Vite.

[frederikhors]

Although SvelteKit is still in alpha and still a long way from beta.

[JustinVoitel]

That might be true 😅 Then lets rearrange this issue to add a vite example since they recently added an official svelte template! npm init @vitejs/app will give you the option

[mattjennings]

SvelteKit beta is out now, and it seems that the detect-node package does not play well with vite. The following error happens when trying to follow the quick start example

ReferenceError: module is not defined
    at /node_modules/detect-node/browser.js?v=97837723:1:1
    at instantiateModule (/Users/mattjennings/dev/svelte-rt/node_modules/vite/dist/node/chunks/dep-0776dd57.js:68919:166) (x2)
node:internal/process/promises:245
          triggerUncaughtException(err, true /* fromPromise */);
          ^

ReferenceError: module is not defined
    at /node_modules/detect-node/browser.js?v=97837723:1:1
    at instantiateModule (/Users/mattjennings/dev/svelte-rt/node_modules/vite/dist/node/chunks/dep-0776dd57.js:68919:166)

I tried adding detect-node to vite's optimizeDeps.include, and got this error instead

[vite] Error when evaluating SSR module /node_modules/unload/dist/es/index.js?v=929ed723:
TypeError: Cannot create proxy with a non-object as target or handler
    at nodeRequire (/Users/mattjennings/dev/svelte-rt/node_modules/vite/dist/node/chunks/dep-0776dd57.js:68936:12)
    at ssrImport (/Users/mattjennings/dev/svelte-rt/node_modules/vite/dist/node/chunks/dep-0776dd57.js:68891:20)
    at eval (/node_modules/unload/dist/es/index.js?v=929ed723:3:31)
    at instantiateModule (/Users/mattjennings/dev/svelte-rt/node_modules/vite/dist/node/chunks/dep-0776dd57.js:68919:166) (x2)
TypeError: Cannot create proxy with a non-object as target or handler
    at nodeRequire (/Users/mattjennings/dev/svelte-rt/node_modules/vite/dist/node/chunks/dep-0776dd57.js:68936:12)
    at ssrImport (/Users/mattjennings/dev/svelte-rt/node_modules/vite/dist/node/chunks/dep-0776dd57.js:68891:20)
    at eval (/node_modules/unload/dist/es/index.js?v=929ed723:3:31)
    at instantiateModule (/Users/mattjennings/dev/svelte-rt/node_modules/vite/dist/node/chunks/dep-0776dd57.js:68919:166)
node:internal/process/promises:245
          triggerUncaughtException(err, true /* fromPromise */);
          ^

TypeError: Cannot create proxy with a non-object as target or handler
    at nodeRequire (/Users/mattjennings/dev/svelte-rt/node_modules/vite/dist/node/chunks/dep-0776dd57.js:68936:12)
    at ssrImport (/Users/mattjennings/dev/svelte-rt/node_modules/vite/dist/node/chunks/dep-0776dd57.js:68891:20)
    at eval (/node_modules/unload/dist/es/index.js?v=929ed723:3:31)
    at instantiateModule (/Users/mattjennings/dev/svelte-rt/node_modules/vite/dist/node/chunks/dep-0776dd57.js:68919:166)

[frederikhors]

@mattjennings I'm here too.

The problem I'm having is a different error in console:

(node:12920) UnhandledPromiseRejectionWarning: Error: Cannot find module '../../src/methods/node.js'
Require stack:
- C:\kit\node_modules\@sveltestack\svelte-query\dist\index.js
- C:\kit\node_modules\vite\dist\node\chunks\dep-66eb515d.js
- C:\kit\node_modules\vite\dist\node\index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at C:\kit\node_modules\@sveltestack\svelte-query\dist\index.js:3101:24
    at C:\kit\node_modules\@sveltestack\svelte-query\dist\index.js:2:68
    at Object.<anonymous> (C:\kit\node_modules\@sveltestack\svelte-query\dist\index.js:5:2)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:12920) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:12920) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
12:28:16 AM [vite] Failed to load source map for /node_modules/@sveltestack/svelte-query/svelte/queryClientProvider/QueryClientProvider.svelte.
12:28:16 AM [vite] Failed to load source map for /node_modules/@sveltestack/svelte-query/svelte/query/Query.svelte.
12:28:16 AM [vite] Failed to load source map for /node_modules/@sveltestack/svelte-query/svelte/infiniteQuery/InfiniteQuery.svelte. 12:28:16 AM [vite] Failed to load source map for /node_modules/@sveltestack/svelte-query/svelte/queries/Queries.svelte.
12:28:16 AM [vite] Failed to load source map for /node_modules/@sveltestack/svelte-query/svelte/isFetching/IsFetching.svelte.
12:28:16 AM [vite] Failed to load source map for /node_modules/@sveltestack/svelte-query/svelte/isMutating/IsMutating.svelte.
12:28:16 AM [vite] Failed to load source map for /node_modules/@sveltestack/svelte-query/svelte/mutation/Mutation.svelte.
12:28:16 AM [vite] Failed to load source map for /node_modules/@sveltestack/svelte-query/svelte/hydration/Hydrate.svelte.

Maybe this is your problem too?

@amen-souissi anyway I think we need to understand why is there this code in dist/index.min.js:

...var $t=require("../../src/methods/node.js");....

[frederikhors]

I moved "@sveltestack/svelte-query": "1.3.0" from devDependencies to dependencies and now I have @mattjennings error.

[frederikhors]

I found a work-around:

add this to svelte.config.cjs under kit > vite:

optimizeDeps: {
  include: ['detect-node', 'broadcast-channel']
},

Can you confirm it works?

How can we fix this, @amen-souissi?

[SomaticIT]

@frederikhors, this workaround seems to work.

I don't understand why vite does not detect this dependencies as part of its dependency detection and pre-bundling process. Maybe this issue should be reported on vite or vite-plugin-svelte repository.

What do you think?

Update:
When using vite@2.1.5, vite bundle all svelte dependencies, which cause an issue with svelte-query: Function called outside component initialization. You need to configure vite with the following snippet:

optimizeDeps: {
  exclude: ['@sveltestack/svelte-query'],
  include: ['broadcast-channel']
},

[frederikhors]

I'm using vite@2.1.5 but I don't have that exclude and I don't have that error.

Strange thing!

[benwoodward]

I was getting the following error with SvelteKit after adding svelte-query:

500
require is not defined

ReferenceError: require is not defined
    at /node_modules/broadcast-channel/dist/es/method-chooser.js:19:20
    at instantiateModule (/Users/ben/dev/language-platform/fluentenglish/node_modules/vite/dist/node/chunks/dep-2c03f3f9.js:69066:166)

Adding the optimizeDeps config fixed this issue for me, thanks.

const preprocess = require('svelte-preprocess');

/** @type {import('@sveltejs/kit').Config} */
module.exports = {
  // 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',
    vite: {
      optimizeDeps: {
        include: ['detect-node', 'broadcast-channel']
      }
    }
  }
};

[benmccann]

I'm surprised that you would have to add broadcast-channel to optimizeDeps because it already distributes an ESM version:

https://github.com/pubkey/broadcast-channel/blob/53a3f5d56c77ea252289661b4febd2d2196a7904/package.json#L29

Maybe it's because it has a dependency on detect-node which is not distributed as ESM that it's causing an issue. Can you get away with only including detect-node in optimizeDeps?

[benmccann]

detect-node 2.1.0 now has an ESM version. Can anyone who hit this issue check if it is now fixed?