Circular reference error in dependency library

Question

I get this when I try to run my application:

> npm start

Starting the development server...

ts-loader: Using typescript@3.5.3 and C:\DevTools\git\ui.myavis\tsconfig.json
Tried to lint C:/DevTools/git/ui.myavis/cypress/integration/doc_upload/doc_upload_spec.js but found no validFailed to compile.

C:/DevTools/git/ui.myavis/node_modules/@types/react-router/node_modules/@types/react/index.d.ts
(239,10): Type alias 'ReactFragment' circularly references itself.

As this is in a dependency library, what do I do to resolve the issue?

This is my package.json

{
  "name": "myavis",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@avis/react-framework": "^1.0.0-beta.datepicker-preview",
    "@digital/react-avis-atom": "2.0.1",
    "@elastic/apm-rum": "^5.6.1",
    "@types/react-router-dom": "^4.3.0",
    "axios": "^0.18.0",
    "classnames": "^2.2.6",
    "es6-shim": "^0.35.5",
    "formik": "^1.2.0",
    "moment": "^2.29.1",
    "react": "^16.2.0",
    "react-app-polyfill": "^2.0.0",
    "react-clickoutside": "^2.0.0",
    "react-dom": "^16.2.0",
    "react-moment": "^0.7.9",
    "react-router-dom": "^4.3.1",
    "react-scripts-ts": "2.15.1",
    "react-slidedown": "^1.3.0"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "sh -ac '. ./.env.${REACT_APP_ENV}; react-scripts-ts build'",
    "build:sys": "REACT_APP_ENV=sys npm run build",
    "build:uat": "REACT_APP_ENV=uat npm run build",
    "build:production": "REACT_APP_ENV=production npm run build",
    "tslint": "tslint -t stylish -c tslint.json -e '**/node_modules/**/*' 'src/**/*.+(ts|tsx)'",
    "lint": "yarn tslint",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject",
    "uploadSrcMap": "NODE_TLS_REJECT_UNAUTHORIZED=0 node ./tools/sourceMapUploader.js"
  },
  "devDependencies": {
    "@types/enzyme": "^3.1.9",
    "@types/enzyme-adapter-react-16": "^1.0.2",
    "@types/jest": "^22.2.3",
    "@types/node": "^9.4.6",
    "@types/react": "^16.0.38",
    "@types/react-dom": "^16.0.4",
    "@types/react-test-renderer": "^16.0.1",
    "axios-mock-adapter": "^1.15.0",
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.5.0",
    "jest": "^22.4.3",
    "jsdom": "^11.12.0",
    "react-console-component": "^0.6.1",
    "react-test-renderer": "^16.3.2",
    "ts-jest": "^22.4.3",
    "typescript": "3.5"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{ts,tsx}",
      "!src/types/*",
      "!src/setupTests.ts",
      "!src/index.tsx"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 67,
        "functions": 68,
        "lines": 78,
        "statements": 78
      }
    }
  }
}

Here's doc_upload_spec.js

