1

I am trying to utilize Google API's in a LWC component. I am able to do a fetch in my component to a hosted API endpoint that utilizes the google API's and returns a list of Google Drive files via JSON:

const { google } = require('googleapis');
const drive = google.drive('v3');
...

Within my LWC component, when I try to encapsulate all the logic rather than creating a generic API consumer component, I am getting the following error:

import { drive_v3 } from 'googleapis';     // or google

LWC Compilation Debug:

(!) Import of non-existent export

How can I properly import the NPM GoogleAPIs (and other NPM 3rd-party) into an LWC component? I also tried adding an "npm" entry of "googleapis" to the lwc.config.json.

0

You can import a 3rd party npm modules in LWC OSS. It supports both require and import methods to import a module.

import moment from "moment";
//or
const moment1 = require("moment");

Checkout lwc-oss-recipes on how d3 library is used.

You're not able to import googleapis because it's a NodeJS library. It's designed to work in a server environment and not a browser. When you import it into an LWC component, it'll run in a browser (but fail). Since the library has dependency on modules like child_process, browser cannot provide these modules as these are available in NodeJS, i.e, server environment, even if you added using npm.

1
  • As I mentioned to @Mohith, I have it already working using an api endpoint/route and am using the fetch wire-service. For some reason I thought the LWC controller/js would execute on the server and I had something incorrectly configured. thanks for clarifying – paul.payne Jan 17 at 23:22
0

The LWC Module resolver does not allow you to bring any third-party npm module in your modules. You can only import an LWC module that you publish to the npm.

Exporting an LWC Module to npm is discussed in this blog here and then only you can import it.

The Module resolution of LWS OSS just bundles all the client-side code and gets you an ES6 module that can work with Browser! Definitely cannot resolve npm library dependencies if it uses server-side node.js

For your use case, you can simply expose a server endpoint via an express server and then use the fetch API call from your javascript in LWC to invoke the endpoint.

You can see a working example of how the client and server should be wired.

4
  • Correct, I have it already working using an api endpoint/route, returning a JSON list of Google Drive files (for example), using the fetch wire-service. For some reason I thought the LWC controller/js would execute on the server – paul.payne Jan 17 at 23:19
  • @paul.payne The Module resolution just bundles all the client-side code and gets you an ES6 module that can work with Browser! – Mohith Shrivastava Jan 17 at 23:23
  • @paul.payne just added a few more words to make the answer more clear! – Mohith Shrivastava Jan 17 at 23:24
  • 1
    makes sense, and thanks for the clarification on the bundle resolution. I was originally confused since the wire adapters were returning data from my MongoDB instance, etc, so assumed the entire component was server-side, but get it's part of framework. I guess another option would be a custom wire adapter to Google Drive? Moving forward, need to choose how I want to expose my business logic: all node endpoints, spring boot instance, salesforce functions / evergreen, ... – paul.payne Jan 18 at 16:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.