Getting error when creating React HOC in Typescript

Question

I am trying to create and compile an React Higer Order Component in Typescript.

But I get an error. Firstly VSCode complains about this

'WrappedComponent' refers to a value, but is being used as a type here.

** And my Typescript compiler throws this error.**

lib/auth.ts:44:30 - error TS1005: '>' expected.

44     return <WrappedComponent {...this.props} />;
                                ~

lib/auth.ts:44:47 - error TS1109: Expression expected.

44     return <WrappedComponent {...this.props} />;
                                                 ~

lib/auth.ts:44:48 - error TS1109: Expression expected.

44     return <WrappedComponent {...this.props} />;

**Here is my code below of the React HOC component **

import * as React from 'react';
import Router from 'next/router';
import { NextContext } from 'next';
import nextCookie from 'next-cookies';
import { MOVED_TEMPORARILY } from 'http-status-codes';

interface ComponentExtra extends React.Component, React.SFC {
  getInitialProps: Function;
}

export const withAuthSync = (WrappedComponent: ComponentExtra) => class extends React.Component {
  static async getInitialProps(ctx: NextContext) {
    const token = auth(ctx);
    const componentProps = WrappedComponent.getInitialProps && (await WrappedComponent.getInitialProps(ctx));
    return { ...componentProps, token };
  }

  render() {
    return <WrappedComponent {...this.props} />;
  }
};

export const auth = (ctx: NextContext) => {
  const { req, res } = ctx;
  const { token } = nextCookie(ctx);

  if (req && res && !token) {
    res.writeHead(MOVED_TEMPORARILY, { Location: '/signin' }).end();
    return;
  }

  return token;
};

**Update the error was due to the file extension was not .tsx but .ts **

I forgot to mention that the error occurs in the render function return line — jonjonson
– jonjonson, Commented Apr 14, 2019 at 20:38
What does the error say? edit your question and add the error log and line number of the error, and any compile time error in the editor, if there is any TSLint setup — Amir-Mousavi
– Amir-Mousavi, Commented Apr 14, 2019 at 20:51
The question should contain stackoverflow.com/help/mcve . This piece of code doesn't use WrappedComponent as a type and can't cause this error. — Estus Flask
– Estus Flask, Commented Apr 15, 2019 at 6:04
It isn't parsed as JSX syntax, that's the problem. It should be auth.tsx and not auth.ts, for starters. In case TS was configured correctly, that's the only fix that is needed. — Estus Flask
– Estus Flask, Commented Apr 15, 2019 at 9:50

Estus Flask · Accepted Answer · 2019-05-07 15:38:51Z

39

The error means that JSX syntax isn't parsed as such:

lib/auth.ts:44:30 - error TS1005: '>' expected.
44     return <WrappedComponent {...this.props} />;

In order to do that, auth.ts should be renamed to auth.tsx. In case TypeScript was configured correctly for JSX, this the only fix that is need.

edited May 7, 2019 at 15:38

answered May 6, 2019 at 16:15

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Akshay Shrivastav Over a year ago

Thanks in my case i had it .ts instead of .tsx

Brain2000 · Accepted Answer · 2019-06-26 17:22:47Z

0

I had the same error, but for a different reason. I had a commented out a JSX element in the previous line, as such:

file1.tsx
  export const WrappedComponent = HocFunction(Component);


file2.tsx
  import { WrappedComponent }  from './file1.tsx';
  ...
  // <SomeJSXTag />
  <WrappedComponent /> --- Error: 'WrappedComponent' refers to a value, but is being used as a type here.

I finally fixed it by changing the comment to look like this:

  {/*
  <SomeJSXTag />
  */}
  <WrappedComponent /> --- Error Disappeared

and the error went away.

For now, this might just be JSX behavior: https://wesbos.com/react-jsx-comments/

answered Jun 26, 2019 at 17:22

Brain2000

4,9322 gold badges29 silver badges36 bronze badges

Collectives™ on Stack Overflow

Getting error when creating React HOC in Typescript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related