TypeError: (0 , _extractFiles.extractFiles) when using with create-react-app and Typescript

[hxuanhung]

Hi, I got the folowing error when I try to use apollo-upload-client with create-react-app and Typescript:

TypeError: (0 , _extractFiles.extractFiles) is not a function

My package verions:

        "apollo-cache-inmemory": "^1.1.5",
        "apollo-client": "^2.2.0",
        "apollo-link": "^1.0.7",
        "apollo-link-context": "^1.0.3",
        "apollo-link-error": "^1.0.3",
        "apollo-link-http": "^1.3.2",
        "apollo-upload-client": "^7.0.0-alpha.3",
        "react": "^16.0.0",
        "react-apollo": "^2.0.4",
        "react-dev-utils": "^4.1.0",
        "react-dom": "^16.0.0",
        "typescript": "^2.6.2",

And here is my setup:

import { createUploadLink } from 'apollo-upload-client/lib';
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { onError } from 'apollo-link-error';

const errorLink = onError(({ networkError, graphQLErrors }) => {
  if (graphQLErrors) {
    graphQLErrors.map(({ message, locations, path }) =>
      debug(
        `[GraphQL error]: Message: ${message}, Location:`,
        locations,
        `Path: ${path}`
      )
    );
  }

  if (networkError) {
    debug(`[Network error]: ${networkError}`);
  }
});

const link = createUploadLink({
  uri: '/graphql',
  credentials:
    process.env.NODE_ENV === 'development' ? 'include' : 'same-origin',
  headers: {
    authorization: localStorage.getItem(TOKEN)
      ? `Bearer ${localStorage.getItem(TOKEN)}`
      : null
  }
});

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: errorLink.concat(link)
});

[jaydenseric]

Is it an issue similar to this?

[hxuanhung]

I tried both, one with import { createUploadLink } from 'apollo-upload-client/lib/main'; and I got Module not found: Can't resolve 'apollo-upload-client/lib/main'
another one with import { createUploadLink } from 'apollo-upload-client'; which generates index.tsx:89 Uncaught TypeError: Object(...) is not a function

[jaydenseric]

Well, there is no apollo-upload-client/lib/main in the current version, only apollo-upload-client/lib so it makes sense it can't resolve. If you console.log(createUploadLink), what is the output?

It might be related to spotty typescript support for .mjs.

[hxuanhung]

it returns ƒ createUploadLink() { var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, includeExtensions = _ref.includeExtensions, _ref$uri = _ref.uri, linkUri = …

[jaydenseric]

Oh, you mean it causes the error internally, not that createUploadLink is "not a function".

_extractFiles.extractFiles does not exist in the lib of the latest versions; are you sure the node_modules are up to date? If you check what is installed, apollo-upload-client should be v7.0.0-alpha.3, and extract-files should be v3.0.0.

[hxuanhung]

Yes, I'm sure they are correct.

[jaydenseric]

I still suspect it is that CRA issue. Are you sure you are on CRA v1.1.0? It's only a few days old, but if you look in the changes it says:

#3537 Add mjs and jsx filename extensions to file-loader exclude pattern.

[hxuanhung]

@jaydenseric yes, you are right. I updated file-loader and add webpack's config and the error's gone. Thank you.

[dimitar-nikovski]

I used @jaydenseric 's suggestion for adding mjs file extensions after updating to CRA 2. It fixed my error, which was: ectractFiles is not a function.