[bug]: ./node_modules/@react-spring/types/interpolation.d.ts:11:8 Type error: ';' expected.

[jessemoe]

Which react-spring target are you using?

• [X] @react-spring/web
• [ ] @react-spring/three
• [ ] @react-spring/native
• [ ] @react-spring/konva
• [ ] @react-spring/zdog

What version of react-spring are you using?

^9.4.4

What's Wrong?

Failed to compile.

16:24:03.871 |   16:24:03.872 | ./node_modules/@react-spring/types/interpolation.d.ts:11:8 16:24:03.872 | Type error: ';' expected. 16:24:03.872 |   16:24:03.872 | 9 | <In, Out>(interpolator: InterpolatorFn<In, Out>): typeof interpolator 16:24:03.872 | 10 | 16:24:03.872 | > 11 | (config: InterpolatorConfig): (input: number) => Animatable 16:24:03.872 | | ^ 16:24:03.872 | 12 | 16:24:03.873 | 13 | ( 16:24:03.873 | 14 | range: readonly number[], 16:24:03.940 | error Command failed with exit code 1. 16:24:03.940 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 16:24:03.955 | Error: Command "yarn run build" exited with 1

To Reproduce

deploy react app written by typescript in vercel

Expected Behaviour

no compile error

Link to repo

no

[joshuaellis]

Please provide a reproduction of the issue otherwise the issue will be closed.

[jessemoe]

import React from 'react';
import { useSpring, animated } from 'react-spring';
import classNames from 'classnames';
import { ErrorMessage } from 'formik';
import styles from './FormLayout.module.css';

export default function FormLayout({ className, children }) {
  return <div className={classNames(styles.form, className)}>{children}</div>;
}

export const FormButtons = ({ className, children }) => (
  <div className={classNames(styles.buttons, className)}>{children}</div>
);

export const FormError = ({ name }) => {
  return <ErrorMessage name={name}>{msg => <ErrorTag msg={msg} />}</ErrorMessage>;
};

const ErrorTag = ({ msg }) => {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } });

  return (
    <animated.div className={styles.error} style={props}>
      <div className={styles.msg}>{msg}</div>
    </animated.div>
  );
};

export const FormRow = ({ children }) => <div className={styles.row}>{children}</div>;

export const FormMessage = ({ children }) =>
  children ? <div className={styles.message}>{children}</div> : null;

run yarn build will repoduct the issue

[joshuaellis]

That won't compile because the other parts (like imports) aren't there. People normally use codesandbox or provide an actual github repo.

[stnwk]

This bug happens because In and Out have become reserved keywords in TypeScript 4.7.0 (beta) onwards, see https://devblogs.microsoft.com/typescript/announcing-typescript-4-7-beta/#optional-variance-annotations-for-type-parameters

[joshuaellis]

This bug happens because In and Out have become reserved keywords in TypeScript 4.7.0 (beta) onwards, see https://devblogs.microsoft.com/typescript/announcing-typescript-4-7-beta/#optional-variance-annotations-for-type-parameters

Thanks for letting me know, I can take a look at this as part of the r18 PR i've got open.

[joshuaellis]

i've released a new beta, 9.4.5-beta.2 that hopefully addresses this issue.

[jessemoe]

i've released a new beta, 9.4.5-beta.2 that hopefully addresses this issue.

Thank you! branch 9.4.5-beat.2 fixed this bug.