jaydenseric/apollo-upload-client

importing the library in react js project

mehrdadtorki opened this issue · 1 comments

Hello dear sir.
i make a sample project to use your library

this is my App.js

import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
import createUploadLink from 'apollo-upload-client/createUploadLink.mjs';
import UploadFile from './pages/AppoloTest';

const client = new ApolloClient({
  link: createUploadLink({
    uri: 'http://localhost:4444/graphql'
  }),
  cache: new InMemoryCache(),
});

function App() {
  return (
    <div className="App">
      <ApolloProvider client={client}>
        <UploadFile />
      </ApolloProvider>
    </div>
  );
}

export default App;

and this is my UploadFile.js

import { gql, useMutation } from "@apollo/client";

const MUTATION = gql`
  mutation ($file: Upload!) {
    uploadFile(file: $file) {
      success
    }
  }
`;

function UploadFile() {
  const [mutate] = useMutation(MUTATION);

  return (
    <input
      type="file"
      required
      onChange={({
        target: {
          validity,
          files: [file],
        },
      }) => {
        const b = new Blob([file], { type: file.type })
        if (validity.valid)
          mutate({
            variables: {
              file: b,
            },
          });
      }}
    />
  );
}
export default UploadFile;

and i change multiple time rho formation of my import and finaly the createUploadLink being correct but now i got this error

export 'default' (imported as 'isExtractableFile') was not found in './isExtractableFile.mjs' (module has no exports)

I'm assuming you're using the latest version of apollo-upload-client.

Most likely your bundler is misconfigured somehow and it's not correctly bundling this import:

import isExtractableFile from "./isExtractableFile.mjs";

Which is re-exporting this module:

export { default } from "extract-files/isExtractableFile.mjs";

Make sure that you are using a modern bundler and that it's configured correctly to resolve modules according to how Node.js ESM work, so .mjs file extensions etc.

Closing because this is not something I can fix here in apollo-upload-client, it relates to your project tooling.