0

I trying to implement basic example of react-spring animation but Typescript and also console after compilation throws a lot of errors

I took on the background this example:

import { Spring } from 'react-spring'

<Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>

{props => <div style={props}>hello</div>}

</Spring>

Typescript throws :

JSX element type 'Spring' does not have any construct or call signatures.

Parameter 'props' implicitly has an 'any' type.

Property 'toggle' does not exist on type 'Readonly<{}>'.

Type '{ children: ({ x }: { x: number; }) => Element; native: true; from: { x: number; }; to: { x: number; }; config: { duration: number; }; }' is not assignable to type 'IntrinsicAttributes & In trinsicClassAttributes> & Readonly<{ children?: ReactNode; }> & Readonly>'. Property 'native' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes> & Readonly<{ children?: ReactNode; }> & Readonly>'.

Property 'interpolate' does not exist on type 'number'.

Property 'interpolate' does not exist on type 'number'.

Parameter 'x' implicitly has an 'any' type.

and futuremore from console:

react-dom.development.js:55 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

The above error occurred in the component: in div in Unknown. Consider adding an error boundary to your tree to customize error handling behavior.

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. in Unknown

How to overcome this issues? Should I wait for official package with typescript support or should I add just global typings for this lib?

Dominik
  • 37
  • 1
  • 1
  • 9
  • The example you have works for me without errors in a fresh project with react-spring v7.2.5, Typescript v3.2.2, @types/react v16.7.18, @types/react-dom v16.0.11. Are you using different versions? It might be helpful if you share your tsconfig.json file. – Jesse Hallett Dec 26 '18 at 23:26
  • @JesseHallett package.json "@types/react": "^16.7.17", "@types/react-dom": "^16.0.11", "react-spring": "^7.2.3", – Dominik Dec 27 '18 at 00:49
  • tsconfig.json"outDir": "./dist/", "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es5", "jsx": "react", "allowJs": true, "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, "noImplicitThis": true, "strictNullChecks": true, "suppressImplicitAnyIndexErrors": true, "noUnusedLocals": true, "baseUrl": "src", "allowSyntheticDefaultImports": true, "esModuleInterop": true – Dominik Dec 27 '18 at 00:49
  • Nothing in that config jumps out at me. This error message seems to indicate that `Spring` is somehow not imported correctly: "JSX element type 'Spring' does not have any construct or call signatures." Are you sure that the code in your question is exactly the same as in your source? Could you paste the complete source file content? – Jesse Hallett Dec 27 '18 at 01:03
  • yea, this is my current App.tsx `import React from 'react'; import Spring from 'react-spring'; import c from './app.scss'; export const App = () => { return (
    {props =>
    hello
    }
    ); }; `     – Dominik Dec 27 '18 at 01:08
  • not sure if I can autoformat tsx code, sory in advance for styling – Dominik Dec 27 '18 at 01:10
  • also this css Modules file contains of .main { display: flex; flex-direction: column; } – Dominik Dec 27 '18 at 01:10
  • when I try to console.log Spring element it's undefined. Not sure why – Dominik Dec 27 '18 at 01:17
  • 1
    The import in the question is correct, but not in that pasted source. Change `import Spring from 'react-spring'` to `import { Spring } from 'react-spring'`. You want the export named `Spring`, not the default export; so you need the curly braces. – Jesse Hallett Dec 27 '18 at 01:58

0 Answers0