Browser Friendly Relative Imports with .js extension

All modern browsers (including firefox) support es modules, but there is not ‘module resolver’ on the web, which means that browsers require relative URLs for module files.

import foo from 'foo' // sad browser 😢
import bar from '../bar/bar.js' // happy browser 😃

For users that do not need a complicated (or any) build step, apollo-client should provide a browser-friendly package with relative imports. This can be mechanically prepared.

Intended outcome: This Just Works:

<script type="module">
  import { ApolloClient } from '/node_modules/apollo-client/ApolloClient.js';
</script>

Actual outcome:

Chrome 64:

Uncaught TypeError: Failed to resolve module specifier "apollo-link". Relative references must start with either "/", "./", or "../".

How to reproduce the issue:

Same as Intended outcome

Version

• apollo-client@2.2.5

Notes I was unable to find a rollup plugin which would do this automatically, but I’m reasonably confident that such a plugin would not be hard to implement.

[heruan]

I’d be very interested in this, since I’m porting many apps from Polymer 2 to Polymer 3 (i.e. ES modules) and I still need to bundle Apollo Client to make it work (see e.g. #3571).

Hope to see this reconsidered to be able to use Apollo Client with ES module as per spec!

[fineline]

For others having this problem, I followed Benny’s link to pikapkg and from there to https://github.com/pikapkg/web, and using this I created a package in web_modules for apollo-client, as well as graphql. I can now use the former to import ApolloClient in a web module. That’s as much as I have time for now but thought it might help someone.