ES Module support

[frank7huysen]

Sorry I think it is not a bug but an enhancement.

Package

@apollo-elements/mixins

Description

I'm using esm modules in my project but apollo-mixins is trying to import crocks using default imports for example: import pick from 'crocks/helpers/pick' however crocks doesn't provide a default export.

Expected Behavior

Support for esm modules. Maybe change the import to * as pick

[bennypowers]

this is blocked by evilsoft/crocks#261

It will also likely be blocked by other issues in apollo-client.

In the mean time, you might consider using the pika packaged version from

https://storage.googleapis.com/pika-web-packages-02/@apollo-elements/mixins/1.1.1/dist-es2017/mixins.min.js

[bennypowers]

You can also use rollup-plugin-commonjs for this, which is what I do

[karlito-who-else]

@bennypowers I referred to one of your sample applications at https://gitlab.com/bennyp/demo-lit-apollo-subscriptions/tree/master and copied the rollup config but to no avail. Due to the Error: 'default' is not exported by node_modules/crocks/helpers/compose.js issue mentioned above, the rollup config works when I start a component with following first code example, but not the second:

import { html, LitElement } from 'lit-element';

export class PageOne extends LitElement {

but not with

import { ApolloQuery, html } from '@apollo-elements/lit-apollo';

export class PageOne extends ApolloQuery {

I realise that this is not a support forum so I'm going to keep tinkering but if there are any more specific instructions to a workaround then I think it would help adoption of apollo-elements, which seems very cool and I'd hate to see anyone put off of using it.

Thanks for all the work on the project!

[amrhassab]

@karlito-who-else any luck solving this issue?

[karlito-who-else]

I've been busy with client work since raising this issue however I unfortunately didn't make any progress in solving the issue, I think. I probably needed to let Rollup know how to deal with the Crocks codebase. I would love to be able to come back to this issue soon with a fresh perspective.

[bennypowers]

I've gotten reports about this on slack as well but have been unable to reproduce.

A consistent reproduction would help debug

[bennypowers]

Alternatively, I imagine this could be solved by publishing Crocks under @esm-bundle, if anyone wants to take a crack at it

[amrhassab]

I am going to push a simple project that reproduces the issue soon.
Simply using import { ApolloQuery } from '@apollo-elements/lit-apollo'; causes the bug

[amrhassab]

please refer to this code to reproduce the bug:

https://github.com/amrhassab/lit-apollo-issue

I apologize if I am missing something obvious

in PageMain.js line 2 triggers the bug

[amrhassab]

Alternatively, I imagine this could be solved by publishing Crocks under @esm-bundle, if anyone wants to take a crack at it

I wouldn't mind but im not sure how

[bennypowers]

I followed these steps:

git clone git@github.com:amrhassab/lit-apollo-issue.git
npm i
npm run build

And got this output :

> lit-apollo-issue@0.0.0 build /Users/bennyp/Documents/lit-apollo-issue
> rimraf dist && rollup -c rollup.config.js

loaded rollup.config.js with warnings
(!) Unused external imports
createDefaultConfig imported from external module '@open-wc/building-rollup' but never used

./index.html → dist...
created dist in 3s

Then I ran

npm start

And got this console error in browser:

Uncaught SyntaxError: The requested module '../../crocks/pointfree/filter.js' does not provide an export named 'default'

I added a file named es-dev-server.config.js with this content:

/* eslint-env node */
module.exports = {
  rootDir: 'dist/',
  appIndex: 'index.html',
  watch: true,
  open: true,
  responseTransformers: [
    function importJSON({ url, body }) {
      if (url.endsWith('.json')) {
        return {
          contentType: 'application/javascript',
          body: `export default ${body}`,
        };
      }
    },

    function importGraphQL({ url, body }) {
      if (url.match(/\.g(raph)?ql$/)) {
        return {
          contentType: 'application/javascript',
          body: `import gql from 'graphql-tag';export default gql\`${body}\``,
        };
      }
    },
  ],
};

and I changed the package.json start script to:

es-dev-server

and then the project booted

[amrhassab]

That is great news, thank you very much for your time. I am currently occupied but i will try it out as soon as possible.

Thanks again =)