Not able to run backpack on react by skyscanner

Getting the following error, the react app is not compiling at first I was facing and old SSL security error on nodeJS, thanks to stackoverflow I was able to fix that, but now I am facing this.

Failed to compile.

./node_modules/@skyscanner/backpack-web/bpk-component-button/src/BpkButton.js
SyntaxError: C:\Users\prantik\Desktop\SkyScanner Internship\my-app\node_modules\@skyscanner\backpack-web\bpk-component-button\src\BpkButton.js: Missing semicolon. (45:4)

Failed to compile.

./node_modules/@skyscanner/backpack-web/bpk-component-button/src/BpkButton.js
SyntaxError: C:\Users\prantik\Desktop\SkyScanner Internship\my-app\node_modules\@skyscanner\backpack-web\bpk-component-button\src\BpkButton.js: Unexpected token, expected "," (40:7)

  38 |
  39 | import {
> 40 |   type Props as CommonProps,
     |        ^
  41 |   propTypes,
  42 |   defaultProps,
  43 | } from '@skyscanner/backpack-web/bpk-component-button/src/common-types';   
    at parser.next (<anonymous>)
    at normalizeFile.next (<anonymous>)
    at run.next (<anonymous>)
    at transform.next (<anonymous>)

The BpkButton.js has the following code

import React from 'react';
import { BpkCode } from '@skyscanner/backpack-web/bpk-component-code';
import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
import BpkText from '@skyscanner/backpack-web/bpk-component-text';

import { cssModules } from '@skyscanner/backpack-web/bpk-react-utils';

import STYLES from './App.scss';

const getClassName = cssModules(STYLES);

const App = () => (
  <div className={getClassName('App')}>
    <header className={getClassName('App__header')}>
      <div className={getClassName('App__header-inner')}>
        <BpkText tagName="h1" textStyle="xxl" className={getClassName('App__heading')}>Flight Schedule</BpkText>
      </div>
    </header>
    <main className={getClassName('App__main')}>
      <BpkText tagName="p" className={getClassName('App__text')}>
        To get started, edit <BpkCode>src/App.jsx</BpkCode> and save to reload.
      </BpkText>
      <BpkButton onClick={() => alert('It works!')}>Click me</BpkButton>
    </main>
  </div>
);

export default App;

I tried installing typescript, but dont know how to fix this.



Comments

Popular posts from this blog

Spring Elasticsearch Operations

Object oriented programming concepts (OOPs)

Network Error and Timeout on Authorize.net JS