Vite: `Uncaught TypeError: setHelperManager is not a function` with the standard environment-ember

[johanrd]

Repository for reproduction: https://github.com/johanrd/glimmer-apollo-vite
• Run pnpm start and open your localhost.
• See error in console:

Vite: Uncaught TypeError: `setHelperManager `is not a function

I guess this is related to @lifeart's issue with glimmer-x #45, but I am not sure how to bypass the error with the environment-ember, as environment-ember is not imported directly there (as it is with glimmer-x).

I am not even sure if this is related to SSR: The reproduction is basically created by running @NullVoxPopuli's great little ember-vite-blueprint (npx ember-cli@latest new glimmer-apollo-vite --blueprint @nullvoxpopuli/ember-vite-app --pnpm --typescript) + the steps in the glimmer-apollo readme.

Thanks,
johan

[johanrd]

For reference, it works if I add import glimmer-apollo/environment-ember to apollo.ts. to make it run in vite.

Only change necessary in the readme, to run in vite:

+import 'glimmer-apollo/environment-ember';
import { setClient } from 'glimmer-apollo';
import {
  ApolloClient,
  InMemoryCache,
  createHttpLink
} from '@apollo/client/core';

export default function setupApolloClient(context: object): void {
  // HTTP connection to the API
  const httpLink = createHttpLink({
    uri: 'http://localhost:3000/graphql'
  });

  // Cache implementation
  const cache = new InMemoryCache();

  // Create the apollo client
  const apolloClient = new ApolloClient({
    link: httpLink,
    cache
  });

  // Set default apollo client for Glimmer Apollo
  setClient(context, apolloClient);
}

Not sure if that should be included as a general step in the readme

[josemarluedke]

In Ember, we rely on initializers to import that file by default. The last time I saw the Vite app template, it did not have the initializes there. If initializers are added, then the import above is not needed, otherwise, it is.

[NullVoxPopuli]

it supports initializers -- via the compat-modules virtual module

[balinterdi]

We had the same error in an 5.12 Ember app , but even adding the import 'glimmer-apollo/environment-ember' line in app/app.ts (or in our Apollo service) didn't fix it, we still had the error.

Something must call setHelperManager very early, before that import was executed and line had a chance of setting setHelperManager (and the other functions that either Ember or Glimmer provides) via the setEnviromentContext function.

We ended up patching the index.js file in the output by explicitly importing the ember environment on the first line:

import './environment-ember.js';

Not nice at all, but we couldn't find another way.

[johanrd]

@balinterdi when i look at it, i actually import import 'glimmer-apollo/environment-ember' 'manually' two places, both in apollo.ts and in application.ts:

// application.ts

import setupApolloClient from '../apollo'
+ import 'glimmer-apollo/environment-ember'

// apollo.ts

+ import 'glimmer-apollo/environment-ember'
import { setClient } from 'glimmer-apollo'

[balinterdi]

@balinterdi when i look at it, i actually import import 'glimmer-apollo/environment-ember' 'manually' two places, both in apollo.ts and in application.ts:

@johanrd Thank you for checking this.

I presume your application.ts is an initializer, and your apollo.ts is a service?

Our setup is different: we have a base service and two services that extend it (for different client configurations), and we call the setClient method in 'glimmer-apollo' from the constructor of those services.

That said, I tried importing both in app/app.ts and in the base service but I still get the same error.

[balinterdi]

All right, for anyone reading this, I managed to solve it the following way:

// This import needs to come before the other apollo-related ones
import 'glimmer-apollo/environment-ember';

import { ApolloClient, createHttpLink, from } from '@apollo/client/core';
import { setContext } from '@apollo/client/link/context';
import type Owner from '@ember/owner';
import { service } from '@ember/service';
import { setClient } from 'glimmer-apollo';

import ApolloBaseService from './apollo-base';

export default class ApolloService extends ApolloBaseService {
  @service declare config: ConfigService;

  name = 'default';

  constructor(owner: Owner) {
    super(owner);

    setClient(this, this.apolloClient(), this.name);
  }

  (...)
}

@johanrd Thank you for nudging me to try harder :)

[johanrd]

@balinterdi 👍

For reference: With v0.7.0, the environment import can be removed completely in ember app code.