0

I have a Chrome extension made initially with create-react-app. This extension needs to get data via a GraphQL query, and the resulting data needs to be used in my content script.

Using the 'react-boost' package in my src/index.js file works perfectly as follows.

import ApolloClient, { gql } from 'apollo-boost';

const client = new ApolloClient({
  uri: 'https://mygraphqlurl/graphql',
  headers: {
    'access-key': '123',
  },
});

client
  .query({
    query: gql`
      {
        merchant {
          id
          retailer {
            name
          }
        }
      }
    `,
  })
  .then(result => console.log(result));

However, if I try to use this code in my content.js script in my public folder, I get an error on the import line:

Uncaught SyntaxError: Unexpected identifier '

import ApolloClient, { gql } from 'apollo-boost';

How can I use this functionality in my content script?

Pavindu
  • 2,684
  • 6
  • 44
  • 77
chivs688
  • 177
  • 1
  • 1
  • 10
  • Possible duplicate of [How to import ES6 modules in content script for Chrome Extension](https://stackoverflow.com/questions/48104433/how-to-import-es6-modules-in-content-script-for-chrome-extension) – Daniel Rearden May 01 '19 at 14:44
  • I'm trying to load a javascript package installed via npm, not a local .js file though. – chivs688 May 01 '19 at 14:48
  • 1
    You'll need to build that package into a browser-compatible bundle before you can use it in a browser. Then proceed to the linked topic. – wOxxOm May 01 '19 at 14:53

0 Answers0