Apollo-client: Not working with Polymer 3

[heruan]

I'm trying to use ApolloClient in a Polymer 3 PWA, which adopts the ES Module spec. When I import e.g. ApolloClient or HttpLink from apollo-boost, I get this error in the browser console:

Uncaught SyntaxError: The requested module '../../node_modules/apollo-boost/lib/index.js' does not provide an export named 'HttpLink'

Steps to reproduce:

$ npm i -g polymer-cli
$ polymer init
$ npm i -S apollo-boost graphql graphql-tag

then import to you main app file:

import { HttpLink } from 'apollo-boost';

and run polymer serve --open, you will see the error in the browser console.

Here's the versions in package.json:

{
  "name": "github-profile",
  "description": "Axians PWA Evaluation",
  "dependencies": {
    "@polymer/polymer": "^3.0.0",
    "apollo-boost": "^0.1.7",
    "graphql": "^0.13.2",
    "graphql-tag": "^2.9.2"
  },
  "devDependencies": {
    "@webcomponents/webcomponentsjs": "^2.0.0",
    "wct-browser-legacy": "^1.0.0"
  }
}

[hashamhabib]

I am working on the same kind of project where I am converting existing polymer 1.0 application to polymer 3.0.
I also need an Apollo client to work with polymer 3.0. How did you make it work? Are you able to bundle apollo client using Rollup?

[benjamn]

@hashamhabib Could you try installing [email protected]? We're using Rollup to build an ESM bundle for the "module" field in package.json.

[hashamhabib]

@benjamn Thanks for quick response.

After installing [email protected] and its dependency graphql: ^14.0.0 and then using it in one of my polymer 3.0 element

import ApolloClient from '../../node_modules/apollo-client/bundle.esm';

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

its might be due to graphql package?

[hashamhabib]

@heruan did you manage to make apollo-client working with polymer 3.0

[abdonrd]

Any news here? Thanks in advance!

[andrewperry]

@benjamn we are also banging our heads up against this issue, any further updates/suggestions?

[mgvs]

Guys, any solutions how to fix it?

[benjamn]

As long as the graphql package is installed, the error about visitor.js not exporting a visit function (which @hashamhabib mentioned above) is entirely a problem between Polymer and the graphql package. Since we do not maintain the graphql package, I think it's safe to say that the common cause of these problems is Polymer's unnecessary strictness about checking the exports of npm packages/modules, and you should seek further guidance from the Polymer team. Maybe they have a good reason for throwing these errors, but at first glance the errors seem like a form of "help" that has morphed into a considerable annoyance in the wilds of the JS ecosystem.

[mgvs]

As long as the graphql package is installed, the error about visitor.js not exporting a visit function (which @hashamhabib mentioned above) is entirely a problem between Polymer and the graphql package. Since we do not maintain the graphql package, I think it's safe to say that the common cause of these problems is Polymer's unnecessary strictness about checking the exports of npm packages/modules, and you should seek further guidance from the Polymer team. Maybe they have a good reason for throwing these errors, but at first glance the errors seem like a form of "help" that has morphed into a considerable annoyance in the wilds of the JS ecosystem.

I understant there is ES6 and CommonJS modules. And there is visitor.mjs which contains ES6, supported by Polymer. Apollo-client for some reason uses CommonJS. Maybe there is way to forward it to *.mjs?

[hwillson]

Please try a recent version of @apollo/client and let us know if this issue is still happening. Thanks!