Using Leaflet.VectorGrid with local GeoJSON and addLayer

Question

I am trying to test out Leaflet.VectorGrid from https://github.com/Leaflet/Leaflet.VectorGrid. My overall goal is to load a large 20MB or larger geojson quickly.

I am getting this error...

"Uncaught (in promise) TypeError: Cannot read property 'addLayer' of undefined
    at NewClass.addTo (leaflet-src.js?e11e:6559)

I am following this example https://github.com/Leaflet/Leaflet.VectorGrid/blob/master/docs/demo-geojson.html

import VectorTile from "leaflet.vectorgrid/dist/Leaflet.VectorGrid.js";
import Pbf from "leaflet.vectorgrid/dist/Leaflet.VectorGrid.js";
import euCountries from "../eu-countries.js"; 
 var highlight;
  var clearHighlight = function() {
    if (highlight) {
      vectorGrid.resetFeatureStyle(highlight);
    }
    highlight = null;
  };
  var vectorGrid = L.vectorGrid
    .slicer(euCountries.euCountries, {
      rendererFactory: L.svg.tile,
      vectorTileLayerStyles: {
        sliced: function(properties, zoom) {
          var p = properties.mapcolor7 % 5;
          return {
            fillColor:
              p === 0
                ? "#800026"
                : p === 1
                ? "#E31A1C"
                : p === 2
                ? "#FEB24C"
                : p === 3
                ? "#B2FE4C"
                : "#FFEDA0",
            fillOpacity: 0.5,
            //fillOpacity: 1,
            stroke: true,
            fill: true,
            color: "black",
            //opacity: 0.2,
            weight: 0
          };
        }
      },
      interactive: true,
      getFeatureId: function(f) {
        return f.properties.wb_a3;
      }
    })
    .on("mouseover", function(e) {
      var properties = e.layer.properties;
      L.popup()
        .setContent(properties.name || properties.type)
        .setLatLng(e.latlng)
        .openOn(myMap);

      clearHighlight();
      highlight = properties.wb_a3;

      var p = properties.mapcolor7 % 5;
      var style = {
        fillColor:
          p === 0
            ? "#800026"
            : p === 1
            ? "#E31A1C"
            : p === 2
            ? "#FEB24C"
            : p === 3
            ? "#B2FE4C"
            : "#FFEDA0",
        fillOpacity: 0.5,
        stroke: true,
        fill: true,
        color: "red",
        opacity: 1,
        weight: 2
      };

      vectorGrid.setFeatureStyle(properties.wb_a3, style);
    })
    .addTo(myMap);

I know I'm importing the geojson properly because I can console.log (Object.keys(euCountries.euCountries) and get the expected result {type, features} prints in the console.

My eu-countries.js looks like this...

    export default {
        euCountries: {
            "type": "FeatureCollection", "features": [
                {..all the features are here..}
]}}

What am I missing here?