Issue while trying to use apollo client

[karthikvt26]

Is this a bug report?

(Yes)

This is an issue with the default webpack config used. this comment fixes this issue. It can only be solved by ejecting and manually adding that line

I wanted to create this issue because it might help other who encounter the same issue. Also please suggest if there is a better solution to this problem

Environment

1. node -v: v10.1.0
2. npm -v: 6.9.0
3. yarn --version (if you use Yarn):
4. npm ls create-elm-app -g (if you haven’t ejected):

Then, specify:

1. Operating system: Arch Linux
2. Browser and version (if relevant):

--

Steps to Reproduce

(Write your steps here:)

1. Install apollo/graphql dependencies

2. Update index.js as below

import './main.css';
import { Elm } from './Main.elm';

/* */
import ApolloClient from "apollo-client";
import { split } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from 'apollo-utilities';
import { InMemoryCache } from "apollo-cache-inmemory";

import gql from 'graphql-tag'

const GRAPHQL_URI = '<sample_graphql_url>';

// Create an http link:
const httpLink = new HttpLink({
  uri: `https://${GRAPHQL_URI}`
});

// Create a WebSocket link:
const wsLink = new WebSocketLink({
  uri: `ws://${GRAPHQL_URI}`,
  options: {
    reconnect: true
  }
});

// using the ability to split links, you can send data to each link
// depending on what kind of operation is being sent
const link = split(
  // split based on operation type
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink,
);


const getClient = () => {
  const client = new ApolloClient({
    link: link,
    cache: new InMemoryCache({
      addTypename: true
    })
  });
  return client;
};

/* */
/* Elm code */

3. Load localhost:3000

Expected Behavior

It should work

(Write what you thought would happen.)

Actual Behavior

(Write what happened. Please add screenshots!)

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[halfzebra]

Hello Karthik!

Thank you for the effort you have put in describing your issue. 👍

I have investigated this issue and found the root cause is in one of the dependencies of apollo-cache-inmemory.

It was incorrectly packaged, so Webpack treats it as a file import. There was an effort towards fixing this, but I don't know what is the status atm. apollographql/apollo-client#4672

I would recommend creating awareness about this in https://github.com/apollographql repo or maybe there's an opportunity for helping them out upgrading the deps.

[halfzebra]

I would recommend fixing this for now by using a Webpack Config Override and a trick you have mentioned so you don't have to eject.

I'm closing this issue, please feel free to reopen it if you have further questions.

[karthikvt26]

Thanks @halfzebra. Just for the record

The following config in elmapp.config.js works without the need to eject it

module.exports = {
  configureWebpack: (config, env) => {
    const newConfig = Object.assign({}, config);
    const missingRule = {
      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto',
    };
    newConfig.module.rules.push(missingRule);
    return newConfig;
  }
}