Not able to run backpack on react by skyscanner

Question

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.

Answer 1

add this to your package.json

"backpack-react-scripts": {
    "babelIncludePrefixes": [
      "@skyscanner/backpack-web"
    ]
  }