Issues with Apollo and GraphQL

[FatemehFathi]

Hello,

When I add Apollo client to the project, no matter I use which Apollo package (lit-apollo, @apollo-elements, polymer-apollo, polymer-apollo-client, etc.), I get an error like this: The requested module ' . . . ' does not provide an export named . . . I guess it is because pwa-helpers already has these modules and there are some conflicts.

Can anybody help me with that? I have spent several days on this issue. Thanks in advance!

[motss]

It's something related to how you import your module. Apparently the error is telling you that it can't find any default export. Use named export instead.

A minimal code from you would be helpful.

[FatemehFathi]

Thanks for the reply @motss.

This is my client config file: (apolloClient-config.js)
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { withClientState } from 'apollo-link-state';

const cache = new InMemoryCache();

const stateLink = withClientState({
  cache,
  resolvers: {
    Mutation: {
      buySomething: (_, variables) => {
        return null;
      },
      buyAnotherThing: (_, variables) => {
        return null;
      }
    },
  }
});

const client = new ApolloClient({
  link: stateLink,
  cache,
});

export default client;

I export this file in the "my-app.js" file in the "components" folder: import { client as apClient } from '../apolloClient-config.js';

And I get this error: Uncaught SyntaxError: The requested module '../../graphql/language/visitor.js' does not provide an export named 'visit'

[motss]

Uncaught SyntaxError: The requested module '../../graphql/language/visitor.js' does not provide an export named 'visit'

Based on the error message, it says that you are importing visit from this file ../../graphql/language/visitor.js which is not found.

I'm assuming you're importing like this: import { visit } from '../../graphql/language/visitor.js';.

Try to look into that file instead.

[FatemehFathi]

I don't import that file directly. I guess one of the Apollo modules is calling it. The only changes I made into original pwa-starter-kit is what I mentioned in my previous comment.

When I check the file from "graphql/language/visitor.js" I see this line: exports.visit = visit; But it is from the node_modules folder.

Do you have any suggestion for this @motss ?

[motss]

exports.visit = visit;

This is the line that's causing the problem. This line is a CommonJS syntax. It does not work for native ES Modules (ESM).

Easy fix would be to export things in the ESM way.

// --snip

// Named exports can be done in many ways:
// export const visit = ...
// export function visit() { ... }
export { visit };

References

• import
• export

[logicalphase]

@motts is correct. It's trying to import a .cjs non ESM module. Check to make sure anything your importing as is really a module.

[morbidick]

Your apolloClient-config.js has only a default export no named exports so your import statement should be import apClient from '../apolloClient-config.js';

[FatemehFathi]

Thanks, @motss. Do I need to use rollup as these exports are in node_modules folder?

Thanks, @hyperpress. @morbidick, this doesn't work.

[motss]

Do I need to use rollup as these exports are in node_modules folder?

It depends on whether you need to support browsers that has native ES Modules like IE11 as many evergreen browsers have already shipped ES Modules.

Alternatively, you can try use ES Modules polyfills like dimport.

If your app is meant for production ready, you will need Rollup to bundle your app.