describe('Upload document', () => {
  it('should upload a driving licence in JPEG file format successfully and navigate back to MyAviva Home page', () => {
    cy.login();
    cy.get('.access_button').should('contain', 'Upload documents');
    cy.contains('Upload documents').click();
    cy.window().then(window => {
      expect(window.sessionStorage.getItem('TRACKING_ID')).toBeTruthy;
    });
    cy.get('.a-file-upload__label')
      .eq(0)
      .should('contain', 'Driving Licence');
    cy.get('.a-file-upload__label')
      .eq(1)
      .should('contain', 'No Claims Bonus');
    cy.get('input[type=file]')
      .eq(0)
      .uploadFile('file-sample-jpg', 'image/jpeg');
    cy.get('.terms-and-conditons-container').should('contain', 'By uploading your driving licence');
    cy.get('.a-button--primary').should('contain', 'I agree');
    cy.get('.a-button--secondary').should('contain', 'I do not agree');
    cy.contains('I agree').click();
    cy.get('.a-loading-indicator-container').should('contain', 'Please wait');
    cy.wait(10000).then(() => {
      cy.get('.a-heading--2').should('contain', 'Thank You');
      cy.get('.a-button--primary').should('contain', 'Upload another document');
      cy.get('.a-button--secondary').should('contain', 'Back to MyAviva');
      cy.contains('Back to MyAviva').click();
      cy.get('.access_button').should('contain', 'Upload documents');
      cy.get('.access_button').should('contain', 'View documents');
      cy.get('.a-button--primary').should('contain', 'Access and edit policy');
    });
  });
  it('should upload a driving licence in PDF file format successfully and navigate back to document selection page by clicking upload another', () => {
    cy.login();
    cy.contains('Upload documents').click();
    cy.get('input[type=file]')
      .eq(1)
      .uploadFile('file-sample-pdf', 'application/pdf');
    cy.get('.terms-and-conditons-container').should(
      'contain',
      'By uploading your No-Claims Bonus/Discount you are confirming that:'
    );
    cy.contains('I agree').click();
    cy.get('.a-loading-indicator-container').should('contain', 'Please wait');
    cy.wait(10000).then(() => {
      cy.get('.a-heading--2').should('contain', 'Thank You');
      cy.contains('Upload another document').click();
      cy.get('.a-file-upload__label')
        .eq(0)
        .should('contain', 'Driving Licence');
      cy.get('.a-file-upload__label')
        .eq(1)
        .should('contain', 'No Claims Bonus');
    });
  });

  it('show file type validation error if the selected file type is not supported', () => {
    cy.login();
    cy.contains('Upload documents').click();
    cy.get('input[type=file]')
      .eq(1)
      .uploadFile('file-sample-text', 'plain/txt');
    cy.get('.m-form-row__error-message').should(
      'contain',
      'This file type is not supported. Please choose a PDF or JPG.'
    );
  });

  it('show file size validation error if the selected file exceeds 5mb', () => {
    cy.login();
    cy.contains('Upload documents').click();
    cy.get('input[type=file]')
      .eq(0)
      .uploadLargeFile('file-sample-large-jpg', 'image/jpeg');
    cy.get('.m-form-row__error-message').should(
      'contain',
      'This file exceeds the maximum size of 5MB. Please choose another file.'
    );
  });

  it('should show an error if the uploaded document is password protected', () => {
    cy.login();
    cy.contains('Upload documents').click();
    cy.get('input[type=file]')
      .eq(1)
      .uploadFile('file-sample-encrypted', 'application/pdf');
    cy.get('.terms-and-conditons-container').should(
      'contain',
      'By uploading your No-Claims Bonus/Discount you are confirming that:'
    );
    cy.contains('I agree').click();
    cy.get('.a-loading-indicator-container').should('contain', 'Please wait');
    cy.wait(10000).then(() => {
      cy.get('.a-results-page__label').should(
        'contain',
        'We could not upload your document as it is password protected. Remove password or save as a JPG / screenshot before uploading.'
      );
      cy.get('.a-button--primary').should('contain', 'Try again');
      cy.contains('Try again').click();
      cy.get('.a-file-upload__label')
        .eq(0)
        .should('contain', 'Driving Licence');
      cy.get('.a-file-upload__label')
        .eq(1)
        .should('contain', 'No Claims Bonus');
    });
  });
});

I have Node v14.15.1 with npm v6.14.8.

Also, when I run npm list I see this in the output:

-- UNMET PEER DEPENDENCY typescript@3.5.3

npm ERR! peer dep missing: react@^15.1.0, required by react-console-component@0.6.1
npm ERR! peer dep missing: react-dom@^15.1.0, required by react-console-component@0.6.1
npm ERR! peer dep missing: typescript@2.x, required by react-scripts-ts@2.15.1
npm ERR! peer dep missing: typescript@2.x, required by ts-jest@22.4.6
npm ERR! peer dep missing: typescript@^2.1.0, required by fork-ts-checker-webpack-plugin@0.2.10
npm ERR! peer dep missing: typescript@2.x, required by ts-jest@22.0.1
npm ERR! peer dep missing: ajv@^6.9.1, required by ajv-keywords@3.5.2

Answer 1

I think you have mixed several versions of React.

Delete your node_modules and your package-lock.json and re-run npm install .