Cypress Cucumber Error: Parsing file Unexpected token (29:50)

Question

I'm getting the following error when trying to run a cypress test within the cucumber

Parsing file /Users/endowus/Projects/Collab/Mywork/Cypress/herokuappLogin/cypress/integration/FeatureFiles/Login.feature: Unexpected token (29:50)

Feature file

    Feature: Login

  Scenario: Heroku Login
    Given I open the heroku login page
    When I should see the Login Page title
    When I type in
      | username  | password  |
      | tomsmith  | SuperSecretPassword!  |
    And I click login button
    Then "Secure Area" should be shown

Step definition

const login_url = '/login'
import {Given, When, And, Then} from "cypress-cucumber-preprocessor/steps"

Given('I open the heroku login page', () => {

before(() => {
    cy.visit(login_url)
    cy.url()
        .should('eq', Cypress.config().baseUrl + login_url)
})

When('I should see the Login Page title', () => {
    cy.get('h2')
        .should('contain', 'Login Page')
})

When('I type in', (datatable) => {
    datatable.hashes().forEach(element=>{
        cy.get('#username').type(element.username)
        cy.get('#password').type(element.password)
    })
})

And('I click login button', () => {
    cy.get('.fa').contains('Login').click()
    cy.get('.icon-2x').contains('Logout').click()
})

Then('{string} should be shown', (content) => {
    cy.contains(content, {timeout:10000}).should('be.visible')
})

})

plugin > index.js

    const cucumber = require('cypress-cucumber-preprocessor').default

module.exports = (on, config) => {
    on('file:preprocessor', cucumber())
}

Anyone have faced this kind of issue and sorted it out or can anyone help me>?