kesne / svelte-relay

Easily use GraphQL in Svelte, powered by the production-ready Relay runtime.
https://kesne.github.io/svelte-relay/
108 stars 5 forks source link

Error: Function called outside component initialization #39

Closed smmoosavi closed 2 years ago

smmoosavi commented 3 years ago

I started a default svelte app and added svelte-relay, and then I got this error. Did I miss any things?

error:

index.js:652 Uncaught Error: Function called outside component initialization
    at get_current_component (index.js:652)
    at Object.setContext (index.js:682)
    at Object.setRelayEnvironment (context.js:7)
    at instance (environment.ts:9)
    at init (index.mjs:1472)
    at new App (environment.ts:9)
    at main.ts:3
    at main.ts:6

app.svelte:

<script lang="ts">
  import { setRelayEnvironment } from 'svelte-relay';
  import { environment } from '../core/relay/environment';

  setRelayEnvironment(environment);
</script>

<div>hi</div>

environment.ts:

import { Environment, Network, RecordSource, Store } from 'relay-runtime';
import { fetchQuery } from './fetchQuery';
import { missingFieldHandlers } from './helpers/missingFieldHandlers';

export const environment = new Environment({
  network: Network.create(fetchQuery),
  store: new Store(new RecordSource()),
  missingFieldHandlers,
});

main.ts:

import App from 'src/app/App';

const app = new App({
  target: document.body,
  props: {},
});

export default app;

package.json dependencies:

  "dependencies": {
    "relay-runtime": "^10.1.3",
    "sirv-cli": "^1.0.0",
    "svelte-relay": "^0.0.2",
    "svelte-routing": "^1.5.0"
  }

Also, I have to add the replace plugin to the rollup config.

  plugins: [
    svelte({
      preprocess: sveltePreprocess(),
      compilerOptions: {
        // enable run-time checks when not in production
        dev: !production,
      },
    }),
+    replace({
+      'process.env.NODE_ENV': JSON.stringify(production ? 'production' : 'development'),
+    }),
    // we'll extract any component CSS out into
    // a separate file - better for performance
    css({ output: 'bundle.css' }),
smmoosavi commented 3 years ago

A minimal repo to reproduce the error.

driekus77 commented 3 years ago

I'm having this issue also. Could it be typescript related?

kesne commented 3 years ago

Probably a svelte version mismatch. I believe svelte should be a peerDependency of the library instead of a direct dependency.

kesne commented 3 years ago

I believe this should be fixed in the latest release.