Add Vite example #22

JustinVoitel · 2021-03-18T23:57:56Z

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

frederikhors · 2021-03-19T00:08:43Z

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

JustinVoitel · 2021-03-19T11:13:32Z

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 · 2021-03-27T17:58:01Z

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 · 2021-04-04T22:34:10Z

@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 · 2021-04-04T23:36:10Z

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

frederikhors · 2021-04-04T23:44:55Z

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 · 2021-04-05T18:51:43Z

@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 [email protected], 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 · 2021-04-05T20:26:21Z

I'm using [email protected] but I don't have that exclude and I don't have that error.

Strange thing!

benwoodward · 2021-05-04T03:03:32Z

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 · 2021-05-16T05:23:18Z

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 · 2021-05-19T16:14:05Z

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

philip-weber · 2021-05-19T16:33:26Z

Upgrading to [email protected] has fixed it for me. I do not need that include anymore. I do still need the that exclude though. It doesn't matter whether svelte-query is a dependency or a devDependecy.

optimizeDeps: {
  exclude: ["@sveltestack/svelte-query"]
}

Just speaking for the [email protected] integration. Haven't testet it with SvelteKit.

benmccann · 2021-05-19T16:43:24Z

I believe that all Svelte components should be listed in optimizeDeps.exclude if you're using Vite and if you use SvelteKit that it will be done automatically so that it should just work out-of-the-box

benmccann · 2021-05-24T16:15:02Z

svelte-query 1.4.1 has been released, which should be fully compatible with SvelteKit, so this issue should be able to be closed

frederikhors · 2021-05-24T21:00:28Z

@JustinVoitel can you close this please?

benwoodward · 2021-05-24T21:27:56Z

Can anyone recommend a client to use with svelte-query that works with SvelteKit? I can't get Prisma's client to work with SvelteKit (due to the lack of ESM) and it doesn't seem very well maintained.

frederikhors · 2021-05-24T22:22:08Z

@benwoodward a client for what?

benwoodward · 2021-05-24T23:10:29Z

Sorry, a graphql client that complements svelte-query. All the graphql clients I've looked at outside of the Prisma one have overlapping concerns and functionality with svelte-query. For example, I could use Apollo client, but it has its own cache and it doesn't look like it's possible to disable it, meaning I'd have two caches (Apollo's and svelte-querys).

benwoodward · 2021-05-29T03:39:25Z

Nevermind, https://github.com/lynxtaa/awesome-graphql-client seems to be a good companion to svelte-query.

JustinVoitel changed the title ~~Add SvelteKit example~~ Add Vite example Mar 19, 2021

Jonzy3000 mentioned this issue May 11, 2021

SvelteKit integration #39

Closed

This was referenced May 16, 2021

Add esm version iliakan/detect-node#17

Merged

Upgrade detect-node pubkey/broadcast-channel#603

Merged

frederikhors mentioned this issue May 20, 2021

Update broadcast-channel #44

Merged

JustinVoitel closed this as completed Nov 15, 2021

Add Vite example #22

Add Vite example #22

Comments

JustinVoitel commented Mar 18, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

frederikhors commented Mar 19, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

JustinVoitel commented Mar 19, 2021

Uh oh!

mattjennings commented Mar 27, 2021

Uh oh!

frederikhors commented Apr 4, 2021

Uh oh!

frederikhors commented Apr 4, 2021

Uh oh!

frederikhors commented Apr 4, 2021

Uh oh!

SomaticIT commented Apr 5, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

frederikhors commented Apr 5, 2021

Uh oh!

benwoodward commented May 4, 2021

Uh oh!

benmccann commented May 16, 2021

Uh oh!

benmccann commented May 19, 2021

Uh oh!

philip-weber commented May 19, 2021

Uh oh!

benmccann commented May 19, 2021

Uh oh!

benmccann commented May 24, 2021

Uh oh!

frederikhors commented May 24, 2021

Uh oh!

benwoodward commented May 24, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

frederikhors commented May 24, 2021

Uh oh!

benwoodward commented May 24, 2021

Uh oh!

benwoodward commented May 29, 2021

Uh oh!

JustinVoitel commented Mar 18, 2021 •

edited

Loading

frederikhors commented Mar 19, 2021 •

edited

Loading

SomaticIT commented Apr 5, 2021 •

edited

Loading

benwoodward commented May 24, 2021 •

edited

Loading