Search code examples
javascriptnode.jsfirebasewebpackgoogle-api-client

googleapis npm module and webpack bundle error


I try to get remote config from Firebase in the background of my extension.

I installed googleapis module with npm and i used webpack to compile and bundle files. When i try to import googleapis in my js file :

import {google} from 'googleapis';

and to use it : const jwtClient = new google.auth.JWT(...);

I have several errors displayed in the console :

ERROR in ./~/googleapis/build/src/googleapis.js
Module parse failed: /node_modules/googleapis/build/src/googleapis.js Unexpected token (81:10)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (81:10)
ERROR in ./~/googleapis-common/build/src/authplus.js
Module parse failed: /node_modules/googleapis-common/build/src/authplus.js Unexpected token (32:10)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (32:10)

I tried to use external function in webpack config to exclude googleapis from bundle compilation, without success

    externals: {
        googleapis: 'googleapis'
    },

webpack with babel config loaders :

loaders: [{
                    loader: "babel-loader",
                    test: /\.jsx?$/,
                    query: {
                        plugins: ['transform-runtime'],
                        presets: ['es2015', 'react'],
                    }
          }]

Solution

  • It appears to be a known issue with googleapis: https://github.com/googleapis/google-api-nodejs-client/issues/1270#issuecomment-412361803

    There appears to be a year old PR up that fixes it, but again.. its no idea if / when it will or even can be merged to master branch.

    If possible, I would suggest try using this library as a CDN hosted dependency instead: https://unpkg.com/googleapis@42.0.0/build/src/googleapis.js

    With: https://www.npmjs.com/package/webpack-cdn-inject