v9.0.0-rc.3 –– Questions and feedback

[aleclarson]

Go here first: v9 docs

Please leave your questions and feedback about v9.0.0-rc in this thread.

 

🐛 Bug reports deserve their own issue. Fork this sandbox to create a minimal repro.

npm install react-spring@9.0.0-rc.3 -E
# or
npm install react-spring@next -E

_{Last Updated: May 11, 2020}

 

Try the UMD bundle:
https://cdn.jsdelivr.net/npm/@react-spring/web@9.0.0-rc.3/index.umd.min.js

Read the source:
https://github.com/react-spring/react-spring/tree/v9.0.0-rc.3

Have any suggestions to improve the docs?
Speak up here: #967

Want to write a blog post for the docs?
Speak up here: #973

 

[aleclarson]

#986 Unfortunately, it looks like the .cjs bundle is broken. 😢

[dagstuan]

@aleclarson I'm getting typescript errors when using RC1.

node_modules/@alloc/types/react.d.ts:1:8 - error TS1259: Module '"C:/.../node_modules/@types/react/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

1 import React, { ReactElement, MutableRefObject } from 'react'

node_modules/@react-spring/core/index.d.ts:1:8 - error TS1259: Module '"C:/../@types/react/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

1 import React, { ReactNode, RefObject } from 'react';```

[TrySound]

Shared package has circular dependencies which may lead to unwanted effect in some cases.

[!] Error: Circular dependency:
../node_modules/@react-spring/shared/esm/globals.js ->
../node_modules/@react-spring/shared/esm/FrameLoop.js ->
../node_modules/@react-spring/shared/esm/globals.js

[dagstuan]

Using event props with useTransition in 9.0.0-rc.1 seems to have no effect. At least I'm not getting anything in the console with a transition such as this one:

useTransition(items, {
  from: { opacity: 0 },
  enter: { opacity: 1 },
  leave: { opacity: 0 },
  onChange: () => console.log('change'),
  onRest: () => console.log('rest'),
  onProps: () => console.log('props'),
})

I can make a repro once #986 is fixed.

[aleclarson]

@aleclarson I'm getting typescript errors when using RC1.

I guess libraries can't use esModuleInterop or allowSyntheticDefaultImports if they emit a declaration file. 😢

See here: microsoft/TypeScript#28009

For now, you can work around it by using esModuleInterop: true in your project's tsconfig.json.

[TrySound]

@aleclarson Named exports is recommended way to import react. Default export will be gone eventually. Import like this if jsx is used.

import * as React from 'react';
import { useState } from 'react';