Can't import the named export 'ApolloLink' from non EcmaScript module

[pleerock]

After doing following:

import {createUploadLink} from "apollo-upload-client";

export const GraphqlClient = new ApolloClient({
    link: createUploadLink({ uri: "http://localhost:3000/graphql" }),
    cache: new InMemoryCache(),
});

I have these errors when building using webpack:

ERROR in ./node_modules/apollo-upload-client/lib/index.mjs
33:13-23 Can't import the named export 'ApolloLink' from non EcmaScript module (only default export is available)
 @ ./node_modules/apollo-upload-client/lib/index.mjs
 @ ./src/service/GraphqlClient.js
 @ ./src/component/AppComponent.js
 @ ./src/index.js

ERROR in ./node_modules/apollo-upload-client/lib/index.mjs
34:14-23 Can't import the named export 'selectURI' from non EcmaScript module (only default export is available)
 @ ./node_modules/apollo-upload-client/lib/index.mjs
 @ ./src/service/GraphqlClient.js
 @ ./src/component/AppComponent.js
 @ ./src/index.js

ERROR in ./node_modules/apollo-upload-client/lib/index.mjs
43:32-56 Can't import the named export 'selectHttpOptionsAndBody' from non EcmaScript module (only default export is available)
 @ ./node_modules/apollo-upload-client/lib/index.mjs
 @ ./src/service/GraphqlClient.js
 @ ./src/component/AppComponent.js
 @ ./src/index.js

ERROR in ./node_modules/apollo-upload-client/lib/index.mjs
45:8-26 Can't import the named export 'fallbackHttpConfig' from non EcmaScript module (only default export is available)
 @ ./node_modules/apollo-upload-client/lib/index.mjs
 @ ./src/service/GraphqlClient.js
 @ ./src/component/AppComponent.js
 @ ./src/index.js

ERROR in ./node_modules/apollo-upload-client/lib/index.mjs
53:18-41 Can't import the named export 'serializeFetchParameter' from non EcmaScript module (only default export is available)
 @ ./node_modules/apollo-upload-client/lib/index.mjs
 @ ./src/service/GraphqlClient.js
 @ ./src/component/AppComponent.js
 @ ./src/index.js

ERROR in ./node_modules/apollo-upload-client/lib/index.mjs
75:15-25 Can't import the named export 'Observable' from non EcmaScript module (only default export is available)
 @ ./node_modules/apollo-upload-client/lib/index.mjs
 @ ./src/service/GraphqlClient.js
 @ ./src/component/AppComponent.js
 @ ./src/index.js

ERROR in ./node_modules/apollo-upload-client/lib/index.mjs
76:34-57 Can't import the named export 'createSignalIfSupported' from non EcmaScript module (only default export is available)
 @ ./node_modules/apollo-upload-client/lib/index.mjs
 @ ./src/service/GraphqlClient.js
 @ ./src/component/AppComponent.js
 @ ./src/index.js

ERROR in ./node_modules/apollo-upload-client/lib/index.mjs
88:14-39 Can't import the named export 'parseAndCheckHttpResponse' from non EcmaScript module (only default export is available)
 @ ./node_modules/apollo-upload-client/lib/index.mjs
 @ ./src/service/GraphqlClient.js
 @ ./src/component/AppComponent.js
 @ ./src/index.js

Do you have any ideas in mind why I have following errors?

[pleerock]

Issue changed, Ive updated

[pleerock]

Removing index.mjs file solves the issue, but apparently I cannot do it in real life.

[pleerock]

Im using webpack4 btw

[jaydenseric]

Yes, this is an issue that intersects a few different things surrounding ESM and .mjs. I'll work on this this as soon as I can. The best solution is to PR apollo-link-http-common to properly support named imports with .mjs files.

[jaydenseric]

This should be fixed in v7.1.0.

Note that the lasting solution is for Apollo to support ESM properly, see apollographql/apollo-link#537. In the meantime, Webpack will display harmless, but annoying warnings like these due to our workarounds:

[pcjmfranken]

It's actually completely failing to compile for me:

Failed to compile.

./node_modules/apollo-upload-client/lib/index.mjs
5:17-34 "export 'default' (imported as 'apolloLinkDefault') was not found in 'apollo-link'
 @ ./node_modules/apollo-upload-client/lib/index.mjs
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8000 webpack/hot/dev-server babel-polyfill ./src

[gopeter]

Got the same compile error after upgrading to 7.1.0

[jaydenseric]

@pcjmfranken what version of Webpack are you using?

[pcjmfranken]

"webpack": "^3.11.0"

Relevant parts of index.js

import { createUploadLink } from 'apollo-upload-client'

const apolloLinks = split(
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query)
    return kind === 'OperationDefinition' && operation === 'subscription'
  },
  apolloWebSocketLink,
  apolloUploadClientLink,
  apolloHttpLink
)

const apolloClient = new ApolloClient({
  cache: apolloCache,
  link: ApolloLink.from([
    apolloStateLink,
    apolloLinks
  ])
})

The above code works with "apollo-upload-client": "^7.0.0-alpha.4"

[shamit6]

Meanwhile I import index.js file directly:
import {createUploadLink} from 'apollo-upload-client/lib/index'

[tim-soft]

I also get compilation errors, I'll have to roll it back for now

[jaydenseric]

I am cutting a new major release with a traditional .js setup until Apollo link packages provide native ESM. Until then it is too hard to support all environments and various versions of build tools with .mjs 😢

apollo-upload-server has been working great with .mjs and --experimental-modules so there are no plans to revert other packages to .js.