Lightning Datatable Action Violates Content Security Policy directive

Question

I'm using Lightning Datatable with Static Actions and following the guide in Developer Salesforce.com Lightning Datatable component guide but getting the following error (seen in the Chrome developer console) when I try to select the any of the actions:

Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-f1a6077e-ac22-4495-b083-239f808d8e4c' chrome-extension: 'unsafe-inline' 'unsafe-eval' https://sfdc.azureedge.net *.cs85.visual.force.com https://ssl.gstatic.com/accessibility/". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.

The code I have:

Component:

    <aura:component controller="OSS_SupplierController" implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global">
    <!-- attributes -->
    <aura:attribute name="recordId" type="String" default="{!recordId}"/>    
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <!-- handlers-->
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>

     <lightning:card>    
        <div class="c-container">

            <!-- the container element determine the height of the datatable -->
            <div style="height: 300px">
                <lightning:datatable
                        keyField="id"
                        data="{! v.data }"
                        columns="{! v.columns }"
                        onrowaction="{! c.handleRowAction }"
                        hideCheckboxColumn="true"/>
            </div>
        </div>
     </lightning:card>
</aura:component>

JS:

    ({
    init: function (component, event, helper) {
        console.log('init with record id ' + component.get("v.recordId"));
        var action = component.get('c.getResponsibleContacts');
        action.setParams({ftsSupplierId : component.get("v.recordId") });
        action.setCallback(this, function(response){
            if(component.isValid() && response.getState() === "SUCCESS"){
                var responsiblePersons = response.getReturnValue();
                component.set("v.data",responsiblePersons);
            }else{
                console.log("Error while responsiblePersons");
            }
        });
        $A.enqueueAction(action);

         var actions = [
            { label: 'Show details', name: 'show_details' },
            { label: 'Edit', name: 'edit' },
            { label: 'Delete', name: 'delete' }
        ];

        component.set('v.columns', [
            {type:  'action', typeAttributes: { rowActions: actions } },
            {label: 'name', fieldName: 'Name', type: 'text'}, 
            {label: 'email', fieldName: 'Email', type: 'text'} 
        ]);
    },

    handleRowAction: function (cmp, event, helper) {
        console.log('hello world');
    }
})

Apex is simply:

    public with sharing class OSS_SupplierController {
    @AuraEnabled
    public static List<Contact> getResponsibleContacts(Id ftsSupplierId)
    {
        List<Contact> responsibleContacts;

        if (ftsSupplierId != null){
            //get account
            FTS_Supplier__c ftSupplier = [SELECT ID, Supplier_account__c from FTS_Supplier__c where id=:ftsSupplierId];

            responsibleContacts = [SELECT Id, Name, FTS_Job_Title__c, FTS_Role__c, Email, Phone, MobilePhone, FTS_Address__c
                                  FROM Contact where AccountId=:ftSupplier.Supplier_account__c];

        }
        return responsibleContacts;
    }    
}

At present allow I have in the handleRowAction is a simple console log as just simply want to prove I am getting there, but getting an error as show above as soon as I select any of the actions.